From e71baad55418099a3958fb3adbe40930087d0a30 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Thu, 11 Jun 2026 00:11:08 +0800
Subject: [PATCH] Fix taiji fish eyes and expose theme toggle on mobile.

Correct yin-yang eye colors with contrast strokes, and show light/dark switch in mobile header with Chinese labels.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/header.tsx      | 14 ++++++++------
 components/mode-toggle.tsx | 24 +++++++++++++++---------
 components/svg/taiji.tsx   | 30 ++++++++++++++++++++++++++----
 3 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/components/header.tsx b/components/header.tsx
index 3ba8d88..44ea84d 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -36,19 +36,21 @@ function NavLink({ href, label }: { href: string; label: string }) {
 export default function Header() {
   return (
     <header className="relative z-10 border-b border-border/40 bg-card/70 py-3 shadow-sm backdrop-blur-md">
-      <div className={`${APP_CONTAINER} flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between`}>
-        <Link href="/" className="flex items-center justify-center gap-2 sm:justify-start">
+      <div
+        className={`${APP_CONTAINER} grid grid-cols-[1fr_auto] items-center gap-y-2 sm:flex sm:justify-between`}
+      >
+        <Link href="/" className="flex items-center gap-2">
           <TaijiIcon />
           <span className="font-medium tracking-wide">知命阁</span>
         </Link>
-        <nav className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
+        <div className="justify-self-end sm:order-last">
+          <ModeToggle />
+        </div>
+        <nav className="col-span-2 flex flex-wrap items-center justify-center gap-x-4 gap-y-1 sm:order-none sm:col-span-1 sm:flex-1">
           {NAV_ITEMS.map((item) => (
             <NavLink key={item.href} {...item} />
           ))}
         </nav>
-        <div className="flex justify-center sm:justify-end">
-          <ModeToggle />
-        </div>
       </div>
     </header>
   );
diff --git a/components/mode-toggle.tsx b/components/mode-toggle.tsx
index 8b5df69..110f938 100644
--- a/components/mode-toggle.tsx
+++ b/components/mode-toggle.tsx
@@ -17,22 +17,28 @@ export function ModeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="sm" className="hidden sm:block">
-          <Sun size={22} strokeWidth={1.5} className="dark:hidden" />
-          <MoonStar size={22} strokeWidth={1.5} className="hidden dark:block" />
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-9 w-9 shrink-0"
+          aria-label="切换亮色 / 暗色"
+        >
+          <Sun size={20} strokeWidth={1.5} className="dark:hidden" />
+          <MoonStar size={20} strokeWidth={1.5} className="hidden dark:block" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start">
+      <DropdownMenuContent align="end">
         <DropdownMenuItem onClick={() => setTheme("light")}>
-          <Sun size={20} strokeWidth={1.5} className="mr-2" />
-          Light
+          <Sun size={18} strokeWidth={1.5} className="mr-2" />
+          亮色
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme("dark")}>
-          <MoonStar size={20} strokeWidth={1.5} className="mr-2" />
-          Dark
+          <MoonStar size={18} strokeWidth={1.5} className="mr-2" />
+          暗色
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme("system")}>
-          <Laptop2 size={20} strokeWidth={1.5} className="mr-2" /> System
+          <Laptop2 size={18} strokeWidth={1.5} className="mr-2" />
+          跟随系统
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
diff --git a/components/svg/taiji.tsx b/components/svg/taiji.tsx
index 755f5e0..ef31248 100644
--- a/components/svg/taiji.tsx
+++ b/components/svg/taiji.tsx
@@ -24,8 +24,20 @@ export const TaijiIcon = React.memo(function TaijiIcon({
         d="M32 2a30 30 0 0 1 0 60 15 15 0 0 1 0-30 15 15 0 0 0 0-30z"
         className="fill-stone-800 dark:fill-stone-900"
       />
-      <circle cx="32" cy="17" r="5" className="fill-white dark:fill-stone-200" />
-      <circle cx="32" cy="47" r="5" className="fill-stone-800 dark:fill-stone-900" />
+      {/* 阳中有阴 — 鱼眼在阳面，填深色 */}
+      <circle
+        cx="32"
+        cy="17"
+        r="5"
+        className="fill-stone-800 stroke-white stroke-[0.75] dark:fill-stone-900 dark:stroke-stone-200"
+      />
+      {/* 阴中有阳 — 鱼眼在阴面，填浅色 */}
+      <circle
+        cx="32"
+        cy="47"
+        r="5"
+        className="fill-white stroke-stone-800 stroke-[0.75] dark:fill-stone-200 dark:stroke-stone-900"
+      />
     </svg>
   );
 });
@@ -59,8 +71,18 @@ export function TaijiWatermark({
         d="M100 2a98 98 0 0 1 0 196 49 49 0 0 1 0-98 49 49 0 0 0 0-98z"
         className="fill-stone-600/10 dark:fill-stone-300/12"
       />
-      <circle cx="100" cy="51" r="10" className="fill-white/60 dark:fill-stone-200/20" />
-      <circle cx="100" cy="149" r="10" className="fill-stone-600/15 dark:fill-stone-300/20" />
+      <circle
+        cx="100"
+        cy="51"
+        r="10"
+        className="fill-stone-600/25 stroke-white/50 stroke-[0.5] dark:fill-stone-400/20 dark:stroke-stone-200/30"
+      />
+      <circle
+        cx="100"
+        cy="149"
+        r="10"
+        className="fill-white/50 stroke-stone-600/20 stroke-[0.5] dark:fill-stone-200/25 dark:stroke-stone-900/30"
+      />
     </svg>
   );
 }