feat: add workspace theme toggle

2026-07-03 04:28:01 -07:00
parent c4d5222ddd
commit fb15d4db47
4 changed files with 147 additions and 6 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -63,6 +63,37 @@
  --color-kumo-badge-green: oklch(0.48 0.11 155);
 }

+.dark {
+  --background: oklch(0.18 0.018 160);
+  --foreground: oklch(0.93 0.014 154);
+  --card: oklch(0.235 0.02 160);
+  --card-foreground: oklch(0.93 0.014 154);
+  --popover: oklch(0.22 0.022 160);
+  --popover-foreground: oklch(0.93 0.014 154);
+  --primary: oklch(0.69 0.13 154);
+  --primary-foreground: oklch(0.15 0.022 158);
+  --secondary: oklch(0.29 0.026 160);
+  --secondary-foreground: oklch(0.9 0.018 154);
+  --muted: oklch(0.27 0.02 160);
+  --muted-foreground: oklch(0.72 0.02 154);
+  --accent: oklch(0.39 0.07 154);
+  --accent-foreground: oklch(0.94 0.018 154);
+  --destructive: oklch(0.64 0.19 25);
+  --destructive-foreground: oklch(0.98 0.012 25);
+  --border: oklch(0.36 0.024 160);
+  --input: oklch(0.38 0.024 160);
+  --ring: oklch(0.72 0.12 154);
+  --color-kumo-brand: var(--primary);
+  --color-kumo-brand-hover: oklch(0.76 0.13 154);
+  --color-kumo-focus: var(--ring);
+  --color-kumo-link: var(--primary);
+  --text-color-kumo-brand: var(--primary);
+  --text-color-kumo-link: var(--primary);
+  --color-kumo-success: oklch(0.7 0.13 154);
+  --color-kumo-success-tint: oklch(0.3 0.055 154);
+  --color-kumo-badge-green: oklch(0.69 0.13 154);
+}
+
 * {
  border-color: var(--border);
 }
@@ -192,7 +223,7 @@ a,
 .teatea-button-secondary:hover,
 .teatea-button-ghost:hover {
  border-color: color-mix(in oklch, var(--primary) 45%, var(--border));
-  background: color-mix(in oklch, var(--secondary) 72%, white);
+  background: color-mix(in oklch, var(--secondary) 72%, var(--background));
  color: var(--accent-foreground);
 }

@@ -247,7 +278,7 @@ a,
 .teatea-select-trigger:hover,
 :where([data-kumo-component="Select"][data-kumo-part="trigger"]):hover {
  border-color: color-mix(in oklch, var(--primary) 45%, var(--input));
-  background: color-mix(in oklch, var(--secondary) 34%, white);
+  background: color-mix(in oklch, var(--secondary) 34%, var(--background));
 }

 .teatea-select-trigger[data-open="true"] {
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -14,6 +14,21 @@ type RootLayoutProps = {
 export default function RootLayout({ children }: RootLayoutProps): React.ReactElement {
  return (
    <html lang="zh-CN" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+try {
+  var theme = localStorage.getItem("teatea-theme") || "system";
+  var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  var isDark = theme === "dark" || (theme === "system" && prefersDark);
+  document.documentElement.classList.toggle("dark", isDark);
+  document.documentElement.style.colorScheme = isDark ? "dark" : "light";
+} catch (_) {}
+`,
+          }}
+        />
+      </head>
      <body>{children}</body>
    </html>
  );
--- a/modules/shared/components/AppShell.tsx
+++ b/modules/shared/components/AppShell.tsx
@@ -6,6 +6,7 @@ import { SignOutButton } from "@/modules/auth/components/SignOutButton";
 import { AccountMenu } from "@/modules/shared/components/AccountMenu";
 import { AppBreadcrumbs } from "@/modules/shared/components/AppBreadcrumbs";
 import { AppSidebarNav } from "@/modules/shared/components/AppSidebarNav";
+import { ThemeToggle } from "@/modules/shared/components/ThemeToggle";
 import { UserAvatar } from "@/modules/shared/components/UserAvatar";
 import { navItems } from "@/modules/shared/lib/navigation";
 import { getWorkspaceHref } from "@/modules/shared/lib/workspace-routing";
@@ -30,7 +31,7 @@ export function AppShell({

  return (
    <div className="flex h-svh items-stretch overflow-hidden bg-background text-foreground">
-      <aside className="hidden h-svh w-64 shrink-0 border-r bg-white/78 backdrop-blur xl:block">
+      <aside className="hidden h-svh w-64 shrink-0 border-r bg-card/78 backdrop-blur xl:block">
        <div className="flex h-full min-h-0 flex-col">
          <Link href={dashboardHref} className="flex h-16 shrink-0 items-center gap-3 border-b px-5">
            <span className="inline-flex size-10 items-center justify-center rounded-md bg-primary text-primary-foreground">
@@ -61,16 +62,19 @@ export function AppShell({
            </span>
            <AppBreadcrumbs />
          </div>
-          <div className="flex min-w-0 items-center gap-2 xl:hidden">
-            <div className="hidden min-w-0 items-center gap-2 sm:flex">
+          <div className="flex min-w-0 items-center gap-2">
+            <ThemeToggle />
+            <div className="hidden min-w-0 items-center gap-2 sm:flex xl:hidden">
              <p className="min-w-0 max-w-[min(52vw,24rem)] truncate whitespace-nowrap text-right text-sm leading-tight">
                <span className="font-medium">{account.name}</span>
                <span className="ml-2 text-muted-foreground">{account.email}</span>
              </p>
              <UserAvatar avatarUrl={account.avatarUrl} name={account.name} size="sm" />
            </div>
+            <div className="xl:hidden">
              <SignOutButton />
            </div>
+          </div>
        </header>

        <main className="page-enter min-h-0 flex-1 overflow-y-auto px-4 py-5 md:px-8">{children}</main>
--- a/modules/shared/components/ThemeToggle.tsx
+++ b/modules/shared/components/ThemeToggle.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { Moon, Monitor, Sun } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+type ThemeMode = "light" | "dark" | "system";
+
+const storageKey = "teatea-theme";
+
+const themeOptions: Array<{
+  mode: ThemeMode;
+  label: string;
+  icon: React.ComponentType<{ className?: string; "aria-hidden"?: boolean }>;
+}> = [
+  { mode: "light", label: "浅色主题", icon: Sun },
+  { mode: "dark", label: "深色主题", icon: Moon },
+  { mode: "system", label: "跟随系统", icon: Monitor },
+];
+
+function getStoredTheme(): ThemeMode {
+  if (typeof window === "undefined") {
+    return "system";
+  }
+
+  const storedTheme = window.localStorage.getItem(storageKey);
+  return storedTheme === "light" || storedTheme === "dark" || storedTheme === "system" ? storedTheme : "system";
+}
+
+function applyTheme(mode: ThemeMode): void {
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  document.documentElement.classList.toggle("dark", mode === "dark" || (mode === "system" && prefersDark));
+  document.documentElement.style.colorScheme = mode === "dark" || (mode === "system" && prefersDark) ? "dark" : "light";
+}
+
+export function ThemeToggle(): React.ReactElement {
+  const [theme, setTheme] = useState<ThemeMode>("system");
+
+  useEffect(() => {
+    const storedTheme = getStoredTheme();
+    setTheme(storedTheme);
+    applyTheme(storedTheme);
+
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (): void => {
+      if (getStoredTheme() === "system") {
+        applyTheme("system");
+      }
+    };
+
+    media.addEventListener("change", handleChange);
+    return () => media.removeEventListener("change", handleChange);
+  }, []);
+
+  function handleThemeChange(nextTheme: ThemeMode): void {
+    window.localStorage.setItem(storageKey, nextTheme);
+    setTheme(nextTheme);
+    applyTheme(nextTheme);
+  }
+
+  return (
+    <div
+      aria-label="主题切换"
+      className="inline-flex h-10 shrink-0 items-center rounded-md border bg-card p-1 shadow-sm"
+      role="group"
+    >
+      {themeOptions.map((option) => {
+        const Icon = option.icon;
+        const isSelected = theme === option.mode;
+
+        return (
+          <button
+            aria-label={option.label}
+            aria-pressed={isSelected}
+            className={cn(
+              "inline-flex size-8 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              isSelected && "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
+            )}
+            key={option.mode}
+            onClick={() => handleThemeChange(option.mode)}
+            title={option.label}
+            type="button"
+          >
+            <Icon className="size-4" aria-hidden={true} />
+          </button>
+        );
+      })}
+    </div>
+  );
+}