'Styled Components: Global Colors Style Sheet

I'm using styled components in my app. I wanna make a global style sheet to hold all my color variables. The API Docs recommend something like this

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

but i have a list of colors like this

export const COLORS = {
  navy: "#2F374B",
  green: "#1EB88D",
  white: "#FFFFFF",
  grey: "#222A3E",
  primary5: "#F4FBF9",
  danger: "#F13F4A",
};

and i dont think the body field can accept 'colors' or list of colors as a key. Any advice for setting this up?

Thanks in advance

javascriptcssreactjsstyled-componentsstyling


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions