[theme] Material UI CSS Variables not respected for derived component colors when using external stylesheet

[sodehl]

Steps to reproduce

Open the provided StackBlitz link and inspect the Alert component's background color: https://stackblitz.com/edit/nze14hel?file=src%2FDemo.tsx

Current behavior

Many MUI components generate derived colors (like Alert backgrounds, Slider tracks, Switch disabled states) using JavaScript color manipulation at theme initialization time, which bakes in the default palette values instead of referencing the CSS variables.

Example with Alert component:

When using a standard Alert with color="info", the background color uses the default MUI blue (lightened by 90%) instead of our --mui-palette-info-* CSS variable defined in our stylesheet.

The generated CSS variable looks like:

--mui-palette-Alert-infoStandardBg: rgb(229, 246, 253); // 👈 Hardcoded color value based on default palette

This means CSS variables are completely ignored.

Expected behavior

Derived component colors should reference the CSS variables so they update dynamically when the base palette variables are overridden in external stylesheets.

Possible Solution

Generate the CSS variable by using the color-mix function and referencing the CSS variables:

--mui-palette-Alert-infoStandardBg: color-mix(in srgb, var(--mui-palette-info-light), #fff 90%);

Context

We have a micro frontend architecture where multiple apps need to share a consistent theme. To maintain this centrally, we've created a single CSS file containing MUI CSS variables (e.g., --mui-palette-info-light, --mui-palette-info-main, etc.) that gets loaded by all micro frontends.

Our createTheme configuration is minimal and only enables CSS variables support:

const theme = createTheme({
  cssVariables: true,
});

The actual color values are defined in our external CSS file:

:root {
  --mui-palette-info-light: #dfc21f;
  --mui-palette-info-main: #d3b613;
  --mui-palette-info-dark: #b89f11;
  /* ... etc */
}

This approach is similar to the pattern described in the MUI documentation for aliasing color variables.

Expected benefit: We can update colors centrally in the CSS file and all micro frontends immediately reflect the changes without rebuilding or redeploying individual applications.

Your environment

Order ID: 115541

Search keywords: Theme, CSS Variables, palette

[linear]

MAT-1759

[ZeeshanTamboli]

@sodehl This was supported since v7.3.0 with enabling the nativeColor option. You can checkout the docs at https://mui.com/material-ui/customization/css-theme-variables/native-color/.

See how it's done: https://stackblitz.com/edit/nze14hel-kgbar6jk?file=src%2FDemo.tsx.

If using CSS variables, you need to provide those variables to the theme's palette options as shown in the following docs: https://mui.com/material-ui/customization/css-theme-variables/native-color/#aliasing-color-variables

Does this work for you?

---

cc @siriwatknp If I am doing anything wrong here or anything that can be done in a better way.

Maybe there is a way to eliminate the following in createTheme if Material UI's CSS variables are used:

  palette: {
    info: {
      main: 'var(--mui-palette-info-main)',
      light: 'var(--mui-palette-info-light)',
      dark: 'var(--mui-palette-info-dark)',
    },
  },

[siriwatknp]

@ZeeshanTamboli I think what author wants is that the generated CSS var should build on top of another CSS variable, not the raw value:

- setColor(palette.Alert, 'infoStandardBg', colorMix(safeLighten, palette.info.light, 0.9));
+ setColor(palette.Alert, 'infoStandardBg', colorMix(safeLighten, nativeColor ? getCssVar('palette-info-light') : palette.info.light, 0.9));

And yes, I think with nativeColor enabled, it can be done because we no longer relying on JS color manipulation.

[sodehl]

@ZeeshanTamboli, @siriwatknp Thanks for your reply. Enableling the nativeColor option and referencing the CSS variables in the palette does the trick. I inspected the generated CSS variable in the Browser and now it correctly references the base palette variable:

--mui-palette-Alert-infoStandardBg: color-mix(in oklch, var(--mui-palette-info-light), #fff 90%);

[ZeeshanTamboli]

@sodehl Would you like to close the issue?

[sodehl]

@ZeeshanTamboli Just to clarify: does this mean that all MUI CSS variables defined through an external CSS file must be referenced in the theme options in order for the generated CSS variables to build upon them?
For example: if we introduce a new CSS variable --mui-palette-common-onBackground in our external stylesheet, would all frontends that consume this stylesheet need to reference this variable in their createTheme options to ensure that any subsequently generated CSS variables are based on it?