[MUI v6] Setting default mode flickers the light/dark theme at first render

[MartinXPN]

Steps to reproduce

Link to the initial issue: #43622

Steps:

1. Set your system (OS) default theme to dark
2. Set the default MUI theme mode to light
3. Open the page in incognito mode
4. The page first renders with the dark mode and then changes to light, 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