use prefer-color-scheme

xas-standards-client/src/App.tsx

@@ -11,16 +11,18 @@ import LogInPage from "./components/LogInPage.tsx";
 import RequireAuth from "./components/RequireAuth.tsx";
 
 import { CssBaseline } from "@mui/material";
+import {useMediaQuery} from "@mui/material";
 
 import { useState, useMemo } from "react";
 import { Stack } from "@mui/material";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 
-import ColorModeContext from "./contexts/ColorModeContext.tsx";
 import ReviewPage from "./components/ReviewPage.tsx";
 
 function App() {
-  const [mode, setMode] = useState<"light" | "dark">("light");
+
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [mode, setMode] = useState<"light" | "dark">(prefersDarkMode ? "dark" : "light");
   const colorMode = useMemo(
     () => ({
       toggleColorMode: () => {
@@ -41,12 +43,11 @@ function App() {
   );
 
   return (
-    <ColorModeContext.Provider value={colorMode}>
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <Stack height="100vh" width="100vw" spacing={1}>
           <UserProvider>
-            <Header />
+            <Header colorMode={mode} toggleColorMode={colorMode}/>
             <MetadataProvider>
               <Routes>
                 <Route path="/" element={<WelcomePage />} />
@@ -67,7 +68,6 @@ function App() {
           </UserProvider>
         </Stack>
       </ThemeProvider>
-    </ColorModeContext.Provider>
   );
 }
 

xas-standards-client/src/components/DarkModeIcon.tsx

@@ -0,0 +1,12 @@
+
+
+import { SvgIcon } from "@mui/material"
+
+export default function DarkModeIcon() {
+    return (
+        <SvgIcon fontSize="large" >
+
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
+</SvgIcon>
+    )
+}

xas-standards-client/src/components/Header.tsx

@@ -10,14 +10,15 @@ import ListItem from "@mui/material/ListItem";
 import List from "@mui/material/List";
 import ListItemText from "@mui/material/ListItemText";
 import Stack from "@mui/material/Stack";
-import {Switch } from "@mui/material";
+import {Checkbox, Switch } from "@mui/material";
 
 import { NavLink } from "react-router-dom";
 
 import DiamondIcon from "./DiamondIcon";
 
-import ColorModeContext from "../contexts/ColorModeContext";
 import UserIcon from "./UserIcon";
+import LightModeIcon from "./LightModeIcon";
+import DarkModeIcon from "./DarkModeIcon";
 
 function NavListItem(props: { to: string; label: string }) {
   const to = props.to;
@@ -40,7 +41,7 @@ function NavListItem(props: { to: string; label: string }) {
   );
 }
 
-export default function Header() {
+export default function Header(props : {colorMode : string; toggleColorMode : any }) {
   const user = useContext(UserContext);
   console.log(user);
   const loggedIn = user != null;
@@ -54,8 +55,6 @@ export default function Header() {
 
   Object.keys(navitems).forEach((k) => console.log(k));
 
-  const colorMode = useContext(ColorModeContext);
-
   return (
     <AppBar style={{ position: "static" }}>
       <Toolbar sx={{justifyContent:"space-between", alignItems:"center"}}>
@@ -89,7 +88,7 @@ export default function Header() {
         </List>
         </Stack>
         <Stack direction="row" alignItems={"center"}>
-        <Switch onChange={colorMode.toggleColorMode}></Switch>
+        <Checkbox icon={<LightModeIcon />} checkedIcon={<DarkModeIcon />} checked={props.colorMode === "dark"} onChange={props.toggleColorMode.toggleColorMode}></Checkbox>
         {!loggedIn ? (
             <NavListItem to="/login" label="Login" />
           ) : (        <Stack alignItems={"flex-end"}>

xas-standards-client/src/components/LightModeIcon.tsx

@@ -0,0 +1,11 @@
+import { SvgIcon } from "@mui/material"
+
+export default function LightModeIcon() {
+    return (
+        <SvgIcon fontSize="large" >
+
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>
+
+</SvgIcon>
+    )
+}