Merge pull request #8 from Yaosanqi137/feature/p2-web-shell-auth

feat(web): 登录页独占布局并优化侧栏交互
2026-04-05 17:14:33 +08:00
parent f7069fe07d aff645bc5d
commit 8b5af6e172
10 changed files with 475 additions and 106 deletions
@@ -1,10 +1,11 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="apple-touch-icon" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>web</title>
+    <title>TodoList</title>
  </head>
  <body>
    <div id="root"></div>
@@ -1,6 +1,22 @@
-import { useState } from "react";
-import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import type { LucideIcon } from "lucide-react";
+import {
+  Bell,
+  ChevronLeft,
+  ChevronRight,
+  LayoutDashboard,
+  ListTodo,
+  LogOut,
+  Menu,
+  Moon,
+  Settings,
+  Sparkles,
+  Sun,
+  X
+} from "lucide-react";
+import { Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { EmailLoginPage } from "@/pages/email-login-page";
 import { OAuthCallbackPage } from "@/pages/oauth-callback-page";
 import { TodoShellPage } from "@/pages/todo-shell-page";
@@ -11,6 +27,26 @@ import {
  saveSession,
  type WebSession
 } from "@/services/session-storage";
+import {
+  applyThemeMode,
+  loadThemeMode,
+  saveThemeMode,
+  type ThemeMode
+} from "@/services/theme-storage";
+
+type SidebarItem = {
+  key: string;
+  label: string;
+  icon: LucideIcon;
+};
+
+const SIDEBAR_ITEMS: SidebarItem[] = [
+  { key: "dashboard", label: "概览面板", icon: LayoutDashboard },
+  { key: "todo", label: "待办事项", icon: ListTodo },
+  { key: "ai", label: "AI 建议", icon: Sparkles },
+  { key: "notice", label: "提醒中心", icon: Bell },
+  { key: "settings", label: "系统设置", icon: Settings }
+];

 function toWebSession(payload: EmailLoginResult): WebSession {
  return {
@@ -26,7 +62,19 @@ function toWebSession(payload: EmailLoginResult): WebSession {
 function App() {
  const [session, setSession] = useState<WebSession | null>(() => loadSession());
  const [loggingOut, setLoggingOut] = useState(false);
+  const [themeMode, setThemeMode] = useState<ThemeMode>(() => loadThemeMode());
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
  const navigate = useNavigate();
+  const location = useLocation();
+
+  const isAuthPage =
+    location.pathname === "/login/email" || location.pathname.startsWith("/auth/callback/");
+
+  useEffect(() => {
+    applyThemeMode(themeMode);
+    saveThemeMode(themeMode);
+  }, [themeMode]);

  async function handleLogout(): Promise<void> {
    if (!session || loggingOut) {
@@ -37,77 +85,234 @@ function App() {
      setLoggingOut(true);
      await revokeRefreshToken(session.refreshToken);
    } catch {
-      // 登出流程以本地会话清理为最终兜底，避免页面卡在登录态。
+      // 无论接口成功与否，都要清理本地会话，避免页面卡在登录态。
    } finally {
      clearSession();
      setSession(null);
      setLoggingOut(false);
+      setMobileSidebarOpen(false);
      navigate("/login/email", { replace: true });
    }
  }

-  return (
-    <div className="min-h-screen bg-[#f6f8f7] text-[#122117]">
-      <header className="border-b border-[#d7e2db] bg-white/90 backdrop-blur">
-        <div className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between px-4">
-          <div className="flex items-center gap-2">
-            <div className="h-8 w-8 rounded-lg bg-[#0a7a5a]" />
-            <span className="text-lg font-semibold tracking-tight">TodoList</span>
-          </div>
-          {session ? (
-            <div className="flex items-center gap-3">
-              <span className="text-sm text-[#3a5a4a]">{session.user.email}</span>
-              <Button
-                type="button"
-                size="sm"
-                variant="outline"
-                onClick={handleLogout}
-                disabled={loggingOut}
-              >
-                {loggingOut ? "退出中..." : "退出登录"}
-              </Button>
-            </div>
-          ) : (
-            <span className="text-sm text-[#3a5a4a]">未登录</span>
-          )}
-        </div>
-      </header>
-      <main className="mx-auto w-full max-w-6xl px-4 py-8">
-        <Routes>
-          <Route
-            path="/login/email"
-            element={
-              <EmailLoginPage
-                onLoginSuccess={(payload) => {
+  function handleToggleTheme(): void {
+    setThemeMode((currentTheme) => (currentTheme === "dark" ? "light" : "dark"));
+  }
+
+  function handleLoginSuccess(payload: EmailLoginResult): void {
    const nextSession = toWebSession(payload);
    saveSession(nextSession);
    setSession(nextSession);
-                  navigate("/");
-                }}
-              />
+    setMobileSidebarOpen(false);
+    navigate("/", { replace: true });
  }
+
+  function handleBootstrapSession(nextSession: WebSession): void {
+    setSession(nextSession);
+    setMobileSidebarOpen(false);
+  }
+
+  function renderSidebarContent(options: { collapsed: boolean; mobile: boolean }) {
+    const { collapsed, mobile } = options;
+
+    return (
+      <div className="flex h-full min-h-0 flex-col">
+        {mobile ? (
+          <div className="flex h-14 shrink-0 items-center justify-end border-b border-border/70 px-3">
+            <Button
+              type="button"
+              size="icon-sm"
+              variant="ghost"
+              className="text-muted-foreground"
+              onClick={() => setMobileSidebarOpen(false)}
+              aria-label="关闭侧边栏"
+            >
+              <X className="size-4" />
+            </Button>
+          </div>
+        ) : null}
+
+        <div className="min-h-0 flex-1 overflow-y-auto p-2">
+          <nav className="space-y-1">
+            {SIDEBAR_ITEMS.map((item) => {
+              const ItemIcon = item.icon;
+              return (
+                <button
+                  key={item.key}
+                  type="button"
+                  className={cn(
+                    "group flex w-full items-center rounded-xl border border-transparent px-3 py-2.5 text-left transition-colors",
+                    "gap-3 hover:border-primary/25 hover:bg-primary/10"
+                  )}
+                >
+                  <ItemIcon className="size-5 shrink-0 text-primary" />
+                  {collapsed ? null : (
+                    <>
+                      <span className="text-sm whitespace-nowrap text-foreground">
+                        {item.label}
+                      </span>
+                      <span className="ml-auto whitespace-nowrap rounded-full border border-border bg-card px-2 py-0.5 text-[10px] text-muted-foreground">
+                        即将上线
+                      </span>
+                    </>
+                  )}
+                </button>
+              );
+            })}
+          </nav>
+        </div>
+
+        <div className="shrink-0 space-y-2 border-t border-border/70 p-2">
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full justify-start gap-2 border-primary/25 px-3 text-primary hover:bg-primary/10"
+            onClick={handleToggleTheme}
+          >
+            {themeMode === "dark" ? <Sun className="size-4" /> : <Moon className="size-4" />}
+            {collapsed ? null : (
+              <span className="whitespace-nowrap">
+                {themeMode === "dark" ? "浅色模式" : "深色模式"}
+              </span>
+            )}
+          </Button>
+
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full justify-start gap-2 border-primary/25 px-3 text-primary hover:bg-primary/10"
+            onClick={handleLogout}
+            disabled={!session || loggingOut}
+          >
+            <LogOut className="size-4" />
+            {collapsed ? null : (
+              <span className="whitespace-nowrap">{loggingOut ? "退出中..." : "退出登录"}</span>
+            )}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (isAuthPage) {
+    return (
+      <div className="min-h-dvh bg-background text-foreground md:min-h-screen">
+        <main className="flex min-h-dvh items-center justify-center px-4 py-8 md:min-h-screen md:px-6">
+          <div className="w-full max-w-md">
+            <Routes>
+              <Route
+                path="/login/email"
+                element={<EmailLoginPage onLoginSuccess={handleLoginSuccess} />}
              />
              <Route
                path="/auth/callback/:provider"
-            element={
-              <OAuthCallbackPage
-                onBootstrapSession={(nextSession) => {
-                  setSession(nextSession);
-                }}
-              />
-            }
-          />
-          <Route
-            path="/"
-            element={
-              session ? <TodoShellPage session={session} /> : <Navigate to="/login/email" replace />
-            }
+                element={<OAuthCallbackPage onBootstrapSession={handleBootstrapSession} />}
              />
              <Route path="*" element={<Navigate to={session ? "/" : "/login/email"} replace />} />
            </Routes>
+          </div>
        </main>
      </div>
    );
  }

+  return (
+    <div className="h-dvh overflow-hidden bg-background text-foreground md:h-screen">
+      <header className="relative z-50 shrink-0 border-b border-border/70 bg-background/80 backdrop-blur-xl">
+        <div className="flex h-16 items-center justify-between px-4 md:px-6">
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              className="text-primary md:hidden"
+              onClick={() => setMobileSidebarOpen(true)}
+              aria-label="打开侧边栏"
+            >
+              <Menu className="size-12" />
+            </button>
+            <img
+              src="/favicon.png"
+              alt="TodoList"
+              className="h-9 w-9 shrink-0 rounded-xl shadow-sm"
+            />
+            <span className="text-base font-semibold tracking-tight text-foreground">TodoList</span>
+          </div>
+          <span className="hidden max-w-[280px] truncate text-sm text-muted-foreground md:block">
+            {session ? session.user.email : "未登录"}
+          </span>
+        </div>
+      </header>
+
+      {mobileSidebarOpen ? (
+        <button
+          type="button"
+          className="fixed inset-x-0 bottom-0 top-16 z-30 bg-black/40 backdrop-blur-[2px] md:hidden"
+          aria-label="关闭侧边栏遮罩"
+          onClick={() => setMobileSidebarOpen(false)}
+        />
+      ) : null}
+
+      <aside
+        className={cn(
+          "fixed bottom-0 left-0 top-16 z-40 w-72 border-r border-border/80 bg-card/95 backdrop-blur-xl transition-transform duration-300 md:hidden",
+          mobileSidebarOpen ? "translate-x-0" : "-translate-x-full"
+        )}
+      >
+        {renderSidebarContent({ collapsed: false, mobile: true })}
+      </aside>
+
+      <div className="flex h-[calc(100dvh-4rem)] min-h-0 md:h-[calc(100vh-4rem)]">
+        <aside
+          className={cn(
+            "relative hidden h-full border-r border-border/80 bg-card/88 backdrop-blur-xl transition-[width] duration-300 md:flex md:flex-col",
+            sidebarCollapsed ? "md:w-14" : "md:w-72"
+          )}
+        >
+          {renderSidebarContent({ collapsed: sidebarCollapsed, mobile: false })}
+          <Button
+            type="button"
+            size="icon-sm"
+            variant="outline"
+            className={cn(
+              "absolute left-full top-1/2 z-20 -ml-px h-14 w-6 -translate-y-1/2 rounded-none border border-border/80",
+              "bg-card/88 text-muted-foreground backdrop-blur-xl transition-colors duration-200 hover:bg-muted/80 hover:text-foreground",
+              "focus-visible:ring-2 focus-visible:ring-ring/45 focus-visible:ring-offset-0"
+            )}
+            onClick={() => setSidebarCollapsed((current) => !current)}
+            aria-label={sidebarCollapsed ? "展开侧边栏" : "收起侧边栏"}
+          >
+            {sidebarCollapsed ? (
+              <ChevronRight className="size-4" />
+            ) : (
+              <ChevronLeft className="size-4" />
+            )}
+          </Button>
+        </aside>
+
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+          <main className="min-h-0 flex-1 overflow-y-auto px-4 py-6 md:px-6 md:py-8">
+            <div className="mx-auto w-full max-w-6xl">
+              <Routes>
+                <Route
+                  path="/"
+                  element={
+                    session ? (
+                      <TodoShellPage session={session} />
+                    ) : (
+                      <Navigate to="/login/email" replace />
+                    )
+                  }
+                />
+                <Route
+                  path="*"
+                  element={<Navigate to={session ? "/" : "/login/email"} replace />}
+                />
+              </Routes>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default App;
@@ -1,21 +1,77 @@
-@import "@fontsource-variable/geist";
+@import "@fontsource-variable/geist";
@tailwind base;
@tailwind components;
@tailwind utilities;

+html {
+  height: 100%;
+  font-size: 120%;
+}
+
 :root {
-  --radius: 0.625rem;
-  --background: #f6f8f7;
-  --foreground: #122117;
-  --primary: #0a7a5a;
-  --primary-foreground: #ffffff;
-  --border: #d7e2db;
+  --radius: 0.9rem;
+  --background: 246 100% 98%;
+  --foreground: 248 40% 18%;
+  --card: 0 0% 100%;
+  --border: 248 53% 89%;
+  --input: 248 48% 84%;
+  --ring: 246 53% 53%;
+  --primary: 246 53% 53%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 250 70% 94%;
+  --secondary-foreground: 248 40% 25%;
+  --muted: 249 78% 95%;
+  --muted-foreground: 248 17% 45%;
+  --accent: 173 56% 66%;
+  --accent-foreground: 248 40% 25%;
+  --destructive: 343 40% 50%;
+  --destructive-foreground: 0 0% 100%;
+  color-scheme: light;
  font-family: "Geist Variable", "Noto Sans SC", sans-serif;
 }

+.dark {
+  --background: 248 46% 10%;
+  --foreground: 240 44% 96%;
+  --card: 249 41% 15%;
+  --border: 249 24% 30%;
+  --input: 249 23% 28%;
+  --ring: 246 76% 68%;
+  --primary: 246 76% 68%;
+  --primary-foreground: 248 43% 12%;
+  --secondary: 249 30% 24%;
+  --secondary-foreground: 240 38% 92%;
+  --muted: 249 29% 20%;
+  --muted-foreground: 247 16% 74%;
+  --accent: 173 52% 58%;
+  --accent-foreground: 248 43% 12%;
+  --destructive: 343 64% 58%;
+  --destructive-foreground: 0 0% 100%;
+  color-scheme: dark;
+}
+
 body {
  margin: 0;
-  min-height: 100vh;
-  background: var(--background);
-  color: var(--foreground);
+  height: 100%;
+  overflow: hidden;
+  background:
+    radial-gradient(
+      1100px 620px at -12% -25%,
+      hsl(var(--primary) / 0.2),
+      hsl(var(--primary) / 0) 60%
+    ),
+    radial-gradient(
+      900px 540px at 112% -14%,
+      hsl(var(--accent) / 0.35),
+      hsl(var(--accent) / 0) 58%
+    ),
+    hsl(var(--background));
+  color: hsl(var(--foreground));
+  transition:
+    background-color 220ms ease,
+    color 220ms ease;
+}
+
+#root {
+  height: 100%;
 }
@@ -3,6 +3,9 @@ import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import "./index.css";
 import App from "./App.tsx";
+import { applyThemeMode, loadThemeMode } from "@/services/theme-storage";
+
+applyThemeMode(loadThemeMode());

 createRoot(document.getElementById("root")!).render(
  <StrictMode>
@@ -84,31 +84,39 @@ export function EmailLoginPage({ onLoginSuccess }: EmailLoginPageProps) {
  }

  return (
-    <div className="mx-auto w-full max-w-md rounded-xl border border-[#d7e2db] bg-white p-6 shadow-sm">
-      <h1 className="text-2xl font-semibold text-[#122117]">邮箱验证码登录</h1>
-      <p className="mt-2 text-sm text-[#3a5a4a]">
-        输入邮箱后获取验证码，再完成登录。你也可以直接使用第三方账号登录。
-      </p>
+    <div className="mx-auto w-full max-w-md rounded-2xl border border-border bg-card/92 p-6 shadow-[0_24px_60px_-36px_hsl(var(--primary)/0.65)] backdrop-blur">
+      <div className="mb-4 flex items-center gap-3">
+        <img src="/favicon.png" alt="TodoList" className="h-10 w-10 rounded-xl shadow-sm" />
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">邮箱验证码登录</h1>
+        </div>
+      </div>

      <form className="mt-6 space-y-3" onSubmit={handleSendCode}>
-        <label className="block text-sm font-medium text-[#244236]" htmlFor="email">
+        <label className="block text-sm font-medium text-secondary-foreground" htmlFor="email">
          邮箱
        </label>
+        <div className="flex items-stretch gap-2">
          <input
            id="email"
            type="email"
-          className="w-full rounded-md border border-[#bfd0c7] px-3 py-2 text-sm outline-none focus:border-[#0a7a5a]"
+            className="min-w-0 flex-1 rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-primary focus:ring-3 focus:ring-ring/25"
            placeholder="you@example.com"
            value={email}
            onChange={(event) => setEmail(event.target.value)}
          />
-        <Button type="submit" disabled={!canSendCode} className="w-full">
-          {sendingCode ? "发送中..." : codeCooldown > 0 ? `${codeCooldown} 秒后重发` : "发送验证码"}
+          <Button
+            type="submit"
+            disabled={!canSendCode}
+            className="shrink-0 bg-primary px-4 text-primary-foreground hover:bg-primary/90"
+          >
+            {sendingCode ? "发送中..." : codeCooldown > 0 ? `${codeCooldown}s` : "发送验证码"}
          </Button>
+        </div>
      </form>

      <form className="mt-4 space-y-3" onSubmit={handleLogin}>
-        <label className="block text-sm font-medium text-[#244236]" htmlFor="code">
+        <label className="block text-sm font-medium text-secondary-foreground" htmlFor="code">
          验证码
        </label>
        <input
@@ -116,7 +124,7 @@ export function EmailLoginPage({ onLoginSuccess }: EmailLoginPageProps) {
          type="text"
          inputMode="numeric"
          maxLength={6}
-          className="w-full rounded-md border border-[#bfd0c7] px-3 py-2 text-sm outline-none focus:border-[#0a7a5a]"
+          className="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-primary focus:ring-3 focus:ring-ring/25"
          placeholder="6位数字验证码"
          value={code}
          onChange={(event) => setCode(event.target.value)}
@@ -124,7 +132,7 @@ export function EmailLoginPage({ onLoginSuccess }: EmailLoginPageProps) {
        <Button
          type="submit"
          disabled={!canLogin}
-          className="w-full bg-[#0a7a5a] text-white hover:bg-[#0a7a5a]/90"
+          className="w-full bg-gradient-to-r from-primary to-accent text-primary-foreground hover:opacity-95"
        >
          {loggingIn ? "登录中..." : "立即登录"}
        </Button>
@@ -132,24 +140,36 @@ export function EmailLoginPage({ onLoginSuccess }: EmailLoginPageProps) {

      <div className="mt-6 grid grid-cols-1 gap-2">
        <a href={`${resolveApiBaseUrl()}/auth/oauth/github`}>
-          <Button type="button" variant="outline" className="w-full">
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full border-border bg-card text-foreground"
+          >
            使用 GitHub 登录
          </Button>
        </a>
        <a href={`${resolveApiBaseUrl()}/auth/oauth/qq`}>
-          <Button type="button" variant="outline" className="w-full">
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full border-border bg-card text-foreground"
+          >
            使用 QQ 登录
          </Button>
        </a>
        <a href={`${resolveApiBaseUrl()}/auth/oauth/wechat`}>
-          <Button type="button" variant="outline" className="w-full">
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full border-border bg-card text-foreground"
+          >
            使用微信登录
          </Button>
        </a>
      </div>

-      {message ? <p className="mt-4 text-sm text-[#0a7a5a]">{message}</p> : null}
-      {error ? <p className="mt-2 text-sm text-[#b42318]">{error}</p> : null}
+      {message ? <p className="mt-4 text-sm text-primary">{message}</p> : null}
+      {error ? <p className="mt-2 text-sm text-destructive">{error}</p> : null}
    </div>
  );
 }
@@ -49,13 +49,16 @@ export function OAuthCallbackPage({ onBootstrapSession }: OAuthCallbackPageProps
  }

  return (
-    <div className="mx-auto w-full max-w-md rounded-xl border border-[#d7e2db] bg-white p-6 shadow-sm">
-      <h1 className="text-2xl font-semibold text-[#122117]">OAuth 回调处理中</h1>
-      <p className="mt-2 text-sm text-[#3a5a4a]">
+    <div className="mx-auto w-full max-w-md rounded-2xl border border-border bg-card/92 p-6 shadow-[0_24px_60px_-36px_hsl(var(--primary)/0.55)] backdrop-blur">
+      <div className="mb-4 flex items-center gap-3">
+        <img src="/favicon.png" alt="TodoList" className="h-10 w-10 rounded-xl shadow-sm" />
+        <h1 className="text-2xl font-semibold text-foreground">OAuth 回调处理中</h1>
+      </div>
+      <p className="mt-2 text-sm text-muted-foreground">
        {parseResult.ok ? "已收到回调参数，点击继续进入工作台。" : parseResult.reason}
      </p>
      <Button
-        className="mt-6 w-full bg-[#0a7a5a] text-white hover:bg-[#0a7a5a]/90"
+        className="mt-6 w-full bg-gradient-to-r from-primary to-accent text-primary-foreground hover:opacity-95"
        onClick={handleContinue}
      >
        {parseResult.ok ? "继续" : "返回邮箱登录"}
@@ -6,11 +6,28 @@ type TodoShellPageProps = {

 export function TodoShellPage({ session }: TodoShellPageProps) {
  return (
-    <div className="rounded-xl border border-[#d7e2db] bg-white p-6 shadow-sm">
-      <h1 className="text-2xl font-semibold text-[#122117]">TodoList 工作台</h1>
-      <p className="mt-2 text-sm text-[#3a5a4a]">
+    <div className="rounded-2xl border border-border bg-card/90 p-6 shadow-[0_24px_70px_-42px_hsl(var(--primary)/0.6)] backdrop-blur">
+      <h1 className="text-2xl font-semibold text-foreground">TodoList 工作台</h1>
+      <p className="mt-2 text-sm text-muted-foreground">
        {session ? `当前登录邮箱：${session.user.email}` : "当前未建立登录会话，请先完成登录。"}
      </p>
+      <div className="mt-6 grid gap-3 sm:grid-cols-3">
+        <div className="rounded-xl border border-border bg-muted/40 p-4">
+          <p className="text-xs text-muted-foreground">今日重点</p>
+          <p className="mt-2 text-lg font-semibold text-foreground">待接入</p>
+        </div>
+        <div className="rounded-xl border border-border bg-muted/40 p-4">
+          <p className="text-xs text-muted-foreground">临近截止</p>
+          <p className="mt-2 text-lg font-semibold text-foreground">待接入</p>
+        </div>
+        <div className="rounded-xl border border-border bg-muted/40 p-4">
+          <p className="text-xs text-muted-foreground">任务分析</p>
+          <p className="mt-2 text-lg font-semibold text-foreground">待接入</p>
+        </div>
+      </div>
+      <p className="mt-4 text-xs text-muted-foreground">
+        当前为界面阶段，统计卡片将在任务数据接入后显示真实结果。
+      </p>
    </div>
  );
 }
@@ -0,0 +1,29 @@
+const THEME_STORAGE_KEY = "todolist.web.theme";
+
+export type ThemeMode = "light" | "dark";
+
+function isThemeMode(value: string | null): value is ThemeMode {
+  return value === "light" || value === "dark";
+}
+
+export function loadThemeMode(): ThemeMode {
+  const savedTheme = window.localStorage.getItem(THEME_STORAGE_KEY);
+  if (isThemeMode(savedTheme)) {
+    return savedTheme;
+  }
+
+  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return "dark";
+  }
+
+  return "light";
+}
+
+export function saveThemeMode(mode: ThemeMode): void {
+  window.localStorage.setItem(THEME_STORAGE_KEY, mode);
+}
+
+export function applyThemeMode(mode: ThemeMode): void {
+  document.documentElement.classList.toggle("dark", mode === "dark");
+  document.documentElement.style.colorScheme = mode;
+}
@@ -1,8 +1,43 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: "class",
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  theme: {
-    extend: {}
+    extend: {
+      colors: {
+        border: "hsl(var(--border) / <alpha-value>)",
+        input: "hsl(var(--input) / <alpha-value>)",
+        ring: "hsl(var(--ring) / <alpha-value>)",
+        background: "hsl(var(--background) / <alpha-value>)",
+        foreground: "hsl(var(--foreground) / <alpha-value>)",
+        primary: {
+          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+          foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+          foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+          foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
+        },
+        card: "hsl(var(--card) / <alpha-value>)"
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)"
+      }
+    }
  },
  plugins: []
 };