light/dark mode

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 (
+        <Button
+            type="button"
+            variant="dummy"
+            size="icon"
+            className={cn("hover:text-muted-foreground", className)}
+            onClick={() => setTheme(isDark ? "light" : "dark")}
+            title={isDark ? "Switch to light mode" : "Switch to dark mode"}
+        >
+            {isDark ? <Sun className="size-5" /> : <Moon className="size-5" />}
+        </Button>
+    );
+}
+
+export default ThemeToggle;

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() {
                     )}
                 </div>
                 <div className={`flex gap-${BREATHING_ROOM} items-center`}>
+                    <ThemeToggle />
                     <DropdownMenu>
                         <DropdownMenuTrigger className="text-sm">
                             <SmallUserDisplay user={user} />

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() {
             <header className="relative flex items-center justify-center p-2 border-b">
                 <div className="text-3xl font-basteleur font-700">Issue</div>
                 <nav className="absolute right-2 flex items-center gap-4">
+                    <ThemeToggle />
                     {!isLoading && user ? (
                         <>
                             {user && (