BuzzbeeSCD/ProjectE
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: theme settings refactor - ACCENT_PALETTE source of truth + rose accent

Browse Source 
- Add rose accent to ACCENT_PALETTE
- Settings AppearanceTab derives ACCENT_COLORS from ACCENT_PALETTE
- Wire accent state through useThemeStore instead of localStorage
This commit is contained in:
Hermes
2026-08-09 23:29:21 +00:00
parent 45d08102f8
commit 58586a6ad9
2 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/lib/stores/use-theme-store.ts
+2 -1
View File
@@ -2,7 +2,7 @@ import { create } from "zustand";
import { persist } from "zustand/middleware";
export type ThemeMode = "light" | "dark" | "system";
export type AccentColor = "slate" | "blue" | "green" | "purple" | "orange";
export type AccentColor = "slate" | "blue" | "green" | "purple" | "orange" | "rose";
interface ThemeState {
mode: ThemeMode;
@@ -18,6 +18,7 @@ export const ACCENT_PALETTE: Record<AccentColor, { name: string; hsl: string }>
green: { name: "Green", hsl: "142 71% 45%" },
purple: { name: "Purple", hsl: "271 81% 56%" },
orange: { name: "Orange", hsl: "24 95% 53%" },
rose: { name: "Rose", hsl: "340 82% 52%" },
};
export const useThemeStore = create<ThemeState>()(
apps/web/src/routes/_app/settings.tsx
+16 -20
View File
@@ -18,6 +18,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
import { cn } from "@/lib/utils";
import { useThemeStore, ACCENT_PALETTE, type ThemeMode, type AccentColor } from "@/lib/stores/use-theme-store";
import type { Domain, CustomField, Webhook as WebhookType, ErrorLog, Agent, PaginatedResponse } from "@/lib/types";
const SETTINGS_TABS = [
@@ -32,13 +33,10 @@ const SETTINGS_TABS = [
{ id: "error-log", label: "Error Log", icon: AlertCircle },
] as const;
const ACCENT_COLORS = [
{ name: "Blue", value: "#3b82f6" },
{ name: "Green", value: "#22c55e" },
{ name: "Purple", value: "#a855f7" },
{ name: "Orange", value: "#f97316" },
{ name: "Rose", value: "#e11d48" },
];
const ACCENT_COLORS = Object.entries(ACCENT_PALETTE).map(([key, val]) => ({
name: val.name,
value: key as AccentColor,
}));
const SHORTCUTS_MAP: Record<string, string> = {
"Cmd+K": "Command palette",
@@ -57,15 +55,12 @@ const SHORTCUTS_MAP: Record<string, string> = {
// ─── Appearance Tab ──────────────────────────────────────────────────────
function AppearanceTab() {
const [theme, setTheme] = useState(localStorage.getItem("theme") || "system");
const [accent, setAccent] = useState(localStorage.getItem("accent-color") || "#3b82f6");
const { mode, setMode, accent, setAccent } = useThemeStore();
const [fontSize, setFontSize] = useState(localStorage.getItem("font-size") || "normal");
const [density, setDensity] = useState(localStorage.getItem("density") || "comfortable");
const [sidebarPos, setSidebarPos] = useState(localStorage.getItem("sidebar-position") || "left");
const [reducedMotion, setReducedMotion] = useState(localStorage.getItem("reduced-motion") === "true");
useEffect(() => { localStorage.setItem("theme", theme); document.documentElement.className = theme; }, [theme]);
useEffect(() => { localStorage.setItem("accent-color", accent); document.documentElement.style.setProperty("--accent-color", accent); }, [accent]);
useEffect(() => { localStorage.setItem("font-size", fontSize); document.documentElement.style.fontSize = fontSize === "large" ? "18px" : fontSize === "small" ? "13px" : "16px"; }, [fontSize]);
useEffect(() => { localStorage.setItem("density", density); }, [density]);
useEffect(() => { localStorage.setItem("sidebar-position", sidebarPos); }, [sidebarPos]);
@@ -81,8 +76,8 @@ function AppearanceTab() {
{ id: "dark", icon: Moon, label: "Dark" },
{ id: "system", icon: Monitor, label: "System" },
].map((t) => (
<button key={t.id} onClick={() => setTheme(t.id)}
className={cn("flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-colors", theme === t.id ? "border-primary bg-primary/5" : "border-muted hover:border-muted-foreground/30")}>
<button key={t.id} onClick={() => setMode(t.id as ThemeMode)}
className={cn("flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-colors", mode === t.id ? "border-primary bg-primary/5" : "border-muted hover:border-muted-foreground/30")}>
<t.icon className="h-6 w-6" />
<span className="text-xs font-medium">{t.label}</span>
</button>
@@ -93,11 +88,14 @@ function AppearanceTab() {
<div>
<h3 className="text-lg font-semibold mb-3">Accent Color</h3>
<div className="flex gap-3">
{ACCENT_COLORS.map((c) => (
<button key={c.value} onClick={() => setAccent(c.value)}
className={cn("w-10 h-10 rounded-full border-2 transition-all", accent === c.value ? "border-foreground scale-110" : "border-transparent")}
style={{ backgroundColor: c.value }} aria-label={c.name} />
))}
{ACCENT_COLORS.map((c) => {
const palette = ACCENT_PALETTE[c.value];
return (
<button key={c.value} onClick={() => setAccent(c.value)}
className={cn("w-10 h-10 rounded-full border-2 transition-all", accent === c.value ? "border-foreground scale-110" : "border-transparent")}
style={{ backgroundColor: "hsl(" + palette.hsl + ")" }} aria-label={c.name} />
);
})}
</div>
</div>
<Separator />
@@ -147,8 +145,6 @@ function AppearanceTab() {
);
}
// ─── Domains Tab ─────────────────────────────────────────────────────────
function DomainsTab() {
const queryClient = useQueryClient();
const { data } = useApiQuery<PaginatedResponse<Domain>>(["domains"], "/domains");