[experimental_extendTheme] Unable to use custom css variable in theme

[asingh1098]

I want to use custom css variables in mui's extend theme api like this :

import { experimental_extendTheme as extendTheme } from "@mui/material/styles";

export const theme = extendTheme({
  colorSchemes: {
    light: {
      palette: {
        primary: {
          main: 'var(--primary-color)',   // <-- This doesn't work 🚨
        },
      },
    },
  },
});

Unfortunately, its giving me error :

Uncaught Error: MUI: Unsupported `var(--warning-color)` color.
The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().

Is there any way to refer to custom css variable in extend theme?

Search keywords:

[brijeshb42]

What's your use case ? You want to use theme.palette.primary.main to refer to the css variable everywhere ? Are you trying to override the default theme with your own color ?

[siriwatknp]

As a workaround, you can use plain CSS file to override the primary.main variable.

// overrides.css
:root {
  --mui-palette-primary-main: var(--primary);
}

In the future, what you propose is possible. See #41237