diff --git a/xas-standards-client/src/App.tsx b/xas-standards-client/src/App.tsx
index 005a007..8902844 100644
--- a/xas-standards-client/src/App.tsx
+++ b/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 (
-
-
+
} />
@@ -67,7 +68,6 @@ function App() {
-
);
}
diff --git a/xas-standards-client/src/components/DarkModeIcon.tsx b/xas-standards-client/src/components/DarkModeIcon.tsx
new file mode 100644
index 0000000..192e642
--- /dev/null
+++ b/xas-standards-client/src/components/DarkModeIcon.tsx
@@ -0,0 +1,12 @@
+
+
+import { SvgIcon } from "@mui/material"
+
+export default function DarkModeIcon() {
+ return (
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/xas-standards-client/src/components/Header.tsx b/xas-standards-client/src/components/Header.tsx
index 05e6a92..2d8fd18 100644
--- a/xas-standards-client/src/components/Header.tsx
+++ b/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 (
@@ -89,7 +88,7 @@ export default function Header() {
-
+ } checkedIcon={} checked={props.colorMode === "dark"} onChange={props.toggleColorMode.toggleColorMode}>
{!loggedIn ? (
) : (
diff --git a/xas-standards-client/src/components/LightModeIcon.tsx b/xas-standards-client/src/components/LightModeIcon.tsx
new file mode 100644
index 0000000..198cc84
--- /dev/null
+++ b/xas-standards-client/src/components/LightModeIcon.tsx
@@ -0,0 +1,11 @@
+import { SvgIcon } from "@mui/material"
+
+export default function LightModeIcon() {
+ return (
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/xas-standards-client/src/contexts/ColorModeContext.tsx b/xas-standards-client/src/contexts/ColorModeContext.tsx
deleted file mode 100644
index 285a819..0000000
--- a/xas-standards-client/src/contexts/ColorModeContext.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createContext } from "react";
-
-const ColorModeContext = createContext({ toggleColorMode: () => {} });
-
-export default ColorModeContext;
diff --git a/xas-standards-client/src/hooks/useColorMode.ts b/xas-standards-client/src/hooks/useColorMode.ts
deleted file mode 100644
index 139597f..0000000
--- a/xas-standards-client/src/hooks/useColorMode.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-
-