fix(theme): 修复移动端深色主题被强锁浅色的问题

- **移除 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。

This commit is contained in:

Henry_Du

2026-09-13 17:09:20 +08:00

parent 37fd18aaea

commit c2114f0d82

2 changed files with 46 additions and 24 deletions

									
										app/assets/css/main.css
									
		+1
		-1
	
												View File
												
				@@ -5,7 +5,7 @@

				@tailwind components;

				@tailwind utilities;

				/* 防止浏览器自动应用深色主题 */

				/* 防止浏览器自动应用深色主题：改为跟随 data-theme 动态覆盖（见 theme-protection.css） */

				:root {

				  color-scheme: light dark;

				}