[Mui v6] Set default mode at first render

[mtr1990]

Steps to reproduce

In the process of migrating from MUI v5 to MUI v6

In v5 I can specify "dark" or "light" as default but in v6 the default is always "system"

Here is the code that worked in v5. But in v6 the defaultMode flags have been removed

  <InitColorSchemeScript
    defaultMode={"light}
    modeStorageKey={schemeConfig.modeStorageKey}
  />
  
 <AppRouterCacheProvider options={{ key: 'css' }}>
<CssVarsProvider
  theme={theme}
  defaultMode={"light"}
  modeStorageKey={schemeConfig.modeStorageKey}
>
  <CssBaseline />
  <RTL direction={settings.direction}>{children}</RTL>
</CssVarsProvider>
</AppRouterCacheProvider>

Current behavior

Default mode is always "system" at first render

Expected behavior

Maybe specify "light" / "dark" / "system" to default instead of always defaulting to "system" at first render

Context

No response

Your environment

No response

Search keywords: Set default mode

[oliviertassinari]

@mtr1990 It sounds like you are looking for https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually. Does it solve your problem?

Now, the docs structure confuses me a bit. I would assume that the CSS variables about dark mode should be into https://mui.com/material-ui/customization/dark-mode/.

[mtr1990]

Thanks for your response but it seems this document you provided doesn't work for me.

As far as I understand createTheme creates a default mode of light.

But mode and systemMode from useColorScheme will always take the priority value from the system.

Currently my computer system is dark state but I want my web application to always be light by default (without configuration from the computer system). Can we specify light,dark,system modes instead of default always beingsystem?

[siriwatknp]

I'd say this is an edge case. The reason is why do you want your app to be light by default when the user prefers dark?

Another question, do you need to set the default as light but still letting user toggle to other modes? or do you want to force the page to always be light.

[mtr1990]

Hi @siriwatknp

The reason is why do you want your app to be light by default when the user prefers dark?

Because for my application the color palette in light mode is more important. It highlights the UI components I built and dark mode in my app is just a secondary option.

So I want to set the light mode by default so that first time users get the best impression of my app.

Users may prefer to set their own default mode rather than being forced to follow a pre-set mode and our customers (users) are also developers (they also have the need to customize things) not end users

Another question, do you need to set the default as light but still letting user toggle to other modes? or do you want to force the page to always be light.

The default is light mode and users can switch to dark or system.

In my app there is a setting option for light and dark. So if the default mode is not customizable (default is always system) then the defaultSettings we provide is meaningless.

I just thought v6 had support for this feature and I didn't find the documentation to customize it. But according to your answer, this feature is currently unavailable.

Can you help me provide a solution to this problem? (The default can be: light, dark or system and they can switch modes )

[GBvanDam]

@siriwatknp maybe the other way around makes more sense. We have an application that users will use at night. Most of the users have their devices on light mode, but at night they want to switch to dark mode in our application. Right now, they would have to switch to dark mode for every night they need our application, as it will time and again default to system.

Agree with (The default can be: light, dark or system and they can switch modes)

[siriwatknp]

Can you help me provide a solution to this problem? (The default can be: light, dark or system and they can switch modes )

Thanks for your feedback, I am working on this.

[MartinXPN]

I'm facing the same issues as @mtr1990 Would be great if we could provide the default color scheme. Have there been any updates on this?

[ggascoigne]

My use case is similar, I want to make sure that the default starts as light mode, but I want to allow the user to change it - after which, it is OK to use whatever they last chose. Whilst personally I love having system be the default, my PMs specifically want light mode to be the default to allow users to opt in to the other options and not suddenly get a changed ui.

[siriwatknp]

@mtr1990 Can you try this?

{
  "@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/e07eebfd/@mui/material"
}

[mtr1990]

@mtr1990 Can you try this?

{
  "@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/e07eebfd/@mui/material"
}

Thanks @siriwatknp It works 👍 . I will come back if there are any other problems.

Share settings for anyone who needs it.

export const schemeConfig = {
  modeStorageKey: 'theme-mode',
  defaultMode: 'light
};

import { ThemeProvider as ThemeVarsProvider } from '@mui/material/styles';

<AppRouterCacheProvider options={{ key: 'css' }}>
<ThemeVarsProvider
  theme={theme}
  modeStorageKey={schemeConfig.modeStorageKey}
  defaultMode={schemeConfig.defaultMode}
>
  <CssBaseline />
</ThemeVarsProvider>
</AppRouterCacheProvider>

import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';

<InitColorSchemeScript attribute="data" modeStorageKey={schemeConfig.modeStorageKey} />

[github-actions[bot]]

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 @mtr1990! How was your experience with our support team? We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

[MartinXPN]

The theme flickers on the first render. If the system default color mode is set to dark, and the defaultMode of the Theme is set to light, the app still renders the UI in dark theme, and then switches to the light mode on the client side. This causes flickering of the whole page on the first render.