diff --git a/website/src/components/ClientSideLayoutContext.tsx b/website/src/components/ClientSideLayoutContext.tsx index 4d3d937..094711f 100644 --- a/website/src/components/ClientSideLayoutContext.tsx +++ b/website/src/components/ClientSideLayoutContext.tsx @@ -1,5 +1,5 @@ "use client"; -import { CssBaseline, useMediaQuery } from "@mui/material"; +import { CssBaseline } from "@mui/material"; import { cssThemeOptions } from "@/styles/theme"; import { ReactNode, useEffect, useState } from "react"; import { Toaster } from "react-hot-toast"; @@ -13,19 +13,19 @@ import { const theme = extendTheme(cssThemeOptions); const ModeTracker = () => { - const userPrefersDarkmode = useMediaQuery("(prefers-color-scheme: dark)"); const { setMode } = useColorScheme(); - const [mounted, setMounted] = useState(false); useEffect( () => { setMounted(true); - - setMode(userPrefersDarkmode ? "dark" : "light"); + const persistedMode = localStorage.getItem("mui-mode"); + if (!persistedMode) { + setMode("dark"); + } }, // eslint-disable-next-line react-hooks/exhaustive-deps - [userPrefersDarkmode] + [] ); if (!mounted) { diff --git a/website/src/components/layout/header.tsx b/website/src/components/layout/header.tsx index 9e7d91f..6c408ba 100644 --- a/website/src/components/layout/header.tsx +++ b/website/src/components/layout/header.tsx @@ -5,6 +5,7 @@ import { ReactNode, Suspense } from "react"; import { SocialIcons } from "./layout"; import localFont from "next/font/local"; import { styled } from "@mui/material/styles"; +import { ThemeSwitch } from "./themeSwitch"; const HeaderLink = styled(Link)(({ theme }) => ({ color: theme.palette.primary.contrastText + "!important", @@ -64,17 +65,6 @@ export const Header = (props: HeaderProps) => { {"Noogλe"} - {/* - - - - */} {search && ( { }} > + diff --git a/website/src/components/layout/layout.tsx b/website/src/components/layout/layout.tsx index 2a9b912..51cd7c0 100644 --- a/website/src/components/layout/layout.tsx +++ b/website/src/components/layout/layout.tsx @@ -23,7 +23,12 @@ export const SocialIcons = () => { sx={{ color: "inherit" }} > - +