Open
Description
openedon Oct 3, 2024
Steps to reproduce
Link to the initial issue: #43622
Steps:
- Set your system (OS) default theme to dark
- Set the default MUI theme mode to
light - Open the page in incognito mode
- The page first renders with the
darkmode and then changes tolight, causing flickering
Make sure to re-open the page in incognito mode or change the modeStorageKey. Otherwise, the key will be stored and you won't notice any flickering.
Here is a deployed example: https://profound.academy
Current behavior
If your system default mode is dark, and you set your website default theme to be light, the very first render is dark, which then switches to light, causing flickering. That's pretty unpleasant for the visitors.
Expected behavior
It should render using the defaultMode right away without any flickering.
Context
No response
Your environment
npx @mui/envinfo
Using Chrome
System:
OS: macOS 14.6.1
Binaries:
Node: 20.10.0 - /opt/homebrew/opt/node@20/bin/node
npm: 10.2.3 - /opt/homebrew/opt/node@20/bin/npm
pnpm: Not Found
Browsers:
Chrome: 129.0.6668.71
Edge: Not Found
Safari: 17.6
npmPackages:
@emotion/react: ^11.13.3 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/core-downloads-tracker: 6.1.2
@mui/icons-material: ^6.1.2 => 6.1.2
@mui/material: ^6.1.2 => 6.1.2
@mui/private-theming: 6.1.2
@mui/styled-engine: 6.1.2
@mui/system: 6.1.2
@mui/types: 7.2.17
@mui/utils: 5.16.6
@mui/x-charts: ^7.18.0 => 7.18.0
@mui/x-charts-vendor: 7.18.0
@mui/x-data-grid: ^7.18.0 => 7.18.0
@mui/x-date-pickers: ^7.18.0 => 7.18.0
@mui/x-internals: 7.18.0
@mui/x-tree-view: ^7.18.0 => 7.18.0
@types/react: ^18.3.10 => 18.3.10
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
styled-components: 5.3.11
typescript: ^5.6.2 => 5.6.2
Search keywords: default mode, flickering, MUI v6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Metadata
Assignees
Labels
Specific to @mui/systemSpecific to @mui/systemThese issues haven't been looked at yet by a maintainerThese issues haven't been looked at yet by a maintainer