# 9.15 样式与主题定制

:::tip 概述
样式分三层：ElementPlus 主题变量覆盖、全局样式（styles/）、组件 scoped 样式。主题配色与布局参数经 designSetting store 运行时切换并持久化。
:::

## 样式目录

```text
ui/src/styles/
├── index.scss        入口（引入各分片）
├── variables.scss    SCSS 变量（间距、层级、断点）
├── element.scss      ElementPlus 变量覆盖
└── transition.scss   过渡动画
```

## 主题定制方式

| 方式 | 适用 |
|---|---|
| element.scss 覆盖 CSS 变量 | 主题色、圆角、组件尺寸全局调整 |
| designSetting store | 运行时切换配色方案（用户偏好，持久化） |
| 页面 scoped 样式 | 局部调整（不污染全局） |
| variables.scss | 间距/层级等设计 token |

## 规约

- **优先变量**：颜色/间距用变量而非硬编码，换主题不改业务样式
- **不深层嵌套覆盖**：避免 `!important` 大战，改用变量或类名隔离
- **公共组件样式进组件**：不进全局 styles（防全局污染）
- **暗色模式**：经主题变量体系统一适配，不单独写一套选择器

## 与后端无关的说明

主题纯前端行为，不涉及后端接口；水印、页签等开关在 projectSetting store。

## 相关

- [9.16 布局系统](/zh/frontend/layout.html)
- [附录 H 前端组件速查](/zh/appendix/components.html)