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:
@@ -5,7 +5,7 @@
|
|||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
/* 防止浏览器自动应用深色主题 */
|
/* 防止浏览器自动应用深色主题:改为跟随 data-theme 动态覆盖(见 theme-protection.css) */
|
||||||
:root {
|
:root {
|
||||||
color-scheme: light dark;
|
color-scheme: light dark;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,12 +1,27 @@
|
|||||||
/* 温和的浏览器主题保护样式 */
|
/* 温和的浏览器主题保护样式 */
|
||||||
/* 只保护关键元素,不干扰正常的CSS */
|
/* 只保护关键元素,不干扰正常的CSS,并且根据 data-theme 动态切换 */
|
||||||
|
|
||||||
/* 全局颜色方案声明 */
|
/* 全局颜色方案声明:移动端优先遵循 data-theme,其次才用系统色 */
|
||||||
:root {
|
:root {
|
||||||
color-scheme: light dark;
|
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='text'],
|
||||||
input[type='email'],
|
input[type='email'],
|
||||||
input[type='password'],
|
input[type='password'],
|
||||||
@@ -17,16 +32,39 @@ input[type='number'],
|
|||||||
input[type='date'],
|
input[type='date'],
|
||||||
input[type='time'],
|
input[type='time'],
|
||||||
input[type='datetime-local'],
|
input[type='datetime-local'],
|
||||||
|
input[type='month'],
|
||||||
|
input[type='week'],
|
||||||
textarea,
|
textarea,
|
||||||
select {
|
select {
|
||||||
/* 禁用浏览器默认样式 */
|
/* 禁用浏览器默认样式(保留我们自定义的背景色与文字颜色) */
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
/* 在移动端根据主题继承 color-scheme,使原生滚动条/弹出控件正确变深色或浅色 */
|
||||||
|
color-scheme: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
/* 禁用浏览器的颜色方案自动调整 */
|
/* 深色主题下专门修复表单控件与浏览器原生 UI 的颜色方案 */
|
||||||
color-scheme: none;
|
@media (prefers-color-scheme: dark) {
|
||||||
-webkit-color-scheme: none;
|
: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;
|
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) {
|
@media (prefers-contrast: high) {
|
||||||
input,
|
input,
|
||||||
|
|||||||
Reference in New Issue
Block a user