From 9032e6a9a313efd7585cfeb813402fc70d71d4f4 Mon Sep 17 00:00:00 2001
From: uermel <uermel@czii.org>
Date: Tue, 17 Mar 2026 12:05:12 -0700
Subject: [PATCH] light mode

---
 client/src/components/layout/Sidebar.tsx | 11 +++++++++--
 client/src/main.tsx                      | 13 +++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/client/src/components/layout/Sidebar.tsx b/client/src/components/layout/Sidebar.tsx
index 9b16c3c..5fab2cb 100644
--- a/client/src/components/layout/Sidebar.tsx
+++ b/client/src/components/layout/Sidebar.tsx
@@ -2,13 +2,17 @@
  * Sidebar with navigation tree and entity tables.
  */
 
-import { Box, Typography, Divider } from "@mui/material";
+import { Box, Typography, Divider, IconButton } from "@mui/material";
+import LightModeIcon from "@mui/icons-material/LightMode";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
 import { useConfig } from "@/api/hooks";
+import { useThemeMode } from "@/contexts/ThemeContext";
 import { RunTree } from "@/components/navigation/RunTree";
 import { EntityTabs } from "@/components/entities/EntityTabs";
 
 export function Sidebar() {
   const { data: config } = useConfig();
+  const { mode, toggleMode } = useThemeMode();
 
   return (
     <Box sx={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
@@ -21,9 +25,12 @@ export function Sidebar() {
             alt="Copick"
             sx={{ width: 32, height: 32, flexShrink: 0 }}
           />
-          <Typography variant="h6" noWrap>
+          <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
             {config?.name ?? "Copick Web"}
           </Typography>
+          <IconButton size="small" onClick={toggleMode} title={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}>
+            {mode === "dark" ? <LightModeIcon fontSize="small" /> : <DarkModeIcon fontSize="small" />}
+          </IconButton>
         </Box>
         {config?.description && (
           <Typography variant="caption" color="text.secondary" noWrap>
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 1c0126d..29512ff 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ThemeProvider, createTheme, CssBaseline } from "@mui/material";
+import { ThemeContextProvider } from "./contexts/ThemeContext";
 import App from "./App";
 import "./index.css";
 
@@ -14,19 +14,12 @@ const queryClient = new QueryClient({
   },
 });
 
-const darkTheme = createTheme({
-  palette: {
-    mode: "dark",
-  },
-});
-
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={darkTheme}>
-        <CssBaseline />
+      <ThemeContextProvider>
         <App />
-      </ThemeProvider>
+      </ThemeContextProvider>
     </QueryClientProvider>
   </React.StrictMode>
 );