diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 69b6bb1..505427d 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -5,7 +5,7 @@
 @tailwind components;
 @tailwind utilities;
 
-/* 防止浏览器自动应用深色主题 */
+/* 防止浏览器自动应用深色主题：改为跟随 data-theme 动态覆盖（见 theme-protection.css） */
 :root {
   color-scheme: light dark;
 }
diff --git a/app/assets/css/theme-protection.css b/app/assets/css/theme-protection.css
index 238230b..d009d9a 100644
--- a/app/assets/css/theme-protection.css
+++ b/app/assets/css/theme-protection.css
@@ -1,12 +1,27 @@
 /* 温和的浏览器主题保护样式 */
-/* 只保护关键元素，不干扰正常的CSS */
+/* 只保护关键元素，不干扰正常的CSS，并且根据 data-theme 动态切换 */
 
-/* 全局颜色方案声明 */
+/* 全局颜色方案声明：移动端优先遵循 data-theme，其次才用系统色 */
 :root {
   color-scheme: light dark;
 }
 
-/* 只保护表单元素的外观 */
+/* 深色主题时，显式声明 color-scheme = dark，解决 iOS / Chrome 移动端原生控件浅色的问题 */
+:root[data-theme='dark'],
+:root[data-theme='MidnightDark'],
+:root[data-theme='ModernDark'],
+:root[data-theme='ClassicDark'] {
+  color-scheme: dark;
+}
+
+/* 浅色主题时，显式声明 color-scheme = light */
+:root[data-theme='light'],
+:root[data-theme='ClassicLight'],
+:root[data-theme='ModernLight'] {
+  color-scheme: light;
+}
+
+/* 保护表单元素外观，但不强锁 color-scheme = none（none 会导致控件 fallback 到浅色） */
 input[type='text'],
 input[type='email'],
 input[type='password'],
@@ -17,16 +32,39 @@ input[type='number'],
 input[type='date'],
 input[type='time'],
 input[type='datetime-local'],
+input[type='month'],
+input[type='week'],
 textarea,
 select {
-  /* 禁用浏览器默认样式 */
+  /* 禁用浏览器默认样式（保留我们自定义的背景色与文字颜色） */
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  /* 在移动端根据主题继承 color-scheme，使原生滚动条/弹出控件正确变深色或浅色 */
+  color-scheme: inherit;
+}
 
-  /* 禁用浏览器的颜色方案自动调整 */
-  color-scheme: none;
-  -webkit-color-scheme: none;
+/* 深色主题下专门修复表单控件与浏览器原生 UI 的颜色方案 */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']):not([data-theme='ClassicLight']):not([data-theme='ModernLight']) {
+    color-scheme: dark;
+  }
+  input[type='text'],
+  input[type='email'],
+  input[type='password'],
+  input[type='search'],
+  input[type='url'],
+  input[type='tel'],
+  input[type='number'],
+  input[type='date'],
+  input[type='time'],
+  input[type='datetime-local'],
+  input[type='month'],
+  input[type='week'],
+  textarea,
+  select {
+    color-scheme: dark;
+  }
 }
 
 /* 保护按钮外观 */
@@ -52,22 +90,6 @@ button {
   opacity: 0.6;
 }
 
-/* 在深色模式偏好下保护表单元素 */
-@media (prefers-color-scheme: dark) {
-  input[type='text'],
-  input[type='email'],
-  input[type='password'],
-  input[type='search'],
-  input[type='url'],
-  input[type='tel'],
-  input[type='number'],
-  textarea,
-  select {
-    color-scheme: none;
-    -webkit-color-scheme: none;
-  }
-}
-
 /* 高对比度模式下的调整 */
 @media (prefers-contrast: high) {
   input,