0

I've styled my website using a theme.js file utilizing emotion and styled-system and want to show the value (e.g #141414) on the front end vs the token name (e.g bgPrimary).

Obviously when I use the token in practice, my website's background is the correct value but I want to showcase the token name and value on the front end as well (for documentation purposes).

An example of how I regularly use it is like so:

background-color: ${props => props.theme.colors.bgPrimary)

But if I wanted to show the value of bgPrimary on the front-end inside a Text component, like so:

<Text value={___} />

how would I have that return the value #141414 without actually hardcoding the HEX value?

Here's how the color object in theme file currently looks:

const colors = {
  accent: '#8548FF',
  actionPrimary: '#12A55C',
  actionPrimaryInteractive: '#0C6E3D',
  actionSecondary: '#292929',
  actionSecondaryInteractive: '#1F1F1F',
  bgPrimary: '#141414',
  bgSecondary: '#0A0A0A',
  contentPrimary: '#F5F5F5',
  contentSecondary: '#8F8F8F',
  modes: {
    light: {
      accent: '#691FFF',
      actionPrimary: '#16CA70',
      actionPrimaryInteractive: '#109351',
      actionSecondary: '#E0E0E0',
      actionSecondaryInteractive: '#CCCCCC',
      bgPrimary: '#EBEBEB',
      bgSecondary: '#F5F5F5',
      contentPrimary: '#0A0A0A',
      contentSecondary: '#707070',
    },
  }
}

As you can see, I have two color modes and bgPrimary is different depending on which mode you have set. This is why it's important for the value to be pulled from the theme vs hardcoded.

Oliver Dumoulin
  • 1
  • ``??? – Sam R. Feb 11 '22 at 18:47
  • @sam-r unfortunately this does not work as it `cannot read properties of undefined (reading 'colors')` since it's not actually applying a color but just referencing the value of the color. – Oliver Dumoulin Feb 11 '22 at 19:15
  • 1
    You have to do/wrap whatever you did for the other component that receives the theme as props for the `Text` component as well. Or just pass the theme object directly to it. – Sam R. Feb 11 '22 at 19:16
  • Okay so it looks like `{theme.colors.bgPrimary}` sort of works after I added `= ({ colors, ...props })` to the component. It pulls in the primary color mode value but when I change the color mode the value doesn't change. Any idea why? – Oliver Dumoulin Feb 11 '22 at 19:52
  • Pass the theme colors object you wrote and theme name currently using as a prop to a component. `= ({colorObj, currentTheme, ..otherProps}) => { ...`. and write this inside that component. `{colorObj[currentTheme]}`. that's it. if you don't want to pass current theme name as a property, use state management e.g recoil. so that everytime you change your theme, that comonent's currentTheme state will be changed and re-rendered. – Mocha Mar 04 '22 at 12:09

0 Answers0