### 主题系统

本系统的样式使用了 [Sass](https://sass-lang.com/) 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。

### 使用主题变量

为了更改主题时各页面效果保持一致，各颜色值、像素值等应该使用主题变量。如下所示：

```scss
.wrapper {
  // 文字颜色设置为“反色文字（黑底白字）”（不直接写white）
  color: $text-color-inverse;
  // 背景色设置为主题色（不直接写#1DA57A）
  background: $primary-color;
}
```

所有样式变量可以在 `src_custom/design/index.scss` 找到

### 定制方式

1. 修改 `src_custom/design/variables.js` 文件，在其中加入想要修改的主题变量
1. 在项目根目录运行以下命令，更新主题文件

   ```shell
   yarn build-theme
   ```

1. 重新启动 dev server 生效

### 样例

#### 修改主题色

```javascript
module.exports = {
  'primary-color': '#1890ff',
}
```

#### 修改整体字号（默认为 16px）

```javascript
module.exports = {
  'font-size-base': '14px',
}
```

### 样式变量

以下是一些最常用的通用变量，所有样式变量可以在 `src_custom/design/index.scss` 找到。

```javascript
'primary-color': '#1890ff', // 全局主色
'link-color': '#1890ff', // 链接色
'success-color': '#52c41a', // 成功色
'warning-color': '#faad14', // 警告色
'error-color': '#f5222d',// 错误色
'font-size-base': '16px', // 主字号
'heading-color': 'rgba(0, 0, 0, 0.85)', // 标题色
'text-color': 'rgba(0, 0, 0, 0.65)', // 主文本色
'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // 次文本色
'disabled-color': 'rgba(0, 0, 0, 0.25)', // 失效色
'border-radius-base': '4px', // 组件/浮层圆角
'border-color-base': '#d9d9d9', // 边框色
'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // 浮层阴影
```