[docs] Adding custom light and dark themes always render dark theme

[karolis-666]

Related page

https://mui.com/material-ui/customization/dark-mode/

Kind of issue

Unclear explanations

Issue description

We have a lot of custom props used in palette to extend available color schematics. Now we are trying to figure out how to also implement dark mode in the same way.

import { palette, paletteDark } from './palette'

const theme: Theme = responsiveFontSizes(
  createTheme({
    shadows,
    cssVariables: true,
    colorSchemes: {
      light: { palette: palette },
      dark: { palette: paletteDark },
    },
    ...breakpoints,
    ...components,
    ...typography,
    ...shape,
  }),
);

export const ThemeProvider: FC<ThemeProviderProps> = ({ children }) => (
  <MuiThemeProvider theme={theme}>
    <CssBaseline />
    {children}
  </MuiThemeProvider>
);

Now we check current theme with const { mode, setMode } = useColorScheme(); and we get correct theme and setMode is also working as expected.

Also with const { palette } = useTheme() from @mui/material we get the correct palette, so it seems alright.

So where is the issue? The App in light mode does not use light: { palette: palette },, but uses dark: { palette: paletteDark }. It's a little bit unclear what correct approach should be to implement different theming, when our palette's are not just modifying primary, secondary, etc. colors, but adding various custom new props. We get from useColorScheme that we are in light mode, useTheme returns correct light mode palette, but apps renders darkTheme anyway

Context

Custom light and dark theming. Here is an example of our light palette how we declare it

declare module '@mui/material/styles/createPalette' {
  interface Palette {
    accent: {
      poppyLight: string;
      poppyLighter: string;
      poppyExtraLight: string;
      aqua: string;
      beige: string;
      intenseFire: string;
      intenseFireLighter: string;
      blueLagoon: string;
      blueLagoonLight: string;
      candy: string;
      violet: string;
      mintLight: string;
      mintMedium: string;
    };
    white: string;
    gray: string;
    grayHighlighted: string;
    purple: string;
    cardBackground: string;
    gradients: {
      error: string;
      warning: string;
      success: string;
    };
    graphPalette: string[];
  }

  interface PaletteOptions {
    accent: {
      poppyLight: string;
      poppyLighter: string;
      poppyExtraLight: string;
      aqua: string;
      beige: string;
      intenseFire: string;
      intenseFireLighter: string;
      blueLagoon: string;
      blueLagoonLight: string;
      candy: string;
      violet: string;
      mintLight: string;
      mintMedium: string;
    };
    white: string;
    gray: string;
    grayHighlighted: string;
    cardBackground: string;
    gradients: {
      error: string;
      warning: string;
      success: string;
    };
    graphPalette: string[];
  }
}

export const palette = {
  primary: {
    main: '#F8485E',
    contrastText: '#FFFFFF',
  },
  secondary: {
    main: '#5AB891',
    contrastText: '#FFFFFF',
  },
  error: {
    main: '#EC86A3',
    light: '#FDDADE',
    contrastText: '#FFFFFF',
  },
  warning: {
    main: '#FCC354',
    contrastText: '#FFFFFF',
  },
  info: {
    main: '#4A8CCA',
    contrastText: '#FFFFFF',
  },
  success: {
    main: '#5AB891',
    contrastText: '#FFFFFF',
  },
  accent: {
    poppyLight: '#FCA2AE',
    poppyLighter: '#FDDADE',
    poppyExtraLight: '#FFEEF0',
    aqua: '#D7EBE7',
    beige: '#EFEADC',
    intenseFire: '#FCC354',
    intenseFireLighter: '#FFF5E0',
    blueLagoon: '#4A8CCA',
    blueLagoonLight: '#BBD6EE',
    candy: '#EC86A3',
    violet: '#814DA2',
    mintLight: '#EEF5F3',
    mintMedium: '#B8DED0',
  },
  white: '#FFFFFF',
  gray: '#EFEEEE',
  grayHighlighted: '#EBEBEB',
  divider: '#EFEEEE',
  text: {
    primary: '#3C3C3A',
    secondary: '#959594',
    disabled: '#C4C4C4',
    contrast: '#FFFFFF',
  },
  background: {
    paper: '#FFFFFF',
    default: '#F7F8F9',
  },
  cardBackground: '#FAFBFB',
  gradients: {
    error: '#FFEEf08A',
    warning: '#FFF4DEDE',
    success: '#D1E8E25E',
  },
  graphPalette: [
    '#FCC354',
    '#5AB891',
    '#4A8CCA',
    '#63238C',
    '#9F90F6',
    '#F09E52',
    '#8DE8DD',
    '#ECA0F2',
    '#38C9F6 ',
    '#67C85F',
  ],
};

Search keywords: theme, dark theme, light theme

[siriwatknp]

Can you try this in your package.json?

-"@mui/material": "6.0.1",
+"@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/3df87c53/@mui/material",

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @karolis-666! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

[karolis-666]

Made a quick repro

Did not worked. Made separate themes, but dark theme is always active

[ksn5]

@siriwatknp Yes, I tried it as well, but it didn’t work...

[ksn5]

const theme = createTheme({ cssVariables: { colorSchemeSelector: "class", }, colorSchemes: { light: true, dark: true }, });

@karolis-666 I found this workaround from another source, and it's working.

[karolis-666]

Thanks, this workaround seems to work!

[karolis-666]

Never mind, while it worked in development, there were some issues with colors after building the app.

Is this method expected to be used for theming, or should a different approach be used now?

[ggascoigne]

const theme = createTheme({ cssVariables: { colorSchemeSelector: "class", }, colorSchemes: { light: true, dark: true }, });

@karolis-666 I found this workaround from another source, and it's working.

That cssVariables: { colorSchemeSelector: "class" } bit took me way too long to find, thank you. What I don't understand is that it was working correctly for a while and then just stopped, so I assumed it was something on my end, and not something that was misconfigured from the start. Oh well, live and learn, should have searched here first.

[siriwatknp]

That cssVariables: { colorSchemeSelector: "class" } bit took me way too long to find, thank you. What I don't understand is that it was working correctly for a while and then just stopped, so I assumed it was something on my end, and not something that was misconfigured from the start. Oh well, live and learn, should have searched here first.

Thanks for asking. It's explain in the docs, is there anything we could make it clearer?

[ggascoigne]

You want to know what's particularly galling, but I have that very section on an already open tab, I didn't even have to scroll to see it, and I'd still managed to miss it.

I saw the bit about calling useColorScheme and completely missed the section on colorSchemeSelector, repeatedly. I'm looking at it now and honestly don't know how I missed it.

I do think that it working for about half a day and stopping working sent me off on the wrong track for a long time, and that is likely the cause, I've got no real explanation for that.

Anyway, on rereading the docs for this, they seem completely reasonable.

I do sort of question why one of these approaches, say 'class', isn't the default since some sort of manual configuration is pretty much the standard approach, but that is also just my opinion and obviously others differ.

[ggascoigne]

I think I found part of the root of my confusion, and it's this https://mui.com/material-ui/customization/dark-mode/#toggling-color-mode - which suggests that you can manually control the mode but makes no mention of needing to set colorSchemeSelector.

[siriwatknp]

I think I found part of the root of my confusion, and it's this https://mui.com/material-ui/customization/dark-mode/#toggling-color-mode - which suggests that you can manually control the mode but makes no mention of needing to set colorSchemeSelector.

Thanks for the feedback. The useColorScheme works with/without CSS variables. However, with CSS variables, it will work if you set the colorSchemeSelector because the default method is @media prefers-color-scheme which does not allow user to toggle a specific mode.

I think it'd be helpful to display warning when setMode is called without configuring the colorSchemeSelector. I will open a PR to improve this.