title: With a Styled-Components, how to set an array of colors outside of the Styled Component?
body: <p><strong>theme.js</strong> - I have a Styled-Components theme which contains all of my app's color variations.</p>
  
  <pre><code>const colors = {
    purples: {
      60: '#AEA',
      50: '#GSA',
    },
  
    blues: {
      20: '#asd',
      5: '#fasd',
    }
    ...
  </code></pre>
  
  <p>I then have a UI component where I need to define an array of colors in a specific order: </p>
  
  <pre><code>import React from 'react';
  const colors = ['#GSA', '#AEA', '#asd', '#fasd', '#AEA'];
  </code></pre>
  
  <p>I later use this <code>colors</code> array to find the right color to use in my component based on state:</p>
  
  <pre><code>const getBackgroundColor = ({ currentPosition }) =&gt; {
    const color = colors[(currentPosition) % colors.length];
    return color;
  };
  </code></pre>
  
  <p>This function is used within my styled-component like so:</p>
  
  <pre><code>const StyledCard = styled.div`
    background: ${getBackgroundColor};
    ...
  `;
  </code></pre>
  
  <p>The problem is my colors array is being set without the styled-components theme.</p>
  
  <p>How can I define a <code>const colors</code> using my theme when it is outside the styled element?</p>