Best workaround to work with CSS variable which are not supported yet

[volta-vianney]

Hello,
I've seen in the backlog that CSS variable are coming to material ui v5.
I'm migrating all my application from rmwc to Material ui and I really don't know what is the best way to handle these CSS variable since they are not supported.

This is the kind of theme I have in my app :

const useStyles = createUseStyles({
  theme: {
    '--background-color': '#000000',
    '--foreground-color': '#ffffff',
    '--primary-color': '#141c4e',
    '--secondary-color': '#1aa3ff',

    '--inactive-color': '#222222',

    '--non-dispersed-color': '#00ffff',
    '--dispersed-color': '#ff9900',

    '--stability-level-1-color': '#1d7bc4',
    '--stability-level-2-color': '#ffffff',
    '--stability-level-3-color': '#ffff00',
    '--stability-level-4-color': '#ff9900',
  },
  fill: {
    width: '100vw',
    height: '100vh',

    display: 'flex',

    background: `var(--background-color)`,
    color: `var(--foreground-color)`,
  },
});

Thanks for the help

[eps1lon]

We simply don't support CSS variables at the moment for color values since we compute certain colors on the fly based on the theme colors. This isn't possible with variables at the moment.

See #27651 for planned support.