diff --git a/package-lock.json b/package-lock.json index 05aaea8..25968cd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@fontsource/roboto": "^5.2.5", "@mui/icons-material": "^7.0.2", "@mui/material": "^7.0.2", + "@mui/material-nextjs": "^7.0.2", "next": "15.3.1", "react": "^19.0.0", "react-dom": "^19.0.0" @@ -1094,6 +1095,41 @@ } } }, + "node_modules/@mui/material-nextjs": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@mui/material-nextjs/-/material-nextjs-7.0.2.tgz", + "integrity": "sha512-hjm0MFSjx7HWbORMRldbwfKrQPHTSMXD6dkCCSTQZ2XX8fkKlnOXNnoXUFzlzFtMKMzs9QOfe3dHooTvnDEfuQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.27.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/cache": "^11.11.0", + "@emotion/react": "^11.11.4", + "@emotion/server": "^11.11.0", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "next": "^13.0.0 || ^14.0.0 || ^15.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/cache": { + "optional": true + }, + "@emotion/server": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, "node_modules/@mui/private-theming": { "version": "7.0.2", "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.0.2.tgz", diff --git a/package.json b/package.json index c975638..360e9c2 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@fontsource/roboto": "^5.2.5", "@mui/icons-material": "^7.0.2", "@mui/material": "^7.0.2", + "@mui/material-nextjs": "^7.0.2", "next": "15.3.1", "react": "^19.0.0", "react-dom": "^19.0.0" diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 32b847c..2e5183c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,12 +1,13 @@ -'use client' -/* eslint-disable @next/next/no-page-custom-font */ import type { Metadata } from "next"; import "./globals.css"; -import Header from "@/components/Header"; -import { light, dark } from "@/theme/theme"; +import theme from "@/theme/theme"; import { ThemeProvider } from "@mui/material/styles"; import { CssBaseline } from "@mui/material"; -import { useState } from "react"; +import InitColorSchemeScript from "@mui/material/InitColorSchemeScript"; +import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter"; +import ModeSwitch from "@/components/ModeSwitch/ModeSwitch"; +import Header from "@/components/Header/Header"; + export const metadata: Metadata = { title: "The Coding Grizzly", @@ -18,33 +19,21 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { - const [isDarkMode, setIsDarkMode] = useState(false); - const toggleTheme = () => { - setIsDarkMode((prevMode) => !prevMode); - }; return ( - - - - - - - + - - -
- {children} - + + + + + +
+ {children} + + - + ); } diff --git a/src/components/Header/index.tsx b/src/components/Header/Header.tsx similarity index 90% rename from src/components/Header/index.tsx rename to src/components/Header/Header.tsx index 2d4ab21..aab7b13 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/Header.tsx @@ -6,7 +6,6 @@ import MenuIcon from '@mui/icons-material/Menu' import { AppBar, Box, - Button, Drawer, IconButton, List, @@ -22,7 +21,7 @@ const navItems = [ { label: 'Info', href: '/info' }, { label: 'Music', href: '/music' } ] -export default function Header({ toggleTheme }: { toggleTheme: () => void }) { +export default function Header() { const [mobileOpen, setMobileOpen] = React.useState(false) const handleDrawerToggle = () => { setMobileOpen(!mobileOpen) @@ -30,9 +29,6 @@ export default function Header({ toggleTheme }: { toggleTheme: () => void }) { const drawer = ( Menu - {navItems.map((item) => ( diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts new file mode 100644 index 0000000..266dec8 --- /dev/null +++ b/src/components/Header/index.ts @@ -0,0 +1 @@ +export * from './Header'; diff --git a/src/components/ModeSwitch/ModeSwitch.tsx b/src/components/ModeSwitch/ModeSwitch.tsx new file mode 100644 index 0000000..53ccf5a --- /dev/null +++ b/src/components/ModeSwitch/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 ( + + + Theme + + + + ); +} \ No newline at end of file diff --git a/src/components/ModeSwitch/index.ts b/src/components/ModeSwitch/index.ts new file mode 100644 index 0000000..6d82f54 --- /dev/null +++ b/src/components/ModeSwitch/index.ts @@ -0,0 +1 @@ +export * from './ModeSwitch'; diff --git a/src/theme/index.ts b/src/theme/index.ts new file mode 100644 index 0000000..7b1f54e --- /dev/null +++ b/src/theme/index.ts @@ -0,0 +1 @@ +export * from './theme'; diff --git a/src/theme/theme.ts b/src/theme/theme.ts index 082213d..bb71ad7 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -1,44 +1,37 @@ -// theme.js +'use client'; import { createTheme } from '@mui/material/styles'; +import { Roboto } from 'next/font/google'; -const light = createTheme({ - palette: { - mode: 'light', - primary: { - main: '#1976d2', // Blue - }, - secondary: { - main: '#dc004e', // Red - }, - background: { - default: '#ffffff', // White - paper: '#f5f5f5', // Light Grey - }, - text: { - primary: '#000000', // Black - secondary: '#555555', // Dark Grey +const roboto = Roboto({ + weight: ['300', '400', '500', '700'], + subsets: ['latin'], + display: 'swap', +}); + +const theme = createTheme({ + colorSchemes: { light: true, dark: true }, + cssVariables: { + colorSchemeSelector: 'class', + }, + typography: { + fontFamily: roboto.style.fontFamily, + }, + components: { + MuiAlert: { + styleOverrides: { + root: { + variants: [ + { + props: { severity: 'info' }, + style: { + backgroundColor: '#60a5fa', + }, + }, + ], + }, + }, }, }, }); -const dark = createTheme({ - palette: { - mode: 'dark', - primary: { - main: '#90caf9', // Light Blue - }, - secondary: { - main: '#f48fb1', // Pink - }, - background: { - default: '#121212', // Dark Grey - paper: '#1d1d1d', // Slightly Lighter Grey - }, - text: { - primary: '#ffffff', // White - secondary: '#bbbbbb', // Light Grey - }, - }, -}); - -export { light, dark }; +export default theme;