在实际开发中，设置主题色可以更好地把控网站的整体调性，同时也方便后期对网站进行配色更新。

一、选择主题色

• 調色盤、藝術家的色彩配置 | Adobe Color
• Flat UI Colors

二、设置主题色

新建 color.css，在其中写入：

选择器 {
    --颜色名: 颜色值;
    --颜色名: 颜色值;
}

选择器可以为：:root 、html 、body

三、使用主题色

在需要使用颜色的地方，用 var(--颜色名) 代替颜色。

​

参考

• 使用 css/less 动态更换主题色