# 主题

所有与主题有关的定义位于`src/theme`目录下。

此目录下有两个`css`主题定义，`css`文件中，定义了一些关键的`颜色`、`字号`等变量，当在项目中使用到`颜色`、`字号`等`css属性`时，应使用`css变量`，否则将会引起`主题切换`功能的异常。

内置的一些可以`直接使用`的变量: [设计变量](https://arco.design/vue/docs/token)

如果没有找到可以直接使用的变量，则需要再`/src/theme`目录对应的`样式表`中进行定义

例如：

**theme-dark.css**

```css
html body[dmx-theme="dark"] {
  --custom-color: black;
}
```

**theme-light.css**

```css
html body[dmx-theme="dark"] {
  --custom-color: white;
}
```