1024XEngineer · xiaocheny214 · Sep 8, 2026 · Sep 8, 2026 · Sep 8, 2026 · Sep 8, 2026
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,6 +2,7 @@
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
+    <meta name="color-scheme" content="light dark" />
     <link rel="icon" type="image/svg+xml" href="/windup-mark.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta

diff --git a/frontend/public/windup-mark.svg b/frontend/public/windup-mark.svg
diff --git a/frontend/src/app/layout/index.tsx b/frontend/src/app/layout/index.tsx
@@ -40,7 +40,7 @@ export function AppShell({ children }: AppShellProps) {
 /** 公开页面外壳只提供认证面板与会话提醒，宣传导航由 LandingPage 自己组合。 */
 export function MarketingShell({ children }: AppShellProps) {
   return (
-    <div className="min-h-[100dvh] overflow-x-clip bg-[#f6f8f3] text-[#1d2920]">
+    <div className="min-h-[100dvh] overflow-x-clip bg-paper text-ink">
       <RouteMotionSurface>{children}</RouteMotionSurface>
       <AccountPanel />
       <SessionExpiredNotice />

diff --git a/frontend/src/app/playtest-export-page.tsx b/frontend/src/app/playtest-export-page.tsx
@@ -20,7 +20,7 @@ const renderToolbar: NonNullable<PlaytestPageProps['renderToolbar']> = ({
       <ExportButton
         model={model}
         enableCocosExport
-        className="border-[#294433] bg-[#294433] text-white hover:bg-[#203828]"
+        className="border-app-accent bg-app-accent text-app-on-accent hover:bg-app-accent-hover"
       />
     )
   } catch {

diff --git a/frontend/src/features/account-panel/account-panel.css b/frontend/src/features/account-panel/account-panel.css
@@ -1,11 +1,11 @@
 .auth-screen {
-  --auth-ink: #282721;
-  --auth-muted: #6f6d65;
-  --auth-line: #cfcdc4;
-  --auth-paper: #f4f1e9;
-  --auth-control-surface: #fbfaf6;
-  --auth-control-surface-focus: #fff;
-  --auth-description: #68665f;
+  --auth-ink: light-dark(#282721, #e8e8e8);
+  --auth-muted: light-dark(#6f6d65, #adadad);
+  --auth-line: light-dark(#cfcdc4, #404040);
+  --auth-paper: light-dark(#f4f1e9, #242424);
+  --auth-control-surface: light-dark(#fbfaf6, #2d2d2d);
+  --auth-control-surface-focus: light-dark(#fff, #383838);
+  --auth-description: light-dark(#68665f, #adadad);
   --auth-motion-fast: 120ms;
   --auth-motion-default: 220ms;
   --auth-motion-slow: 360ms;
@@ -73,7 +73,7 @@
 .auth-screen-close:hover {
   border-color: var(--auth-line);
   color: var(--auth-ink);
-  background: rgb(255 255 255 / 72%);
+  background: light-dark(rgb(255 255 255 / 72%), rgb(56 56 56 / 72%));
   transform: rotate(4deg) scale(1.04);
 }
 
@@ -103,7 +103,7 @@
 .auth-screen-entry-switch button:focus-visible,
 .auth-password-field button:focus-visible,
 .auth-register-back:focus-visible {
-  outline: 2px solid #1b1b19;
+  outline: 2px solid light-dark(#1b1b19, #d7d7d7);
   outline-offset: 3px;
 }
 
@@ -209,7 +209,7 @@
 
 .auth-register-fields .auth-screen-label {
   gap: 0;
-  color: #302f2a;
+  color: light-dark(#302f2a, #cecece);
   font-weight: 500;
 }
 
@@ -232,7 +232,7 @@
   grid-template-columns: 3.75rem minmax(0, 1fr);
   align-items: stretch;
   overflow: hidden;
-  border: 1px solid #c8c6bc;
+  border: 1px solid light-dark(#c8c6bc, #606060);
   border-radius: 0.625rem;
   background: var(--auth-control-surface);
   transform: translateZ(0);
@@ -244,8 +244,8 @@
 }
 
 .auth-register-field-shell:focus-within {
-  border-color: #3c3b35;
-  box-shadow: 0 0 0 3px rgb(40 39 33 / 7%);
+  border-color: light-dark(#3c3b35, #d7d7d7);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-ink) 7%, transparent);
   background: var(--auth-control-surface-focus);
   transform: translateY(-2px);
 }
@@ -255,7 +255,7 @@
   justify-self: center;
   width: 1.25rem;
   height: 1.25rem;
-  color: #69675f;
+  color: light-dark(#69675f, #adadad);
   stroke-width: 1.35;
   transform-origin: center;
   transition:
@@ -265,7 +265,7 @@
 }
 
 .auth-register-field-shell:focus-within > svg {
-  color: #292821;
+  color: light-dark(#292821, #e8e8e8);
   transform: scale(1.08) rotate(-3deg);
 }
 
@@ -292,7 +292,7 @@
   height: 2.75rem;
   place-self: center;
   place-items: center;
-  color: #6c6961;
+  color: light-dark(#6c6961, #adadad);
   transition:
     color var(--auth-motion-fast) var(--auth-ease-enter),
     transform var(--auth-motion-fast) var(--auth-ease-enter);
@@ -328,7 +328,7 @@
   place-items: center;
   border: 0;
   border-radius: 50%;
-  color: #65635b;
+  color: light-dark(#65635b, #adadad);
   background: transparent;
   transition:
     color var(--auth-motion-fast) var(--auth-ease-enter),
@@ -339,7 +339,7 @@
 
 .auth-register-back:hover {
   color: var(--auth-ink);
-  background: rgb(40 39 33 / 6%);
+  background: color-mix(in srgb, var(--auth-ink) 6%, transparent);
   transform: translateX(-3px);
 }
 
@@ -369,11 +369,11 @@
 }
 
 .auth-register-fields .auth-screen-toast-error {
-  color: #873f37;
+  color: light-dark(#873f37, #e4ab94);
 }
 
 .auth-register-fields .auth-screen-toast-success {
-  color: #55554f;
+  color: light-dark(#55554f, #b6b6b6);
 }
 
 .auth-screen-helper,
@@ -430,7 +430,7 @@
   min-height: 4.25rem;
   border: 0;
   border-radius: 0;
-  color: #2b2a25;
+  color: light-dark(#2b2a25, #e8e8e8);
   background: var(--auth-control-surface);
   box-shadow: none;
   font-size: 0.9375rem;
@@ -439,7 +439,7 @@
 }
 
 .auth-screen-field::placeholder {
-  color: #7b7971;
+  color: light-dark(#7b7971, #9d9d9d);
   opacity: 1;
 }
 
@@ -459,9 +459,9 @@
   place-items: center;
   padding-inline: 0.75rem;
   border: 0;
-  border-left: 1px solid #d8d5cb;
+  border-left: 1px solid light-dark(#d8d5cb, #404040);
   border-radius: 0;
-  color: #45433d;
+  color: light-dark(#45433d, #cecece);
   background: var(--auth-control-surface);
   font-size: 0.8125rem;
   font-weight: 500;
@@ -473,7 +473,7 @@
 }
 
 .auth-screen-code-action:hover:not(:disabled) {
-  background: #f9f9f6;
+  background: light-dark(#f9f9f6, #383838);
   transform: translateY(-1px);
 }
 
@@ -495,7 +495,7 @@
 .auth-screen-entry-switch a,
 .auth-screen-entry-switch button {
   flex-shrink: 0;
-  color: #34332e;
+  color: light-dark(#34332e, #cecece);
   font-weight: 500;
   text-decoration: underline;
   text-decoration-thickness: 1px;
@@ -511,9 +511,10 @@
   overflow: hidden;
   min-height: 3.75rem;
   margin-top: 0;
-  border: 1px solid #282721;
+  border: 1px solid light-dark(#282721, #e8e8e8);
   border-radius: 0.375rem;
-  background: #282721;
+  background: light-dark(#282721, #e8e8e8);
+  color: light-dark(#fff, #202020);
   font-size: 0.9375rem;
   font-weight: 500;
   transition:
@@ -523,7 +524,7 @@
 }
 
 .auth-screen-submit:hover:not(:disabled) {
-  background: #393832;
+  background: light-dark(#393832, #eeeeee);
   transform: translateY(-1px);
 }
 
@@ -548,13 +549,13 @@
 
 .auth-screen-entry-switch {
   margin-top: 1.5rem;
-  color: #747169;
+  color: light-dark(#747169, #adadad);
   font-size: 0.875rem;
 }
 
 .auth-screen-entry-switch a:hover,
 .auth-screen-entry-switch button:hover {
-  color: #000;
+  color: light-dark(#000, #e8e8e8);
   text-underline-offset: 0.3em;
   transform: translateY(-1px);
 }
@@ -825,15 +826,15 @@
 }
 
 .auth-screen-toast-success {
-  border-color: #cfcfc9;
-  color: #33332f;
-  background: rgb(255 255 255 / 88%);
+  border-color: light-dark(#cfcfc9, #404040);
+  color: light-dark(#33332f, #cecece);
+  background: light-dark(rgb(255 255 255 / 88%), rgb(45 45 45 / 88%));
 }
 
 .auth-screen-toast-error {
   border-color: rgb(154 71 62 / 26%);
-  color: #883c34;
-  background: rgb(255 245 243 / 96%);
+  color: light-dark(#883c34, #e4ab94);
+  background: light-dark(rgb(255 245 243 / 96%), rgb(55 40 34 / 96%));
 }
 
 @media (max-width: 540px) {

diff --git a/frontend/src/features/account-panel/index.tsx b/frontend/src/features/account-panel/index.tsx
@@ -686,7 +686,7 @@ function AccountPanelDialog({
           onClick={close}
           disabled={isExiting}
           aria-label="关闭账号面板"
-          className="auth-screen-close fixed z-[3] grid size-11 place-items-center rounded-full border border-transparent text-2xl leading-none text-[#777770]"
+          className="auth-screen-close fixed z-[3] grid size-11 place-items-center rounded-full border border-transparent text-2xl leading-none text-app-muted"
         >
           <X {...AUTH_ICON_PROPS} />
         </button>
@@ -814,7 +814,7 @@ function AccountPanelDialog({
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="auth-screen-submit px-4 text-white disabled:cursor-not-allowed"
+                className="auth-screen-submit px-4 disabled:cursor-not-allowed"
               >
                 {isSubmitting ? '正在设置…' : '设置密码'}
               </button>
@@ -906,7 +906,7 @@ function AccountPanelDialog({
               <button
                 type="submit"
                 disabled={isSubmitting || isSendingCode}
-                className="auth-screen-submit px-4 text-white disabled:cursor-not-allowed"
+                className="auth-screen-submit px-4 disabled:cursor-not-allowed"
               >
                 {isSubmitting ? '正在重置…' : '重置密码'}
               </button>
@@ -1079,7 +1079,7 @@ function AccountPanelDialog({
               <button
                 type="submit"
                 disabled={isSubmitting || isSendingCode}
-                className="auth-screen-submit px-4 text-white disabled:cursor-not-allowed"
+                className="auth-screen-submit px-4 disabled:cursor-not-allowed"
               >
                 <span key={submitContent} className="auth-submit-label">
                   {Array.from(submitContent).map((character, index) => (

diff --git a/frontend/src/features/auth-guard/index.tsx b/frontend/src/features/auth-guard/index.tsx
@@ -41,13 +41,13 @@ export function SessionExpiredNotice() {
   return (
     <aside
       role="alert"
-      className="fixed right-4 bottom-4 z-[80] flex max-w-[min(24rem,calc(100vw-2rem))] items-center gap-3 rounded-xl border border-[#8a5a4d]/25 bg-[#fff8f4] px-4 py-3 text-sm text-[#6f352b] shadow-[0_14px_36px_rgba(46,30,24,0.18)]"
+      className="fixed right-4 bottom-4 z-[80] flex max-w-[min(24rem,calc(100vw-2rem))] items-center gap-3 rounded-xl border border-[light-dark(#8a5a4d,#c9a494)]/25 bg-[light-dark(#fff8f4,#372822)] px-4 py-3 text-sm text-[light-dark(#6f352b,#e4ab94)] shadow-[0_14px_36px_rgba(46,30,24,0.18)]"
     >
       <span className="leading-5">登录状态已过期，请重新登录。</span>
       {!accountPanelOpen && (
         <Link
           to={`/?${accountSearch}`}
-          className="inline-flex min-h-11 shrink-0 items-center rounded-lg px-2 font-semibold text-[#284331] underline decoration-[#78927e] underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331]"
+          className="inline-flex min-h-11 shrink-0 items-center rounded-lg px-2 font-semibold text-app-accent underline decoration-app-line-strong underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
         >
           重新登录
         </Link>