Henry_Du
e8eada885a
- variables.css: 新增 body[data-frontend]:not(.admin-body) 作用域浅色系变量 包含 --accent-purple/pink/blue 三色花点缀色，圆角上限 8px 硬边设计 - theme-protection.css: 前台页面及表单控件强制 color-scheme: light - default.vue: onMounted 时为 body 注入 data-frontend=true 标记 - dashboard.vue: 根容器添加 admin-body class，阻断前台浅色变量污染
111 lines
2.8 KiB
CSS
111 lines
2.8 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（防止系统深色干扰）===== */
|
||
body[data-frontend="true"]:not(.admin-body),
|
||
body[data-frontend="true"]:not(.admin-body) input,
|
||
body[data-frontend="true"]:not(.admin-body) textarea,
|
||
body[data-frontend="true"]:not(.admin-body) select,
|
||
body[data-frontend="true"]:not(.admin-body) button {
|
||
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;
|
||
}
|
||
}
|