update

web/frontend/src/pages/home/components/PageHeader.tsx

@@ -1,10 +1,11 @@
-import { Logout } from "@carbon/icons-react";
+import { Light, Logout, Asleep } from "@carbon/icons-react";
 import { TextUtil } from "@greatness/util";
 import { useCallback } from "react";
 
 import { useSessionContext } from "@/components/SessionContext";
 import createUseStyles from "@/theme/createUseStyles";
 import { cn } from "@/util/cn";
+import { useDarkMode } from "@/util/useDarkMode";
 
 const useStyles = createUseStyles(({ sizes, media }) => ({
   closeButton: {
@@ -12,6 +13,10 @@ const useStyles = createUseStyles(({ sizes, media }) => ({
     height: 64,
     marginLeft: "auto",
   },
+  themeButton: {
+    border: "none",
+    height: 64,
+  },
   pageHeader: {
     margin: "0 auto",
     maxWidth: sizes.maxWidthValue,
@@ -39,6 +44,7 @@ export default function PageHeader({
 }) {
   const classes = useStyles();
   const { isAuthenticated, logout } = useSessionContext();
+  const { isDarkMode, toggleDarkMode } = useDarkMode();
 
   const handleClose = useCallback(
     () => (isAuthenticated ? logout() : window.close()),
@@ -53,10 +59,22 @@ export default function PageHeader({
             <h2 className="font-size-l flex-1 m-0">{title!}</h2>
           )}
         </div>
+
         <button
           type="button"
-          className={cn("items-center justify-center flex flex-col p-l cursor-pointer bg-black", classes.closeButton)}
+          className={cn("items-center justify-center flex flex-col p-l cursor-pointer", classes.themeButton)}
+          onClick={toggleDarkMode}
+          title={isDarkMode ? "Switch to light mode" : "Switch to dark mode"}
+          style={{ background: "var(--body-bg)", color: "var(--body-text)" }}
+        >
+          {isDarkMode ? <Light size={24} /> : <Asleep size={24} />}
+        </button>
+
+        <button
+          type="button"
+          className={cn("items-center justify-center flex flex-col p-l cursor-pointer", classes.closeButton)}
           onClick={handleClose}
+          style={{ background: "var(--body-bg)", color: "var(--body-text)" }}
         >
           <Logout />
         </button>

web/frontend/src/theme/styles.css

@@ -23,8 +23,8 @@ body {
   font-style: normal;
   font-weight: 600;
   font-size: 15px;
-  background: rgba(0, 0, 0, 1);
-  color: rgba(255, 255, 255, 1);
+  background: var(--body-bg, rgba(255, 255, 255, 1));
+  color: var(--body-text, rgba(0, 0, 0, 1));
   word-break: break-word;
   word-wrap: break-word;
 
@@ -93,6 +93,10 @@ body::-webkit-scrollbar-thumb:hover {
 }
 
 :root {
+  /* Light mode body colors */
+  --body-bg: rgba(255, 255, 255, 1);
+  --body-text: rgba(0, 0, 0, 1);
+
   --color-white: rgba(255, 255, 255, 1);
   --color-whiteOpacity: rgba(255, 255, 255, 0.3);
 
@@ -192,7 +196,7 @@ h6 {
   font-style: normal;
   font-weight: bold;
   letter-spacing: var(--font-letterSpacing-m);
-  color: var(--color-white);
+  color: var(--body-text);
 }
 
 h1 {
@@ -284,6 +288,10 @@ input:-moz-autofill {
 
 
 .dark {
+  /* Dark mode body colors */
+  --body-bg: rgba(0, 0, 0, 1);
+  --body-text: rgba(255, 255, 255, 1);
+
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);