From e4c0703077883c8cf9c07da132801b6bf111bb2d Mon Sep 17 00:00:00 2001 From: ItsukiKigoshi Date: Sun, 19 Nov 2023 19:40:04 +0900 Subject: [PATCH] Match Dark Mode --- src/app/layout.tsx | 2 +- src/app/page.tsx | 2 +- src/app/salespolicy/page.tsx | 84 ++++++++++++++++++++++-------------- 3 files changed, 53 insertions(+), 35 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a574664..1faeb57 100644 --- 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.`} /> + {children} ); diff --git a/src/app/page.tsx b/src/app/page.tsx index 49fd001..c4299e7 100644 --- 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 index b3c7057..7d38ccf 100644 --- 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 ( - - {/* The codes below should be more readable */} - 特定商取引法に基づく表記 - - - - - {rows.map((row) => ( - - - {row.title} - - {row.content} - - ))} - -
- - + + + {/* The codes below should be more readable */} + 特定商取引法に基づく表記 + + + + + {rows.map((row) => ( + + + {row.title} + + {row.content} + + ))} + +
+ + - - + + + ); }