# 9.14 样式与主题定制

:::tip 概述
样式体系基于 Element Plus CSS 变量 + styles/ 全局覆盖：主题色、暗黑模式、水印、动画等经 designSetting/projectSetting 在线配置。定制优先走变量覆盖而非逐组件覆盖。
:::

## 样式目录（src/styles/）

```text
styles/
├── index.less / index.scss     入口样式
├── variables.*                 SCSS/Less 变量
├── element/                    Element Plus 变量覆盖
├── public/                     公共样式
└── ...
```

main.ts 引入顺序：Element Plus 样式 → 变量覆盖 → 全局样式（覆盖生效）。

## 主题定制机制

```text
Element Plus 暴露 CSS 变量（--el-color-primary 等）：
  styles/ 覆盖变量根值 → 全组件生效

运行时主题切换（designSetting store）：
  主题色在线更换 → 动态更新 CSS 变量 / 主题类名
  暗黑模式：html 挂 dark 类 → Element Plus dark 变量集
  灰度/色弱：filter 类名
```

## designSetting / projectSetting（settings/）

| 设置 | 内容 |
|------|------|
| designSetting.ts | 主题色、水印开关与文案、灰度/色弱、布局宽度等 |
| projectSetting.ts | 布局模式（侧栏/顶部）、标签页开关、面包屑、水印等 |
| componentSetting.ts | 组件默认（分页 sizes 等） |
| animateSetting.ts | 页面动画 |

在线配置经对应 store 持久化——用户偏好跨会话保留。

## 水印

```text
designSetting 开关 + 文案 → 布局层渲染水印（canvas/css）
用于截图防泄密/内部标识场景
```

## 页面样式规约

```text
1. 优先用 Element Plus 组件与 CSS 变量（勿直接写死颜色值）
2. 页面 scoped 样式（<style scoped>）；跨页公共样式进 styles/public
3. 主题相关颜色用 var(--el-color-*)（随主题切换自动适配）
4. 少用 deep 选择器覆盖（Element 升级易碎）；确需覆盖集中在 element/ 目录
5. 响应式：布局层已处理侧栏折叠；页面内部栅格用 el-row/el-col
6. lint：stylelint 检查样式规范（pnpm lint:stylelint）
```

## 定制品牌色流程

```text
1. styles/element 覆盖 --el-color-primary 及其 light-3/5/7/8/9 派生
2. 或 designSetting 默认主题色配置（运行时切换）
3. 图表（echarts）色板同步调整（dashboard 组件色值）
4. 图标/logo 替换（assets + 登录页/logo 配置）
```

## 排障

| 症状 | 原因 |
|------|------|
| 变量覆盖不生效 | 引入顺序问题（覆盖必须在 Element 样式之后） |
| 暗黑模式部分白块 | 第三方组件未适配 dark 变量；局部补 dark 样式 |
| 样式冲突错乱 | scoped 丢失；或与 Element 内部类名冲突 |
| 构建后样式差异 | less/scss 变量在构建期求值——运行时切换需 CSS 变量方案 |