NextJS + MUI app does not follow the mode set by the Operating system #47631
Description
Steps to reproduce
The following is the layout component in a NextJS app using Material-UI.
layout.jsx
export default function RootLayout(props: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<InitColorSchemeScript attribute="class" defaultMode="system" />
<AppRouterCacheProvider options={{ enableCssLayer: true }}>
<ThemeProvider theme={theme} defaultMode="system">
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
{/* <CssBaseline /> */}
{/* <ModeSwitch /> */}
{props.children}
</ThemeProvider>
</AppRouterCacheProvider>
</body>
</html>
);
}
Current behavior
Case 1: When the Browser appearance is set to dark, it works well, giving dark mode.
Case 2: When the Browser appearance is set to light, it works well, giving dark light.
However,
Case 3: When the Browser appearance is set to Device, it does not work. It means I expect this setting - Device, is supposed to check the appearance mode of the operating system, and should result either dark or light, depending on it. What happens is that it always gives light, and it never gives dark mode based on the operating system setting.
Expected behavior
Case 3: When the Browser appearance is set to Device, it does not work. It means I expect this setting - Device, is supposed to check the appearance mode of the operating system, and should result either dark or light, depending on it. What happens is that it always gives light, and it never gives dark mode based on the operating system setting.
Context
The code is trying to set the appearance mode of the based on the setting in the operating system.
Your environment
npx @mui/envinfo
System:
OS: macOS 13.4
Binaries:
Node: 23.11.0 - /usr/local/bin/node
npm: 10.9.2 - /usr/local/bin/npm
pnpm: 10.28.0 - /usr/local/bin/pnpm
Browsers:
Chrome: 143.0.7499.193
Edge: Not Found
Firefox: 143.0.4
Safari: 16.5
npmPackages:
@emotion/react: latest => 11.14.0
@emotion/styled: latest => 11.14.1
@mui/core-downloads-tracker: 7.3.1
@mui/icons-material: latest => 7.3.1
@mui/material: latest => 7.3.1
@mui/material-nextjs: latest => 7.3.0
@mui/private-theming: 7.3.1
@mui/styled-engine: 7.3.1
@mui/system: 7.3.1
@mui/types: 7.4.5
@mui/utils: 7.3.1
@types/react: ^19.0.0 => 19.1.12
react: ^19.0.0 => 19.1.1
react-dom: ^19.0.0 => 19.1.1
typescript: latest => 5.9.2
Search keywords: App does not follow the mode set by the Operating system