[Feature?]: Support CSS Props for createTheme

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Currently, when creating a custom theme with the createTheme function, you are forced to use (Typescript) traditional CSS colors:

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

By supporting this, MUI theme extension can allow systems that already have CSS Property themes built out without needing to do any extra work via CssVarsProvider unnecessarily compounding the CSS Properties in the browser.

Example of what the undesired result would cause:

:root {
 --var-custom-background: #000;
}

.light {
--var-custom-background: #fff;
}

/* additional MUI props that are unnecessary */
:root {
 --mui-palette-main: #000;
 --mui-palette-dark: #000;
 --mui-palette-light: #fff;
...
}

This also reveals an enhancement in the MUI CSS var production from the CssVarsProvider API that should rewrite values vs creating multiple tokens of the same category (like the custom examples above).

Examples 🌈

Example of desired feature:

const theme = createTheme({
  palette: {
    primary: {
      main: 'var(--action-background)'
    },
    secondary: {
      main: 'var(--info-background)'
    }
  }
});

Or, even something like this:

const theme = extendTheme({
  colorSchemes: {
      palette: {
        primary: {
          main: 'var(--action-background)',
        },
      },
  },
});

Motivation 🔦

Allowing this would seamless work with apps that already have multi theme support built in and just need MUI to provide components that consume the themes.

By continuing not to support this feature and force the current and experimental APIs will create duplicated tokens, logic, and package installation just to use predetermined themes that already work within the ecosystem (i.e. don’t make us have to create custom “styled” components for every single component we use vs. adjusting the colors like above).

If I missed something in the docs, please forgive my transgression. 🙏

[siriwatknp]

100% not an MUI user, so forgive me if I’m out of line or way off base on all of this. Just experimenting on some different use cases for extending the lib.

Definitely not. I am glad that you did this to help us improve the library. Feedbacks and suggestions are always welcome 👍

[siriwatknp]

Or, even something like this:

const theme = extendTheme({
  colorSchemes: {
      palette: {
        primary: {
          main: 'var(--action-background)',
        },
      },
  },
});

If you want to change the default palette to other CSS variables, you can do it after the theme is created:

const theme = extendTheme();

theme.colorSchemes.light.palette.primary.main = "var(--color)";
theme.colorSchemes.dark.palette.primary.main = "var(--color)";

function App() {
  return <CssVarsProvider theme={theme}>...</CssVarsProvider>
}

https://codesandbox.io/s/proud-silence-ffwgge?file=/demo.tsx