From 5670d05aa639bf1ba9c21ba298a78e55bb373e2d Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 21 Aug 2026 18:04:29 -0500
Subject: [PATCH] add light/dark mode icon switcher

---
 web/src/pages/SetupWizard.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/SetupWizard.tsx b/web/src/pages/SetupWizard.tsx
index f7db8255f9..a2edefbae5 100644
--- a/web/src/pages/SetupWizard.tsx
+++ b/web/src/pages/SetupWizard.tsx
@@ -5,9 +5,12 @@ import SetupDetector from "@/components/setup/SetupDetector";
 import SetupHwAccel from "@/components/setup/SetupHwAccel";
 import SetupRecording from "@/components/setup/SetupRecording";
 import SetupWelcome from "@/components/setup/SetupWelcome";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import { useTheme } from "@/context/theme-provider";
 import { useCallback, useReducer } from "react";
 import { useTranslation } from "react-i18next";
+import { LuMoon, LuSun } from "react-icons/lu";
 import { toast } from "sonner";
 import axios from "axios";
 
@@ -108,8 +111,11 @@ function wizardReducer(state: WizardState, action: WizardAction): WizardState {
 }
 
 export default function SetupWizard() {
-  const { t } = useTranslation(["views/setup"]);
+  const { t } = useTranslation(["views/setup", "common"]);
   const [state, dispatch] = useReducer(wizardReducer, initialState);
+  const { theme, systemTheme, setTheme } = useTheme();
+
+  const isDark = (theme === "system" ? systemTheme : theme) === "dark";
 
   const handleSkipSetup = useCallback(async () => {
     try {
@@ -219,6 +225,19 @@ export default function SetupWizard() {
 
   return (
     <div className="flex min-h-dvh items-center justify-center bg-background p-4">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="fixed right-4 top-4 text-muted-foreground hover:text-primary"
+        aria-label={t(isDark ? "menu.darkMode.light" : "menu.darkMode.dark", {
+          ns: "common",
+        })}
+        onClick={() => setTheme(isDark ? "light" : "dark")}
+      >
+        {isDark ? <LuSun className="size-4" /> : <LuMoon className="size-4" />}
+      </Button>
+
       <Card className="w-full max-w-lg">
         <CardContent className="p-6">
           <StepIndicator