feat(style): 前台强制切换浅色主题,保护后台管理页暗色

- 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,阻断前台浅色变量污染
This commit is contained in:
2026-09-13 18:26:25 +08:00
parent c2114f0d82
commit e8eada885a
4 changed files with 128 additions and 2 deletions
+9
View File
@@ -21,6 +21,15 @@
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'],