From c2114f0d8239e162bf1a8fa6e1d086c944f1db69 Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Sun, 13 Sep 2026 17:09:20 +0800
Subject: [PATCH] =?UTF-8?q?fix(theme):=20=E4=BF=AE=E5=A4=8D=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E6=B7=B1=E8=89=B2=E4=B8=BB=E9=A2=98=E8=A2=AB?=
 =?UTF-8?q?=E5=BC=BA=E9=94=81=E6=B5=85=E8=89=B2=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- **移除 color-scheme: none**：`theme-protection.css` 之前对表单元素设置 `color-scheme: none`，会让 iOS/Chrome 等移动端浏览器在深色主题下仍将原生控件（滚动条、日期弹层、select 弹层、输入光标）渲染为浅色，造成"移动端都是浅色"的错觉。
- **按 data-theme 动态声明 color-scheme**：当 `data-theme` 结尾为 Dark 或等于 `dark` 时显式声明 `color-scheme: dark`，结尾为 Light 或等于 `light` 时声明 `color-scheme: light`，让浏览器的原生 UI 组件（包括表单弹层、滚动条、状态栏颜色）与我们的主题保持一致。
- **补充表单控件的深色 prefers-color-scheme 兜底**：在 `@media (prefers-color-scheme: dark)` 且未显式选择浅色主题时，同样把 color-scheme 锁为 dark，避免首次渲染闪烁。
- **修正 useTheme 中表单控件的 color-scheme 继承**：表单元素使用 `color-scheme: inherit`，从 :root 继承生效的 color-scheme，而不再强锁 none。
---
 app/assets/css/main.css             |  2 +-
 app/assets/css/theme-protection.css | 68 +++++++++++++++++++----------
 2 files changed, 46 insertions(+), 24 deletions(-)

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,