diff --git a/src/components/providers/ProviderNav/ProviderNav.module.scss b/src/components/providers/ProviderNav/ProviderNav.module.scss
index 8722f2e..ef062b4 100644
--- a/src/components/providers/ProviderNav/ProviderNav.module.scss
+++ b/src/components/providers/ProviderNav/ProviderNav.module.scss
@@ -73,7 +73,7 @@
   flex: 0 0 auto;
 
   &:hover {
-    background: rgba(0, 0, 0, 0.06);
+    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
     transform: scale(1.08);
   }
 
@@ -109,12 +109,6 @@
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
   }
 
-  .navItem {
-    &:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
-  }
-
   .indicator {
     background: rgba($primary-color, 0.28);
   }
diff --git a/src/pages/ConfigPage.module.scss b/src/pages/ConfigPage.module.scss
index e1f610a..07faf18 100644
--- a/src/pages/ConfigPage.module.scss
+++ b/src/pages/ConfigPage.module.scss
@@ -331,12 +331,12 @@
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
-  background: rgba(255, 255, 255, 0.7);
+  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
   border-radius: 999px;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-lg);
   max-width: inherit;
   overflow-x: auto;
   scrollbar-width: none;
@@ -351,7 +351,7 @@
   font-weight: 600;
   padding: 5px 8px;
   border-radius: 999px;
-  background: rgba(0, 0, 0, 0.06);
+  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
   text-align: center;
   max-width: min(280px, 46vw);
   white-space: nowrap;
@@ -373,7 +373,7 @@
   transition: background-color 0.2s ease, transform 0.15s ease;
 
   &:hover:not(:disabled) {
-    background: rgba(0, 0, 0, 0.06);
+    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
     transform: scale(1.08);
   }
 
@@ -399,24 +399,6 @@
   box-shadow: 0 0 0 2px rgba($warning-color, 0.25);
 }
 
-:global([data-theme='dark']) {
-  .floatingActionList {
-    background: rgba(30, 30, 30, 0.7);
-    border-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
-  }
-
-  .floatingStatus {
-    background: rgba(255, 255, 255, 0.08);
-  }
-
-  .floatingActionButton {
-    &:hover:not(:disabled) {
-      background: rgba(255, 255, 255, 0.1);
-    }
-  }
-}
-
 @media (max-width: 1200px) {
   .floatingActionContainer {
     bottom: calc(12px + env(safe-area-inset-bottom));
diff --git a/src/pages/UsagePage.module.scss b/src/pages/UsagePage.module.scss
index 8b973e1..ea3756d 100644
--- a/src/pages/UsagePage.module.scss
+++ b/src/pages/UsagePage.module.scss
@@ -175,10 +175,6 @@
   -webkit-backdrop-filter: blur(6px);
 }
 
-:global([data-theme='dark']) .loadingOverlay {
-  background: rgba(25, 25, 25, 0.72);
-}
-
 .loadingOverlayContent {
   display: inline-flex;
   align-items: center;
diff --git a/src/styles/components.scss b/src/styles/components.scss
index 5f657d5..105690e 100644
--- a/src/styles/components.scss
+++ b/src/styles/components.scss
@@ -17,7 +17,7 @@
 
   &.btn-primary {
     background-color: var(--primary-color);
-    color: #fff;
+    color: var(--primary-contrast, #fff);
     border-color: var(--primary-color);
 
     &:hover {
@@ -32,6 +32,7 @@
     color: var(--text-primary);
 
     &:hover {
+      background-color: var(--bg-hover, var(--bg-tertiary));
       border-color: var(--border-hover);
     }
   }
@@ -43,7 +44,7 @@
 
     &:hover {
       color: var(--text-primary);
-      background: var(--bg-secondary);
+      background: var(--bg-tertiary);
     }
   }
 
@@ -72,6 +73,17 @@
   }
 }
 
+:global([data-theme='dark']) {
+  .btn {
+    color: #fff;
+  }
+
+  .btn.btn-secondary,
+  .btn.btn-ghost {
+    color: #fff;
+  }
+}
+
 .input,
 textarea {
   width: 100%;
@@ -324,6 +336,7 @@ textarea {
 }
 
 .loading-spinner {
+  // Fallback: legacy white spinner (in case color-mix is unsupported)
   border: 3px solid rgba(255, 255, 255, 0.2);
   border-top-color: #fff;
   border-radius: 50%;
@@ -332,6 +345,13 @@ textarea {
   animation: spin 0.8s linear infinite;
 }
 
+@supports (color: color-mix(in srgb, currentColor 22%, transparent)) {
+  .loading-spinner {
+    border-color: color-mix(in srgb, currentColor 22%, transparent);
+    border-top-color: currentColor;
+  }
+}
+
 @keyframes spin {
   from {
     transform: rotate(0deg);
diff --git a/src/styles/themes.scss b/src/styles/themes.scss
index b8ae5de..1410ed2 100644
--- a/src/styles/themes.scss
+++ b/src/styles/themes.scss
@@ -26,6 +26,7 @@
   --primary-color: #8b8680; // 行动色（主色）
   --primary-hover: #7f7a74;
   --primary-active: #726d67;
+  --primary-contrast: #ffffff;
 
   --success-color: #10b981;
   --warning-color: #c65746; // 错误/警告色
@@ -57,27 +58,29 @@
 
 // 深色主题（#191919）
 [data-theme='dark'] {
-  --bg-primary: #202020;
-  --bg-secondary: #191919;
-  --bg-tertiary: #262626;
-  --bg-hover: #2a2a2a;
-  --bg-quinary: #1f1f1f;
+  // 极简暖灰：深色模式（提升对比度与层级）
+  --bg-secondary: #151412; // 页面背景
+  --bg-primary: #1d1b18; // 容器/卡片背景
+  --bg-tertiary: #262320; // hover/次级背景
+  --bg-hover: #2e2a26;
+  --bg-quinary: #191714;
   --bg-error-light: rgba(198, 87, 70, 0.18);
 
-  --text-primary: #fafafa;
-  --text-secondary: #a3a3a3;
-  --text-tertiary: #737373;
-  --text-quaternary: #525252;
+  --text-primary: #f6f4f1;
+  --text-secondary: #c9c3bb;
+  --text-tertiary: #9c958d;
+  --text-quaternary: #6f6962;
   --text-muted: var(--text-tertiary);
 
-  --border-color: #262626;
+  --border-color: #3a3530;
   --border-secondary: var(--border-color);
-  --border-primary: #404040;
-  --border-hover: #4a4a4a;
+  --border-primary: #4a453f;
+  --border-hover: #5a544d;
 
   --primary-color: #8b8680;
-  --primary-hover: #a39e98;
-  --primary-active: #bcb7b1;
+  --primary-hover: #9a948e;
+  --primary-active: #a6a099;
+  --primary-contrast: #ffffff;
 
   --success-color: #10b981;
   --warning-color: #c65746;
@@ -87,7 +90,7 @@
 
   --warning-bg: rgba(198, 87, 70, 0.22);
   --warning-border: rgba(198, 87, 70, 0.45);
-  --warning-text: var(--warning-color);
+  --warning-text: #f1b0a6;
 
   --success-badge-bg: rgba(6, 78, 59, 0.3);
   --success-badge-text: #6ee7b7;