Exporting a common color palette to be used in styled-components

Question

We are using styled-components in our application. We want to use a common styles file containing all the colors we use. I have a file that contains:

export const colors = {
  black: '#000',
  whiteTextBackground: 'rgba(0,0,0,.6)', // black at .7 background for white text of any size to pass wcag 2 AAA contrast standards. .6 only passes AA (good enough for now)
  defaultFont: '#393A41',
  border: '#B4B7C4',
  divider: '#fafafa',
  grey: '#6E7087',
  grey1: '#d4d8e7',
  grey2: '#CACBCD',
  grey3: '#6E7078',
  grey4: '#3c3e42',
  greyLight: '#f9f9f9',
  greyDisabled: '#e4e5e6',
  offWhite: '#D4D8E7',
  aluminium: '#E9E9E9',
  checkBoxBackground: '#F2F2F2',
  white: '#fff',
  warmWhite: '#f5f2ed',
  yellow: '#F9B738',
  yellow2: '#B88D06',
  notifRed: '#EF5848',
  orange1: '#99332e',
  orange: '#BF4136',
  orange2: '#F69321',
  orange3: '#D6801D',
  purple: '#6159A4',
  purple2: '#887DE5',
  blue: '#00BADE',
  blueContrast: '#037ea2',
  stress5: '#0099B6',
  blue5: '#85D6E5',
  darkCyan: '#006b7f',
  green: '#44BB8C',
  green2: '#297f5e',
  green3: '#389A73',
  brown: '#70430F',
}

How do I import these colors to be used in a styled-component like:

const Headstyles = styled.div` 
 color: <imported color here>;
 display: flex; 
 width: 100%;
 margin: 2em; 
 <etc etc> 
`

`

did you find a solution to this problem? – cts Nov 01 '21 at 16:16 — cts, Nov 01 '21 at 16:16

score -1 · Answer 1 · answered Oct 20 '21 at 15:21

I think what you're looking for is <ThemeProvider>:

https://styled-components.com/docs/advanced

export const theme = {
  black: '#000',
  defaultFont: '#393A41',
  border: '#B4B7C4',
  divider: '#fafafa',
  grey: '#6E7087',
  grey1: '#d4d8e7',
}

Then you wrap your component Headstyles with the ThemeProvider which gives your component access to the theme variables like so:

const Headstyles = styled.div`
   color: $(props => props.theme.grey}
`;

return (
   <ThemeProvider theme={theme}>
      <Headstyles />
   <ThemeProvider />
);

Alternatively, you could just define & export the variables like you have, then import them:

import * as colors from './Colors.js'

and use them like so:

const HeadStyles = styled.div`
   color: ${colors.grey};
`

Exporting a common color palette to be used in styled-components

1 Answers1