[examples] Add Theme Mode Switch to Next.js TS example (#43576)

Signed-off-by: Siriwat K <[email protected]> Co-authored-by: Siriwat K <[email protected]>
mui · Dec 11, 2024 · 6497d21 · 6497d21
1 parent e3d0e26
commit 6497d21
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 4 deletions.
diff --git a/examples/material-ui-nextjs-ts/src/app/layout.tsx b/examples/material-ui-nextjs-ts/src/app/layout.tsx
@@ -3,15 +3,19 @@ import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from '@/theme';
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+import ModeSwitch from '@/components/ModeSwitch';
 
 export default function RootLayout(props: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body>
+        <InitColorSchemeScript attribute="class" />
         <AppRouterCacheProvider options={{ enableCssLayer: true }}>
           <ThemeProvider theme={theme}>
             {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
             <CssBaseline />
+            <ModeSwitch />
             {props.children}
           </ThemeProvider>
         </AppRouterCacheProvider>

diff --git a/examples/material-ui-nextjs-ts/src/components/ModeSwitch.tsx b/examples/material-ui-nextjs-ts/src/components/ModeSwitch.tsx
@@ -0,0 +1,40 @@
+'use client';
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import { useColorScheme } from '@mui/material/styles';
+
+export default function ModeSwitch() {
+  const { mode, setMode } = useColorScheme();
+  if (!mode) {
+    return null;
+  }
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'flex-end',
+        mt: 1,
+        p: 1,
+      }}
+    >
+      <FormControl>
+        <InputLabel id="mode-select-label">Theme</InputLabel>
+        <Select
+          labelId="mode-select-label"
+          id="mode-select"
+          value={mode}
+          onChange={(event) => setMode(event.target.value as typeof mode)}
+          label="Theme"
+        >
+          <MenuItem value="system">System</MenuItem>
+          <MenuItem value="light">Light</MenuItem>
+          <MenuItem value="dark">Dark</MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}
diff --git a/examples/material-ui-nextjs-ts/src/theme.ts b/examples/material-ui-nextjs-ts/src/theme.ts
@@ -9,9 +9,9 @@ const roboto = Roboto({
 });
 
 const theme = createTheme({
-  cssVariables: true,
-  palette: {
-    mode: 'light',
+  colorSchemes: { light: true, dark: true },
+  cssVariables: {
+    colorSchemeSelector: 'class',
   },
   typography: {
     fontFamily: roboto.style.fontFamily,