diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index a08b3f2..28591c9 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -10,16 +10,7 @@
   --app-content-1: #18191c;
   --app-content-2: #61666d;
   --app-content-3: #9499a0;
-}
-
-[data-mode="dark"] {
-  color-scheme: dark;
-  --app-page: #0f1112;
-  --app-surface: #1a1c1e;
-  --app-line: #2c2f31;
-  --app-content-1: #e8eaed;
-  --app-content-2: #a4a9af;
-  --app-content-3: #6f757b;
+  --app-on-primary: #ffffff;
 }
 
 :root,
@@ -47,10 +38,26 @@
   --app-accent: #0284c7;
 }
 
+/* 暗色模式：中性色 + 强制单色白点缀，需位于主题色相块之后以覆盖 */
+[data-mode="dark"] {
+  color-scheme: dark;
+  --app-page: #0f1112;
+  --app-surface: #1a1c1e;
+  --app-line: #2c2f31;
+  --app-content-1: #e8eaed;
+  --app-content-2: #a4a9af;
+  --app-content-3: #6f757b;
+  --app-primary: #ffffff;
+  --app-primary-hover: #d4d4d8;
+  --app-accent: #ffffff;
+  --app-on-primary: #101112;
+}
+
 @theme inline {
   --color-primary: var(--app-primary);
   --color-primary-hover: var(--app-primary-hover);
   --color-accent: var(--app-accent);
+  --color-on-primary: var(--app-on-primary);
   --color-page: var(--app-page);
   --color-surface: var(--app-surface);
   --color-line: var(--app-line);
diff --git a/frontend/src/components/layout/AppHeader.vue b/frontend/src/components/layout/AppHeader.vue
index fbe2f6b..55bdd63 100644
--- a/frontend/src/components/layout/AppHeader.vue
+++ b/frontend/src/components/layout/AppHeader.vue
@@ -11,7 +11,7 @@ const keyword = ref('')
   <header class="fixed inset-x-0 top-0 z-50 h-14 border-b border-line bg-surface">
     <div class="mx-auto flex h-full max-w-[1600px] items-center gap-6 px-4">
       <a href="/" class="flex shrink-0 items-center gap-2 text-xl font-bold text-accent">
-        <span class="grid h-8 w-8 place-items-center rounded-lg bg-accent text-sm font-bold text-white">
+        <span class="grid h-8 w-8 place-items-center rounded-lg bg-accent text-sm font-bold text-on-primary">
           R
         </span>
         <span>Rill</span>
@@ -57,7 +57,7 @@ const keyword = ref('')
 
         <a
           href="#"
-          class="flex h-9 items-center rounded-full bg-primary px-4 text-sm font-medium text-white transition-colors hover:bg-primary-hover"
+          class="flex h-9 items-center rounded-full bg-primary px-4 text-sm font-medium text-on-primary transition-colors hover:bg-primary-hover"
         >
           {{ t('header.login') }}
         </a>
diff --git a/frontend/src/components/layout/ThemeSwitcher.vue b/frontend/src/components/layout/ThemeSwitcher.vue
index 99d6210..934cec1 100644
--- a/frontend/src/components/layout/ThemeSwitcher.vue
+++ b/frontend/src/components/layout/ThemeSwitcher.vue
@@ -46,7 +46,7 @@ const modeOptions = [
         class="rounded-full px-3 py-1 text-xs transition-colors"
         :class="
           themeStore.mode === item.value
-            ? 'bg-primary font-medium text-white'
+            ? 'bg-primary font-medium text-on-primary'
             : 'text-content-2 hover:text-primary'
         "
         @click="themeStore.setMode(item.value)"