Match Dark Mode

ItsukiKigoshi · Nov 19, 2023 · e4c0703 · e4c0703
1 parent d90c15a
commit e4c0703
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 35 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import Footer from "../../components/footer";
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -23,6 +22,7 @@ export default function RootLayout({
         content={`Itsuki Kigoshi's Profile. I'm not a robot.`}
       />
       <meta property="og:image" content="/profile.jpg" />
+
       <body className={inter.className}>{children}</body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,7 +4,7 @@ import TwitterIcon from "@mui/icons-material/Twitter";
 import InstagramIcon from "@mui/icons-material/Instagram";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import LinkedInIcon from "@mui/icons-material/LinkedIn";
-import { Typography, Box, Stack, Avatar, Button } from "@mui/material";
+import { Typography, Box, Stack, Avatar } from "@mui/material";
 import Footer from "../../components/footer";
 
 export default function App() {

diff --git a/src/app/salespolicy/page.tsx b/src/app/salespolicy/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import CottageIcon from "@mui/icons-material/Cottage";
 import {
@@ -11,8 +13,22 @@ import {
   Table,
   Paper,
 } from "@mui/material";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
 
 export default function App() {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+
+  const theme = React.useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: prefersDarkMode ? "dark" : "light",
+        },
+      }),
+    [prefersDarkMode]
+  );
+
   function createData(title: string, content: string) {
     return { title, content };
   }
@@ -32,39 +48,41 @@ export default function App() {
     ),
   ];
   return (
-    <Box
-      sx={{
-        display: "grid",
-        placeItems: "center", // Center the content horizontally and vertically
-        minHeight: "100vh", // Set a minimum height to fill the entire viewport
-        m: 3,
-      }}
-    >
-      {/* The codes below should be more readable */}
-      <Typography sx={{ fontSize: 28 }}>特定商取引法に基づく表記</Typography>
-      <Paper>
-        <TableContainer>
-          <Table sx={{ minWidth: 650 }}>
-            <TableBody>
-              {rows.map((row) => (
-                <TableRow
-                  key={row.title}
-                  sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-                >
-                  <TableCell component="th" scope="row">
-                    {row.title}
-                  </TableCell>
-                  <TableCell>{row.content}</TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </Paper>
+    <ThemeProvider theme={theme}>
+      <Box
+        sx={{
+          display: "grid",
+          placeItems: "center", // Center the content horizontally and vertically
+          minHeight: "100vh", // Set a minimum height to fill the entire viewport
+          m: 3,
+        }}
+      >
+        {/* The codes below should be more readable */}
+        <Typography sx={{ fontSize: 28 }}>特定商取引法に基づく表記</Typography>
+        <Paper>
+          <TableContainer>
+            <Table sx={{ minWidth: 650 }}>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow
+                    key={row.title}
+                    sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                  >
+                    <TableCell component="th" scope="row">
+                      {row.title}
+                    </TableCell>
+                    <TableCell>{row.content}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Paper>
 
-      <Button href="/" variant="contained" startIcon={<CottageIcon />}>
-        Go Home
-      </Button>
-    </Box>
+        <Button href="/" variant="contained" startIcon={<CottageIcon />}>
+          Go Home
+        </Button>
+      </Box>
+    </ThemeProvider>
   );
 }