| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- ---
- description: 多主题隔离规范——新增主题不得影响已有主题样式
- alwaysApply: true
- ---
- # Theme Rules
- ## 核心原则
- 新增或修改某一主题时，**不得改变其他已有主题的视觉效果**。尤其 **`tech-blue` 已验收样式禁止被动改动**。
- ## 现有主题
- - 业务浅色主题：`green`、`light`、`blue`、`dark`（变量在 `src/themes/*.scss`，共用 `src/styles/legacy-theme.scss` 的 `html:not([data-theme="tech-blue"])` 布局）
- - 科技蓝大屏：`tech-blue`（变量在 `src/themes/tech-blue.scss`，全局覆盖在 `src/styles/tech-theme.scss`）
- ## 新增主题时必须
- 1. **新建** `src/themes/<新主题名>.scss`，只定义该主题的 `:root` CSS 变量；**不要**在已有主题文件中追加或改写变量。
- 2. 页面/模块级差异样式用 **`html[data-theme="<新主题名>"]`** 包裹；禁止用无主题前缀的全局选择器覆盖 Element UI 或业务页。
- 3. 驾驶舱等多主题 SCSS（如 `cockpit-dashboard.scss`）**追加**新主题块，**不要**修改 `html[data-theme="tech-blue"]` 或 `html:not([data-theme="tech-blue"])` 已有规则来“顺便适配”新主题。
- 4. 组件内样式优先 **`var(--xxx)` + 主题变量**；禁止写死 `#001529`、`#000c17`、`color: #ffffff` 等科技蓝常量作为默认 fallback。
- 5. 若新主题与 `green/light/blue/dark` 布局一致，只改 `--primary-color` 等变量即可；**不要**改 `legacy-theme.scss` 里影响全部非科技蓝主题的共用规则，除非用户明确要求统一调整。
- ## 禁止做法
- ```scss
- /* ❌ 为适配新主题而改 tech-blue 已有块 */
- html[data-theme="tech-blue"] .cockpit-panel { background: ... }
- /* ❌ 新主题样式泄漏到所有非科技蓝主题 */
- html:not([data-theme="tech-blue"]) .some-page { --primary-color: #ff0000; }
- /* ❌ 组件 scoped 写死深色，导致绿/黄/蓝/灰主题无法切换 */
- .page { background: #000c17; color: #ffffff; }
- ```
- ## 推荐做法
- ```scss
- /* ✅ 新主题独立文件 */
- :root {
- --primary-color: #336699;
- --content-bg: #f5f7fa;
- }
- /* ✅ 仅新主题生效的模块样式 */
- html[data-theme="ocean"] .wind-resource-wake-page { ... }
- /* ✅ 组件用变量，fallback 指向浅色业务默认 */
- .page {
- background: var(--content-bg, #f5f7fa);
- color: var(--text-cyan, #303133);
- }
- ```
- ## 修改前自检
- - [ ] 是否只动了新主题文件或带 `data-theme="<新主题>"` 的选择器？
- - [ ] `tech-blue`、`green` 等已有主题页面是否未被间接修改？
- - [ ] 是否避免在 `legacy-theme.scss` / `tech-theme.scss` 做与新主题无关的 diff？
|
