From 7f40e73678ef4c8e0419dff1d6fc0005b3ed3bf4 Mon Sep 17 00:00:00 2001 From: Oliver Bryan <04oliverbryan@gmail.com> Date: Sun, 11 Jan 2026 16:23:13 +0000 Subject: [PATCH] light/dark mode --- packages/frontend/index.html | 23 ++++++++++++-- .../frontend/src/components/theme-toggle.tsx | 30 +++++++++++++++++++ packages/frontend/src/pages/App.tsx | 2 ++ packages/frontend/src/pages/Landing.tsx | 2 ++ 4 files changed, 54 insertions(+), 3 deletions(-) create mode 100644 packages/frontend/src/components/theme-toggle.tsx diff --git a/packages/frontend/index.html b/packages/frontend/index.html index e586089..f26a7df 100644 --- a/packages/frontend/index.html +++ b/packages/frontend/index.html @@ -1,5 +1,7 @@ - + + + @@ -8,10 +10,25 @@ + + diff --git a/packages/frontend/src/components/theme-toggle.tsx b/packages/frontend/src/components/theme-toggle.tsx new file mode 100644 index 0000000..c1a182d --- /dev/null +++ b/packages/frontend/src/components/theme-toggle.tsx @@ -0,0 +1,30 @@ +import { Moon, Sun } from "lucide-react"; +import { useTheme } from "@/components/theme-provider"; +import { Button } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; + +function ThemeToggle({ className }: { className?: string }) { + const { theme, setTheme } = useTheme(); + const resolvedTheme = + theme === "system" + ? window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light" + : theme; + const isDark = resolvedTheme === "dark"; + + return ( + + ); +} + +export default ThemeToggle; diff --git a/packages/frontend/src/pages/App.tsx b/packages/frontend/src/pages/App.tsx index e7b7816..dc6597f 100644 --- a/packages/frontend/src/pages/App.tsx +++ b/packages/frontend/src/pages/App.tsx @@ -19,6 +19,7 @@ import { ProjectSelect } from "@/components/project-select"; import { ServerConfigurationDialog } from "@/components/server-configuration-dialog"; import { useAuthenticatedSession } from "@/components/session-provider"; import SmallUserDisplay from "@/components/small-user-display"; +import ThemeToggle from "@/components/theme-toggle"; import { Button } from "@/components/ui/button"; import { DropdownMenu, @@ -388,6 +389,7 @@ export default function App() { )}
+ diff --git a/packages/frontend/src/pages/Landing.tsx b/packages/frontend/src/pages/Landing.tsx index 654da18..0c82ecd 100644 --- a/packages/frontend/src/pages/Landing.tsx +++ b/packages/frontend/src/pages/Landing.tsx @@ -1,6 +1,7 @@ import { Icon } from "@iconify/react"; import { Link } from "react-router-dom"; import { useSession } from "@/components/session-provider"; +import ThemeToggle from "@/components/theme-toggle"; import { Button } from "@/components/ui/button"; export default function Landing() { @@ -11,6 +12,7 @@ export default function Landing() {
Issue