MUI + NextJS + Redux - Dark Theme switch not working on SSR

[karthikdivi]

Steps to reproduce

Steps:

1. Open this link to live example: (required)
2. Repo: https://github.com/karthikdivi/thefinalstack/tree/main
3. Run the following commands to start npm install --legacy-peer-deps and npm run dev

Current behavior

Dark mode not getting applied.

Expected behavior

On refreshing the page the dark mode should apply.

Context

When I switch the theme to Dark mode, it updates the Redux state and also preserved to LocalStorage. When I do a hard refresh in the browser, reading the theme preference from Redux and applying it. But the Dark theme is not showing.

Screen.Recording.2025-01-06.at.1.53.20.PM.mov

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
    System:
    OS: macOS 14.5
  Binaries:
    Node: 18.20.5 - ~/.nvm/versions/node/v18.20.5/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v18.20.5/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.205
    Edge: Not Found
    Safari: 17.5
  npmPackages:
    @emotion/react: latest => 11.14.0 
    @emotion/styled: latest => 11.14.0 
    @mui/core-downloads-tracker:  6.3.1 
    @mui/icons-material: latest => 6.3.1 
    @mui/material: latest => 6.3.1 
    @mui/material-nextjs: latest => 6.3.1 
    @mui/private-theming:  6.3.1 
    @mui/styled-engine:  6.3.1 
    @mui/system:  6.3.1 
    @mui/types:  7.2.21 
    @mui/utils:  6.3.1 
    @types/react:  19.0.2 
    react: ^19.0.0 => 19.0.0 
    react-dom: ^19.0.0 => 19.0.0 
    typescript:  5.7.2 

Search keywords: nextjs dark mode

[siriwatknp]

Is it required to use Redux? If not, I recommend following:

• Enable the CSS theme variables feature
• Use InitColorSchemeScript before the <Main/>

[karthikdivi]

Is it required to use Redux? If not, I recommend following:

• Enable the CSS theme variables feature
• Use InitColorSchemeScript before the <Main/>

@siriwatknp I have updated the code with InitColorSchemeScript and it's already using the cssVariables. Still the issue persists.
Also do you have any reference implementation project with Dark mode toggle?

[siriwatknp]

@karthikdivi Please check my commit. The fix is to combine light and dark theme into a single theme within colorSchemes and let Material UI manage the mode for you.

I don't see a need to use redux. If you want to get the selected mode, you can use useColorScheme hook from Material UI.

[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

@karthikdivi How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.