React Use Theme Variables Inside Styled From Styled-components

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.

In my theme.js are colors and there is a mode (dark) with colors.

500: "#139ebe",

modes: {
  dark: {
    blues: {
      500: "white"

These are getting merged to one theme object.

const getTheme = mode =>
  merge({}, theme, {
    colors: get(theme.colors.modes, mode, theme.colors)

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.

Via props i can access the current theme (see button.jsx line 77).

const Button = props => {
  console.log("Current theme: ", props.theme.colors.blues[500]);
  return <ButtonElem as="button" {...props} />;

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

const ButtonElem = styled("div")(


Open the console in codesandbox, you will see the current theme. Remove the dark mode and save it, than you will see the change.



This is the correct way of passing the props to variant

const type = props => (variant({