Website/theme: dark mode by default

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) {

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"}
           </Button>
         </Box>
-        {/* <Box
-          sx={{
-            justifySelf: "start",
-            display: { xs: "block", md: "none" },
-            color: "primary.contrastText",
-          }}
-        >
-          <IconButton color="inherit" aria-label="Home">
-            <Home />
-          </IconButton>
-        </Box> */}
         {search && (
           <Box
             sx={{
@@ -104,6 +94,7 @@ export const Header = (props: HeaderProps) => {
           }}
         >
           <SocialIcons />
+          <ThemeSwitch />
         </Box>
       </Box>
 

website/src/components/layout/layout.tsx

@@ -23,7 +23,12 @@ export const SocialIcons = () => {
         sx={{ color: "inherit" }}
       >
         <Tooltip title="Github">
-          <IconButton color="inherit" aria-label="nixos github">
+          <IconButton
+            sx={{
+              color: "#fff",
+            }}
+            aria-label="nixos github"
+          >
             <GitHubIcon />
           </IconButton>
         </Tooltip>