CSS custom properties issue

body {
  --theme-ui-colors-text: var(--theme-ui-colors-text, #495057);
  /* --theme-ui-colors-text => undefined */
}

Maybe the right way

body {
  --theme-ui-colors-text: #495057;
  /* --theme-ui-colors-text => #495057 */
}

https://codepen.io/zce/pen/rNaaByE

[iampava]

Hey!

If I understand correctly, it’s intended for the CSS variables to not be used directly by us. However, shouldn’t we allow this option (converting all theme props to CSS Variables and inserting in page)?

I arrived here after trying to style common elements like <h1>, <h2>, <strong>, <a> according to the theme and then just use them directly in the page. Later, when a 3rd party app embeds our code, it will change some part of the theme, but since it’s CSS Variables these elements will update as well.

I hacked together this adapter which allow dynamic insertion of CSS Variables. (just colors for now)

export const ThemeAdapter = (props) => {
  const ref = useRef(null);

  useEffect(() => {
    const { theme } = props;

    if (theme && theme.colors) {
      Object.keys(theme.colors).forEach(key => {
        ref.current.style.setProperty(`--colors-${key}`, theme.colors[key]);
      })
    }
  });

  return (
    <div ref={ref} >
      <ThemeProvider {...props} />
    </div>
  )
}

Although this wasn’t hard, I wonder whether this option should be present by default.

[jxnblk]

Closing this because the internal custom properties implementation will be changing slightly in v0.3