React use theme variables inside styled from styled-components

Question

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.

//default
500: "#139ebe",

//modes
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")(

Demo:

Open the console in codesandbox, you will see the current theme. Remove the dark mode and save it, than you will see the change. https://codesandbox.io/s/blue-cache-bp9ns?fontsize=14

Answer 1

This is the correct way of passing the props to variant

const type = props => (variant({

}));