bytelyst/learning_ai_notes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(settings): add dark/light theme toggle to Settings page

Browse Source
This commit is contained in:
saravanakumardb1 2026-03-29 01:33:01 -07:00
parent 82ede5a107
commit 547031531b
1 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/app/(app)/settings/page.tsx
View File

@ -1,12 +1,33 @@
"use client";
import { useTheme } from "@/lib/use-theme";
import { AppShell } from "@/components/AppShell"; import { AppShell } from "@/components/AppShell";
export default function SettingsPage() { export default function SettingsPage() {
const { theme, toggle } = useTheme();
return ( return (
<AppShell <AppShell
title="Settings" title="Settings"
description="Auth/session controls, integration defaults, and workspace-level product preferences." description="Auth/session controls, integration defaults, and workspace-level product preferences."
actions={<div className="badge">Auth fallback active</div>} 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)" }}> <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)" }}> <article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
<strong>Authentication</strong> <strong>Authentication</strong>