title: React use theme variables inside styled from styled-components
body: <p>Currently i am trying to make a theme with styled-components and styled-system.
  I created a theme with all the styling that i need (theme.js), a button.jsx with styled components and variants.</p>
  
  <p>In my theme.js are colors and there is a mode (dark) with colors.</p>
  
  <pre><code>//default
  500: "#139ebe",
  
  //modes
  modes: {
    dark: {
      blues: {
        500: "white"
      }
    }
  }
  </code></pre>
  
  <p>These are getting merged to one theme object.</p>
  
  <pre><code>const getTheme = mode =&gt;
    merge({}, theme, {
      colors: get(theme.colors.modes, mode, theme.colors)
    });
  </code></pre>
  
  <p>When the mode is dark it should get the colors from the dark mode. When there is no mode it should get the normal colors. </p>
  
  <p>Via props i can access the current theme (see button.jsx line 77).</p>
  
  <pre><code>const Button = props =&gt; {
    console.log("Current theme: ", props.theme.colors.blues[500]);
    return &lt;ButtonElem as="button" {...props} /&gt;;
  };
  </code></pre>
  
  <p>In the console you can see that the color variables changes if you remove the dark mode. I need the same effect for the styled of the button. How do i access the theme that is being used from the theme provider in my </p>
  
  <pre><code>const ButtonElem = styled("div")(
  </code></pre>
  
  <p><strong>Demo:</strong></p>
  
  <p>Open the console in codesandbox, you will see the current theme. Remove the dark mode and save it, than you will see the change.
  <a href="https://codesandbox.io/s/blue-cache-bp9ns?fontsize=14" rel="nofollow noreferrer">https://codesandbox.io/s/blue-cache-bp9ns?fontsize=14</a></p>