Henry_Du
c2114f0d82
- **移除 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。
102 lines
2.4 KiB
CSS
102 lines
2.4 KiB
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'],
|
||
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 {
|
||
/* 禁用浏览器默认样式（保留我们自定义的背景色与文字颜色） */
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
/* 在移动端根据主题继承 color-scheme，使原生滚动条/弹出控件正确变深色或浅色 */
|
||
color-scheme: inherit;
|
||
}
|
||
|
||
/* 深色主题下专门修复表单控件与浏览器原生 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;
|
||
}
|
||
}
|
||
|
||
/* 保护按钮外观 */
|
||
button {
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
}
|
||
|
||
/* 保护选中文本颜色 */
|
||
::selection {
|
||
background-color: rgba(79, 70, 229, 0.3);
|
||
color: inherit;
|
||
}
|
||
|
||
::-moz-selection {
|
||
background-color: rgba(79, 70, 229, 0.3);
|
||
color: inherit;
|
||
}
|
||
|
||
/* 保护占位符颜色 */
|
||
::placeholder {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* 高对比度模式下的调整 */
|
||
@media (prefers-contrast: high) {
|
||
input,
|
||
textarea,
|
||
select,
|
||
button {
|
||
border-width: 2px;
|
||
}
|
||
}
|