feat: 优化前端主题和图片聊天滚动体验

web/src/app/globals.css

@@ -122,6 +122,11 @@
     overscroll-behavior: none;
   }
 
+  .dark,
+  .dark body {
+    background: radial-gradient(circle at top left, rgba(55, 48, 43, 0.72), rgba(28, 25, 23, 0.98) 40%, rgba(12, 10, 9, 1) 100%);
+  }
+
   body {
     @apply text-foreground;
   }
@@ -138,6 +143,83 @@
   }
 }
 
+.dark .bg-white,
+.dark .bg-white\/85,
+.dark .bg-white\/90,
+.dark .bg-white\/95,
+.dark .hover\:bg-white:hover {
+  background-color: rgb(28 25 23 / 0.94) !important;
+}
+
+.dark .bg-white\/80,
+.dark .bg-white\/70,
+.dark .bg-white\/60 {
+  background-color: rgb(41 37 36 / 0.78) !important;
+}
+
+.dark .bg-stone-50,
+.dark .bg-stone-50\/70,
+.dark .hover\:bg-stone-50\/70:hover,
+.dark .bg-stone-100,
+.dark .hover\:bg-stone-100:hover,
+.dark .hover\:bg-stone-200:hover {
+  background-color: rgb(41 37 36 / 0.86) !important;
+}
+
+.dark .bg-stone-200 {
+  background-color: rgb(68 64 60 / 0.9) !important;
+}
+
+.dark .border-white,
+.dark .border-white\/80,
+.dark .border-white\/70,
+.dark .border-stone-100,
+.dark .border-stone-100\/80,
+.dark .border-stone-100\/50,
+.dark .border-stone-200,
+.dark .border-stone-200\/70,
+.dark .border-stone-300,
+.dark .focus-visible\:border-stone-300:focus-visible {
+  border-color: rgb(255 255 255 / 0.11) !important;
+}
+
+.dark .text-stone-950,
+.dark .text-stone-900,
+.dark .text-stone-800 {
+  color: rgb(250 250 249) !important;
+}
+
+.dark .text-stone-700,
+.dark .text-stone-600 {
+  color: rgb(214 211 209) !important;
+}
+
+.dark .text-stone-500,
+.dark .text-stone-400 {
+  color: rgb(168 162 158) !important;
+}
+
+.dark .text-stone-300 {
+  color: rgb(214 211 209) !important;
+}
+
+.dark .placeholder\:text-stone-400::placeholder,
+.dark .placeholder\:text-muted-foreground::placeholder {
+  color: rgb(120 113 108) !important;
+}
+
+.dark .hover\:text-stone-700:hover,
+.dark .hover\:text-stone-800:hover,
+.dark .hover\:text-stone-900:hover {
+  color: rgb(250 250 249) !important;
+}
+
+.dark .shadow-sm,
+.dark .shadow-xs,
+.dark [class*="shadow-"] {
+  box-shadow: none !important;
+}
+
 @keyframes grow {
   from { transform: scaleX(0); }
   to { transform: scaleX(1); }

web/src/app/image/components/image-composer.tsx

@@ -137,7 +137,7 @@ export function ImageComposer({
           </div>
         ) : null}
 
-        <div className="overflow-hidden rounded-[24px] border border-stone-200 bg-white shadow-[0_14px_60px_-42px_rgba(15,23,42,0.45)] sm:rounded-[32px] sm:shadow-none">
+        <div className="overflow-hidden rounded-[24px] border border-stone-200 bg-white shadow-[0_14px_60px_-42px_rgba(15,23,42,0.45)] dark:border-white/10 dark:bg-stone-950/80 sm:rounded-[32px] sm:shadow-none">
           <div
             className="relative cursor-text"
             onClick={() => {
@@ -167,10 +167,10 @@ export function ImageComposer({
                   void onSubmit();
                 }
               }}
-              className="min-h-[82px] resize-none rounded-[24px] border-0 bg-transparent px-4 pt-4 pb-2 text-[15px] leading-6 text-stone-900 shadow-none placeholder:text-stone-400 focus-visible:ring-0 sm:min-h-[148px] sm:rounded-[32px] sm:px-6 sm:pt-6 sm:pb-20 sm:leading-7"
+              className="min-h-[82px] resize-none rounded-[24px] border-0 bg-transparent px-4 pt-4 pb-2 text-[15px] leading-6 text-stone-900 shadow-none placeholder:text-stone-400 focus-visible:ring-0 dark:text-stone-100 dark:placeholder:text-stone-500 sm:min-h-[148px] sm:rounded-[32px] sm:px-6 sm:pt-6 sm:pb-20 sm:leading-7"
             />
 
-            <div className="rounded-b-[24px] border-t border-stone-100 bg-white px-3 pb-3 pt-2 sm:absolute sm:inset-x-0 sm:bottom-0 sm:rounded-b-none sm:border-t-0 sm:bg-gradient-to-t sm:from-white sm:via-white/95 sm:to-transparent sm:px-6 sm:pb-4 sm:pt-6" onClick={(event) => event.stopPropagation()}>
+            <div className="rounded-b-[24px] border-t border-stone-100 bg-white px-3 pb-3 pt-2 dark:border-white/10 dark:bg-stone-950/95 sm:absolute sm:inset-x-0 sm:bottom-0 sm:rounded-b-none sm:border-t-0 sm:bg-gradient-to-t sm:from-white sm:via-white/95 sm:to-transparent sm:px-6 sm:pb-4 sm:pt-6 sm:dark:from-stone-950 sm:dark:via-stone-950/95 sm:dark:to-stone-950/0" onClick={(event) => event.stopPropagation()}>
               <div className="flex items-end justify-between gap-2 sm:gap-3">
                 <div className="hide-scrollbar flex min-w-0 flex-1 flex-nowrap items-center gap-1.5 overflow-x-auto pb-0.5 sm:flex-wrap sm:gap-3 sm:overflow-visible sm:pb-0">
                   <Button
@@ -279,4 +279,3 @@ export function ImageComposer({
     </div>
   );
 }
-

web/src/app/image/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { History, LoaderCircle, Plus, Trash2 } from "lucide-react";
+import { ArrowDown, History, LoaderCircle, Plus, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
 import { ImageComposer } from "@/app/image/components/image-composer";
@@ -45,12 +45,17 @@ import {
 const ACTIVE_CONVERSATION_STORAGE_KEY = "chatgpt2api:image_active_conversation_id";
 const IMAGE_SIZE_STORAGE_KEY = "chatgpt2api:image_last_size";
 const IMAGE_COUNT_STORAGE_KEY = "chatgpt2api:image_last_count";
+const SCROLL_TO_LATEST_THRESHOLD = 160;
 
 function clampImageCount(value: string) {
   return String(Math.min(100, Math.max(1, Math.floor(Number(value) || 1))));
 }
 const activeConversationQueueIds = new Set<string>();
 
+function getResultsDistanceFromBottom(element: HTMLElement) {
+  return element.scrollHeight - element.scrollTop - element.clientHeight;
+}
+
 function buildConversationTitle(prompt: string) {
   const trimmed = prompt.trim();
   if (trimmed.length <= 12) {
@@ -341,6 +346,9 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
   const didLoadQuotaRef = useRef(false);
   const conversationsRef = useRef<ImageConversation[]>([]);
   const resultsViewportRef = useRef<HTMLDivElement>(null);
+  const lastConversationIdRef = useRef<string | null>(null);
+  const shouldStickToBottomRef = useRef(true);
+  const scrollRafRef = useRef<number | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -357,6 +365,7 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
   const [lightboxImages, setLightboxImages] = useState<ImageLightboxItem[]>([]);
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [lightboxIndex, setLightboxIndex] = useState(0);
+  const [showScrollToLatest, setShowScrollToLatest] = useState(false);
   const [deleteConfirm, setDeleteConfirm] = useState<
     | { type: "one"; id: string }
     | { type: "prompt"; conversationId: string; turnId: string }
@@ -403,6 +412,46 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
     conversationsRef.current = conversations;
   }, [conversations]);
 
+  const scrollResultsToLatest = useCallback((behavior: ScrollBehavior = "smooth") => {
+    const element = resultsViewportRef.current;
+    if (!element) {
+      return;
+    }
+
+    shouldStickToBottomRef.current = true;
+    setShowScrollToLatest(false);
+    element.scrollTo({
+      top: element.scrollHeight,
+      behavior,
+    });
+  }, []);
+
+  const handleResultsScroll = useCallback(() => {
+    if (scrollRafRef.current !== null) {
+      return;
+    }
+
+    scrollRafRef.current = window.requestAnimationFrame(() => {
+      scrollRafRef.current = null;
+      const element = resultsViewportRef.current;
+      if (!element) {
+        return;
+      }
+
+      const isAwayFromLatest = getResultsDistanceFromBottom(element) > SCROLL_TO_LATEST_THRESHOLD;
+      shouldStickToBottomRef.current = !isAwayFromLatest;
+      setShowScrollToLatest(isAwayFromLatest);
+    });
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (scrollRafRef.current !== null) {
+        window.cancelAnimationFrame(scrollRafRef.current);
+      }
+    };
+  }, []);
+
   useEffect(() => {
     let cancelled = false;
 
@@ -476,14 +525,36 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
 
   useEffect(() => {
     if (!selectedConversation) {
+      lastConversationIdRef.current = null;
+      shouldStickToBottomRef.current = true;
+      setShowScrollToLatest(false);
       return;
     }
 
-    resultsViewportRef.current?.scrollTo({
-      top: resultsViewportRef.current.scrollHeight,
-      behavior: "smooth",
-    });
-  }, [selectedConversation?.updatedAt, selectedConversation?.turns.length, selectedConversation]);
+    const element = resultsViewportRef.current;
+    if (!element) {
+      return;
+    }
+
+    const didSwitchConversation = lastConversationIdRef.current !== selectedConversation.id;
+    lastConversationIdRef.current = selectedConversation.id;
+
+    if (didSwitchConversation) {
+      requestAnimationFrame(() => scrollResultsToLatest("auto"));
+      return;
+    }
+
+    const shouldFollowLatest =
+      shouldStickToBottomRef.current ||
+      getResultsDistanceFromBottom(element) <= SCROLL_TO_LATEST_THRESHOLD;
+
+    if (shouldFollowLatest) {
+      requestAnimationFrame(() => scrollResultsToLatest("smooth"));
+      return;
+    }
+
+    setShowScrollToLatest(true);
+  }, [selectedConversation?.id, selectedConversation?.updatedAt, selectedConversation?.turns.length, scrollResultsToLatest]);
 
   useEffect(() => {
     if (typeof window === "undefined") {
@@ -566,6 +637,8 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
   }, [clearComposerInputs]);
 
   const handleCreateDraft = () => {
+    shouldStickToBottomRef.current = true;
+    setShowScrollToLatest(false);
     setSelectedConversationId(null);
     resetComposer();
     textareaRef.current?.focus();
@@ -1110,8 +1183,10 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
           createdAt: now,
           updatedAt: now,
           turns: [draftTurn],
-        };
+      };
 
+    shouldStickToBottomRef.current = true;
+    setShowScrollToLatest(false);
     setSelectedConversationId(conversationId);
     clearComposerInputs();
 
@@ -1203,21 +1278,36 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
             </Button>
           </div>
 
-          <div
-            ref={resultsViewportRef}
-            className="hide-scrollbar min-h-0 flex-1 overscroll-contain overflow-y-auto px-1 py-2 sm:px-4 sm:py-4"
-          >
-            <ImageResults
-              selectedConversation={selectedConversation}
-              onOpenLightbox={openLightbox}
-              onContinueEdit={handleContinueEdit}
-              onDeletePrompt={openDeletePromptConfirm}
-              onDeleteResults={openDeleteResultsConfirm}
-              onReuseTurnConfig={handleReuseTurnConfig}
-              onRegenerateTurn={handleRegenerateTurn}
-              onRetryImage={handleRetryImage}
-              formatConversationTime={formatConversationTime}
-            />
+          <div className="relative min-h-0 flex-1">
+            <div
+              ref={resultsViewportRef}
+              onScroll={handleResultsScroll}
+              className="hide-scrollbar h-full overscroll-contain scroll-smooth overflow-y-auto px-1 py-2 sm:px-4 sm:py-4"
+            >
+              <ImageResults
+                selectedConversation={selectedConversation}
+                onOpenLightbox={openLightbox}
+                onContinueEdit={handleContinueEdit}
+                onDeletePrompt={openDeletePromptConfirm}
+                onDeleteResults={openDeleteResultsConfirm}
+                onReuseTurnConfig={handleReuseTurnConfig}
+                onRegenerateTurn={handleRegenerateTurn}
+                onRetryImage={handleRetryImage}
+                formatConversationTime={formatConversationTime}
+              />
+            </div>
+
+            {showScrollToLatest ? (
+              <button
+                type="button"
+                aria-label="滚动到最新消息"
+                title="滚动到最新消息"
+                onClick={() => scrollResultsToLatest("smooth")}
+                className="absolute bottom-4 left-1/2 z-20 inline-flex size-11 -translate-x-1/2 items-center justify-center rounded-full border border-stone-200 bg-white/95 text-stone-700 shadow-lg shadow-stone-200/60 backdrop-blur transition hover:-translate-y-0.5 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 dark:border-white/10 dark:bg-stone-800/95 dark:text-stone-100 dark:shadow-black/40 dark:hover:bg-stone-700"
+              >
+                <ArrowDown className="size-5" />
+              </button>
+            ) : null}
           </div>
 
           <ImageComposer

web/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata, Viewport } from "next";
 import { Toaster } from "sonner";
 import "./globals.css";
+import { ThemeScript } from "@/components/theme-script";
 import { TopNav } from "@/components/top-nav";
 
 export const metadata: Metadata = {
@@ -13,7 +14,10 @@ export const viewport: Viewport = {
   initialScale: 1,
   maximumScale: 1,
   userScalable: false,
-  themeColor: "#f0ebe3",
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#f0ebe3" },
+    { media: "(prefers-color-scheme: dark)", color: "#12110f" },
+  ],
 };
 
 export default function RootLayout({
@@ -23,6 +27,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="zh-CN" suppressHydrationWarning>
+      <head>
+        <ThemeScript />
+      </head>
       <body
         className="antialiased"
         style={{
@@ -31,7 +38,7 @@ export default function RootLayout({
         }}
       >
         <Toaster position="top-center" richColors offset={48} />
-        <main className="min-h-screen overflow-x-hidden bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.92),_rgba(245,239,231,0.96)_42%,_rgba(240,235,227,0.99)_100%)] px-4 pt-0 pb-2 text-stone-900 sm:px-6 sm:pt-2 lg:px-8">
+        <main className="min-h-screen overflow-x-hidden bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.92),_rgba(245,239,231,0.96)_42%,_rgba(240,235,227,0.99)_100%)] px-4 pt-0 pb-2 text-stone-900 transition-colors duration-300 dark:bg-[radial-gradient(circle_at_top_left,_rgba(55,48,43,0.72),_rgba(28,25,23,0.98)_40%,_rgba(12,10,9,1)_100%)] dark:text-stone-100 sm:px-6 sm:pt-2 lg:px-8">
           <div className="mx-auto box-border flex min-h-screen max-w-[1440px] flex-col gap-2 pt-[env(safe-area-inset-top)] sm:gap-5 sm:pt-0">
             <TopNav />
             {children}

web/src/app/login/page.tsx

@@ -8,6 +8,7 @@ import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import { ThemeToggle } from "@/components/theme-toggle";
 import { login } from "@/lib/api";
 import { useRedirectIfAuthenticated } from "@/lib/use-auth-guard";
 import { getDefaultRouteForRole, setStoredAuthSession } from "@/store/auth";
@@ -53,6 +54,9 @@ export default function LoginPage() {
 
   return (
     <div className="grid min-h-[calc(100vh-1rem)] w-full place-items-center px-4 py-6">
+      <div className="fixed top-4 right-4 z-10">
+        <ThemeToggle />
+      </div>
       <Card className="w-full max-w-[505px] rounded-[30px] border-white/80 bg-white/95 shadow-[0_28px_90px_rgba(28,25,23,0.10)]">
         <CardContent className="space-y-7 p-6 sm:p-8">
           <div className="space-y-4 text-center">

web/src/components/image-lightbox.tsx

@@ -27,6 +27,10 @@ type ImageTransform = {
   y: number;
 };
 
+type TouchPoints = {
+  [index: number]: React.Touch;
+};
+
 type TouchGesture =
   | {
       type: "swipe";
@@ -54,13 +58,13 @@ function clamp(value: number, min: number, max: number) {
   return Math.min(max, Math.max(min, value));
 }
 
-function getTouchDistance(touches: TouchList) {
+function getTouchDistance(touches: TouchPoints) {
   const first = touches[0];
   const second = touches[1];
   return Math.hypot(first.clientX - second.clientX, first.clientY - second.clientY);
 }
 
-function getTouchCenter(touches: TouchList) {
+function getTouchCenter(touches: TouchPoints) {
   const first = touches[0];
   const second = touches[1];
   return {

web/src/components/theme-script.tsx

@@ -0,0 +1,18 @@
+const themeScript = `
+(() => {
+  try {
+    const stored = localStorage.getItem("chatgpt2api-theme");
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const theme = stored === "light" || stored === "dark" ? stored : prefersDark ? "dark" : "light";
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    document.documentElement.style.colorScheme = theme;
+  } catch {
+    document.documentElement.classList.remove("dark");
+    document.documentElement.style.colorScheme = "light";
+  }
+})();
+`;
+
+export function ThemeScript() {
+  return <script dangerouslySetInnerHTML={{ __html: themeScript }} />;
+}

web/src/components/theme-toggle.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useEffect, useState } from "react";
+
+type Theme = "light" | "dark";
+
+const STORAGE_KEY = "chatgpt2api-theme";
+
+function resolveInitialTheme(): Theme {
+  if (typeof window === "undefined") {
+    return "light";
+  }
+  const stored = window.localStorage.getItem(STORAGE_KEY);
+  if (stored === "light" || stored === "dark") {
+    return stored;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function applyTheme(theme: Theme) {
+  document.documentElement.classList.toggle("dark", theme === "dark");
+  document.documentElement.style.colorScheme = theme;
+}
+
+export function ThemeToggle() {
+  const [theme, setTheme] = useState<Theme>("light");
+  const isDark = theme === "dark";
+
+  useEffect(() => {
+    const nextTheme = resolveInitialTheme();
+    setTheme(nextTheme);
+    applyTheme(nextTheme);
+  }, []);
+
+  const toggleTheme = () => {
+    const nextTheme: Theme = isDark ? "light" : "dark";
+    window.localStorage.setItem(STORAGE_KEY, nextTheme);
+    setTheme(nextTheme);
+    applyTheme(nextTheme);
+  };
+
+  return (
+    <button
+      type="button"
+      aria-label={isDark ? "切换到浅色模式" : "切换到深色模式"}
+      title={isDark ? "浅色模式" : "深色模式"}
+      className="inline-flex size-8 shrink-0 items-center justify-center rounded-full border border-stone-200/80 bg-white/80 text-stone-500 shadow-sm transition hover:border-stone-300 hover:text-stone-900 dark:border-white/10 dark:bg-white/8 dark:text-stone-300 dark:hover:border-white/20 dark:hover:text-white"
+      onClick={toggleTheme}
+    >
+      {isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
+    </button>
+  );
+}

web/src/components/top-nav.tsx

@@ -6,6 +6,7 @@ import { Github } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
 
 import webConfig from "@/constants/common-env";
+import { ThemeToggle } from "@/components/theme-toggle";
 import { getValidatedAuthSession } from "@/lib/auth-session";
 import { cn } from "@/lib/utils";
 import { clearStoredAuthSession, type StoredAuthSession } from "@/store/auth";
@@ -65,12 +66,12 @@ export function TopNav() {
   const displayName = session.name.trim() || roleLabel;
 
   return (
-    <header className="border-b border-stone-100/50">
+    <header className="border-b border-stone-100/50 dark:border-white/10">
       <div className="flex min-h-12 flex-col gap-1 px-3 py-2 sm:h-12 sm:flex-row sm:items-center sm:justify-between sm:gap-3 sm:px-6 sm:py-0">
         <div className="flex items-center justify-between gap-2 sm:justify-start sm:gap-3">
           <Link
             href="/image"
-            className="shrink-0 py-1 text-[15px] font-bold tracking-tight text-stone-950 transition hover:text-stone-700"
+            className="shrink-0 py-1 text-[15px] font-bold tracking-tight text-stone-950 transition hover:text-stone-700 dark:text-stone-50 dark:hover:text-white"
           >
             chatgpt2api
           </Link>
@@ -78,15 +79,18 @@ export function TopNav() {
             href="https://github.com/basketikun/chatgpt2api"
             target="_blank"
             rel="noreferrer"
-            className="inline-flex items-center gap-1.5 py-1 text-sm text-stone-400 transition hover:text-stone-700"
+            className="inline-flex items-center gap-1.5 py-1 text-sm text-stone-400 transition hover:text-stone-700 dark:text-stone-500 dark:hover:text-stone-200"
             aria-label="GitHub repository"
           >
             <Github className="size-4" />
             <span className="hidden md:inline">GitHub</span>
           </a>
+          <div className="ml-auto sm:hidden">
+            <ThemeToggle />
+          </div>
           <button
             type="button"
-            className="ml-auto shrink-0 py-1 text-xs text-stone-400 transition hover:text-stone-700 sm:hidden"
+            className="shrink-0 py-1 text-xs text-stone-400 transition hover:text-stone-700 dark:text-stone-500 dark:hover:text-stone-200 sm:hidden"
             onClick={() => void handleLogout()}
           >
             退出
@@ -102,26 +106,27 @@ export function TopNav() {
                 className={cn(
                   "relative shrink-0 whitespace-nowrap rounded-full px-2.5 py-1 text-[13px] font-medium transition sm:rounded-none sm:px-0 sm:text-[15px]",
                   active
-                    ? "bg-stone-950 text-white sm:bg-transparent sm:font-semibold sm:text-stone-950"
-                    : "text-stone-500 hover:text-stone-900",
+                    ? "bg-stone-950 text-white sm:bg-transparent sm:font-semibold sm:text-stone-950 dark:bg-white dark:text-stone-950 dark:sm:bg-transparent dark:sm:text-white"
+                    : "text-stone-500 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100",
                 )}
               >
                 {item.label}
-                {active ? <span className="absolute inset-x-0 -bottom-[1px] hidden h-0.5 bg-stone-950 sm:block" /> : null}
+                {active ? <span className="absolute inset-x-0 -bottom-[1px] hidden h-0.5 bg-stone-950 dark:bg-white sm:block" /> : null}
               </Link>
             );
           })}
         </nav>
         <div className="hidden items-center justify-end gap-2 sm:flex sm:gap-3">
-          <span className="hidden rounded-md bg-stone-100 px-2 py-1 text-[10px] font-medium text-stone-500 sm:inline-block sm:text-[11px]">
+          <ThemeToggle />
+          <span className="hidden rounded-md bg-stone-100 px-2 py-1 text-[10px] font-medium text-stone-500 dark:bg-white/8 dark:text-stone-300 sm:inline-block sm:text-[11px]">
             {roleLabel} · {displayName}
           </span>
-          <span className="hidden rounded-md bg-stone-100 px-2 py-1 text-[10px] font-medium text-stone-500 sm:inline-block sm:text-[11px]">
+          <span className="hidden rounded-md bg-stone-100 px-2 py-1 text-[10px] font-medium text-stone-500 dark:bg-white/8 dark:text-stone-300 sm:inline-block sm:text-[11px]">
             v{webConfig.appVersion}
           </span>
           <button
             type="button"
-            className="py-1 text-xs text-stone-400 transition hover:text-stone-700 sm:text-sm"
+            className="py-1 text-xs text-stone-400 transition hover:text-stone-700 dark:text-stone-500 dark:hover:text-stone-200 sm:text-sm"
             onClick={() => void handleLogout()}
           >
             退出