data-mui-color-scheme not changing when toggling mode in NextJS 14 (App Router)

[austinlukaschewski]

Steps to reproduce

Link to live example: https://github.com/austinlukaschewski/materialui-test

Steps:

1. Download repo & run pnpm i
2. run pnpm dev
3. Click button on home page and the mode will not change on screen.

Current behavior

Toggling mode does not change the data-mui-color-scheme. Local storage does change

Expected behavior

Toggling mode changes on screen

Context

Toggling mode.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.4.1
  Binaries:
    Node: 21.7.3 - ~/.nvm/versions/node/v21.7.3/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v21.7.3/bin/npm
    pnpm: 8.15.6 - ~/.nvm/versions/node/v21.7.3/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.201
    Edge: Not Found
    Safari: 17.4.1
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/icons-material: ^5.15.17 => 5.15.17 
    @mui/material: ^5.15.0 => 5.15.0 
    @mui/material-nextjs: ^5.15.11 => 5.15.11 
    @mui/system: ^5.15.15 => 5.15.15 
    @mui/utils: ^5.15.14 => 5.15.14 
    @types/react: 18.3.1 => 18.3.1 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
    typescript: ~5.4.2 => 5.4.5 

Search keywords: data-mui-color-scheme NextJS 14

[austinlukaschewski]

Mistake on my part. Disregard. Apologies for the trouble.