From d94e7bc2ab220d2f8e8fb6a72b6d0101ca6c9955 Mon Sep 17 00:00:00 2001
From: Derick M <58572875+TurtIeSocks@users.noreply.github.com>
Date: Mon, 2 Sep 2024 12:57:09 -0400
Subject: [PATCH 1/2] add theme mode support
---
.../material-ui-nextjs-ts/src/app/layout.tsx | 6 ++-
.../src/components/ModeSwitch.tsx | 37 +++++++++++++++++++
examples/material-ui-nextjs-ts/src/theme.ts | 4 ++
3 files changed, 46 insertions(+), 1 deletion(-)
create mode 100644 examples/material-ui-nextjs-ts/src/components/ModeSwitch.tsx
diff --git a/examples/material-ui-nextjs-ts/src/app/layout.tsx b/examples/material-ui-nextjs-ts/src/app/layout.tsx
index f415c91852f467..bc84111b3abd99 100644
--- 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 (
-
+
+
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+
{props.children}
diff --git a/examples/material-ui-nextjs-ts/src/components/ModeSwitch.tsx b/examples/material-ui-nextjs-ts/src/components/ModeSwitch.tsx
new file mode 100644
index 00000000000000..2764d9316cef16
--- /dev/null
+++ b/examples/material-ui-nextjs-ts/src/components/ModeSwitch.tsx
@@ -0,0 +1,37 @@
+'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 (
+
+
+ Theme
+
+
+
+ );
+}
+
diff --git a/examples/material-ui-nextjs-ts/src/theme.ts b/examples/material-ui-nextjs-ts/src/theme.ts
index b105b58c5b2737..2417a0dcad740d 100644
--- a/examples/material-ui-nextjs-ts/src/theme.ts
+++ b/examples/material-ui-nextjs-ts/src/theme.ts
@@ -9,6 +9,10 @@ const roboto = Roboto({
});
const theme = createTheme({
+ colorSchemes: { light: true, dark: true },
+ cssVariables: {
+ colorSchemeSelector: 'class',
+ },
palette: {
mode: 'light',
},
From 87e2c7477ec87f0e9b233ef441fd01ffaa50dfd7 Mon Sep 17 00:00:00 2001
From: Derick M <58572875+TurtIeSocks@users.noreply.github.com>
Date: Mon, 2 Sep 2024 13:03:23 -0400
Subject: [PATCH 2/2] linting
---
.../src/components/ModeSwitch.tsx | 21 +++++++++++--------
1 file changed, 12 insertions(+), 9 deletions(-)
diff --git a/examples/material-ui-nextjs-ts/src/components/ModeSwitch.tsx b/examples/material-ui-nextjs-ts/src/components/ModeSwitch.tsx
index 2764d9316cef16..4f664645efd1ce 100644
--- a/examples/material-ui-nextjs-ts/src/components/ModeSwitch.tsx
+++ b/examples/material-ui-nextjs-ts/src/components/ModeSwitch.tsx
@@ -1,4 +1,4 @@
-'use client'
+'use client';
import * as React from 'react';
import Box from '@mui/material/Box';
import FormControl from '@mui/material/FormControl';
@@ -13,18 +13,22 @@ export default function ModeSwitch() {
return null;
}
return (
-
+
Theme
);
}
-