theme colors in css

[konsumer]

I find it handy to have CSS vars for a top-level ThemeProvider.

I am currently doing this:

import { shadeColor } from './utils'

const primaryColor = '#5A33A7'
const secondaryColor = '#FF3776'
const linkColor = primaryColor
const darkColor = '#454d5d'
const lightColor = '#ffffff'
const grayColor = '#acb3c2'
const borderColor = '#e7e9ed'
const bgColor = shadeColor(darkColor, -66)
const controlSuccessColor = '#32b643'
const controlWarningColor = '#ffb700'
const controlErrorColor = '#e85600'
const codeColor = '#e06870'
const highlightColor = '#ffe9b3'
const notifyBgColor = '#ececec'
const listActiveColor = '#f0f3f5'

const colors = {
  primaryColor,
  primaryColorDark: shadeColor(primaryColor, 3),
  primaryColorLight: shadeColor(primaryColor, -3),
  secondaryColor,
  secondaryColorDark: shadeColor(secondaryColor, 3),
  secondaryColorLight: shadeColor(secondaryColor, -3),
  linkColor: primaryColor,
  linkColorDark: shadeColor(linkColor, 10),
  darkColor,
  lightColor,
  grayColor,
  grayColorLight: shadeColor(grayColor, 20),
  grayColorDark: shadeColor(grayColor, -50),
  borderColor,
  borderColorDark: shadeColor(borderColor, 15),
  bgColor: shadeColor(darkColor, -66),
  bgColorDark: shadeColor(bgColor, 3),
  bgColorLight: lightColor,
  controlSuccessColor,
  controlWarningColor,
  controlErrorColor,
  codeColor,
  highlightColor,
  notifyBgColor,
  listActiveColor
}

// make theme available in CSS vars
Object.keys(colors).forEach(c => {
  document.documentElement.style.setProperty(`--color-${c.replace('Color', '')}`, colors[c])
})

export default colors

This way, later in my CSS, I can use them like this:

a {
  color: var(--color-link);
}

This works for CSS on any modern browser (also PostCSS can polyfill at build-time.) With a little thought, I could probly scope it to the current ThemeProvider. Is there interest in a PR for this, in theme.js?

[thabti]

+1 on the pr!

[konsumer]

I think this may be a bit more complicated for supporting arbitrary depth of multiple themes, and my solution above only handles a single top-level theme (it just adds all the css attribs directly to top HTML tag.) I found this. Would it be reasonable to add this as a dep, or sort of reimplement that idea directly in ThemeProvider, or should I just implement it for a single top-level in theme.js, as I do in my own code?

[konsumer]

Basically, I could see the instructions starting with "If you use a single ThemeProvider, you can also use css-variables to grab values from your theme, like this:" with very little code being changed in theme.js, or "You can use the closest theme-colors like this:" with more code being added to ThemeProvider. I see the value of both. In my own project, I wanted a menu indicator that takes whatever the top-level primary color is for it's bottom-border. I think the theme colors might change later, but we have a single theme for the whole app. In the case of multiple themes, like for different sections, this way would not work as well.

[konsumer]

I could also see it making more sense to just encourage people to make their own special components, using styled-components, and forget the whole thing. :) The more I look at it, the more I think maybe I should have done this with my menu thing.