Merge pull request elizaOS#1555 from zkfriendly/main

feat: add theme toggle functionality with dark and light mode support

Author: monilpat

client/src/components/app-sidebar.tsx

@@ -1,16 +1,17 @@
 import { Calendar, Home, Inbox, Search, Settings } from "lucide-react";
 import { useParams } from "react-router-dom";
+import { ThemeToggle } from "@/components/theme-toggle";
 
 import {
     Sidebar,
     SidebarContent,
+    SidebarFooter,
     SidebarGroup,
     SidebarGroupContent,
     SidebarGroupLabel,
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
-    SidebarTrigger,
 } from "@/components/ui/sidebar";
 
 // Menu items.
@@ -51,6 +52,9 @@ export function AppSidebar() {
                     </SidebarGroupContent>
                 </SidebarGroup>
             </SidebarContent>
+            <SidebarFooter>
+                <ThemeToggle />
+            </SidebarFooter>
         </Sidebar>
     );
 }

client/src/components/theme-toggle.tsx

@@ -0,0 +1,19 @@
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useTheme } from "@/hooks/use-theme";
+
+export function ThemeToggle() {
+    const { theme, setTheme } = useTheme();
+
+    return (
+        <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+        >
+            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <span className="sr-only">Toggle theme</span>
+        </Button>
+    );
+}

client/src/hooks/use-theme.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+function useTheme() {
+    const [theme, setTheme] = useState<Theme>(
+        () => (localStorage.getItem("theme") as Theme) || "system"
+    );
+
+    useEffect(() => {
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+
+        function applyTheme() {
+            const root = window.document.documentElement;
+            const systemTheme = media.matches ? "dark" : "light";
+            const activeTheme = theme === "system" ? systemTheme : theme;
+
+            root.classList.remove("light", "dark");
+            root.classList.add(activeTheme);
+            localStorage.setItem("theme", theme);
+        }
+
+        applyTheme();
+        media.addEventListener("change", applyTheme);
+        return () => media.removeEventListener("change", applyTheme);
+    }, [theme]);
+
+    return { theme, setTheme } as const;
+}
+
+export { useTheme };
+export type { Theme };

client/src/main.tsx

@@ -5,6 +5,12 @@ import "./index.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./router.tsx";
+
+// Initialize theme
+const theme = localStorage.getItem("theme") || "system";
+const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+document.documentElement.classList.add(theme === "system" ? systemTheme : theme);
+
 // Create a client
 const queryClient = new QueryClient();