From 547031531b2dc9435dbc8aea5c2c70a2538f9f8d Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Sun, 29 Mar 2026 01:33:01 -0700
Subject: [PATCH] feat(settings): add dark/light theme toggle to Settings page

---
 web/src/app/(app)/settings/page.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/web/src/app/(app)/settings/page.tsx b/web/src/app/(app)/settings/page.tsx
index 6759972..5233bf2 100644
--- a/web/src/app/(app)/settings/page.tsx
+++ b/web/src/app/(app)/settings/page.tsx
@@ -1,12 +1,33 @@
+"use client";
+
+import { useTheme } from "@/lib/use-theme";
 import { AppShell } from "@/components/AppShell";
 
 export default function SettingsPage() {
+  const { theme, toggle } = useTheme();
+
   return (
     <AppShell
       title="Settings"
       description="Auth/session controls, integration defaults, and workspace-level product preferences."
       actions={<div className="badge">Auth fallback active</div>}
     >
+      <section style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "var(--nl-space-4)", marginBottom: "var(--nl-space-5)" }}>
+        <article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
+            <strong>Appearance</strong>
+            <div style={{ color: "var(--nl-text-secondary)" }}>Switch between dark and light mode</div>
+          </div>
+          <button
+            onClick={toggle}
+            aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
+            style={{ padding: "6px 14px", borderRadius: "var(--nl-radius-sm)", border: "1px solid var(--nl-border-default)", background: "var(--nl-surface-muted)", color: "var(--nl-text-primary)", fontSize: 13, fontWeight: 500, cursor: "pointer" }}
+          >
+            {theme === "dark" ? "☀️ Light" : "🌙 Dark"}
+          </button>
+        </article>
+      </section>
+
       <section style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "var(--nl-space-4)" }}>
         <article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
           <strong>Authentication</strong>