「这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战」
如何切换主题
通过 body 标签上的 my-theme 属性来标明当前的主题
注意：通过设置 my-theme 为 dark，将组件切换成了暗色模式， 至于你的页面的整体风格，需要利用一些 CSS 变量 调整为暗色。
// 设置为暗黑主题
document.body.setAttribute('my-theme', 'dark')
// 恢复亮色主题
document.body.removeAttribute('my-theme');
复制代码调整整体背景和字体
body {
background-color: var(--color-bg-1);
color: var(--color-text-1);
}
复制代码原理
使用 [CSS 变量]来构建的暗黑主题的组件库。组件内部内置了两套色板，一套默认的亮色，另外一套是根据亮色色板生成的暗色色板。
如果对色板感兴趣，可以看这里：ArcoDesign 色板。
项目内部 Less 变量和 CSS 变量共存，并且内置了亮色和暗色的色彩算法，可以更灵活的更改色板。
比如你想更改主色，你只需要更改 @themeblue-6 这个变量的值即可，算法(如果没有比较固定可让设计同事代为提供)会自动帮你生成 1号到 10号的颜色，并且会自动生成暗色下反转后的 1号到 10号颜色。随心所欲，尽在掌握。
变量
利用以下提供的变量，将页面上的背景和文字调整为合适的颜色，配合组件库本身的暗色主题，即可完美呈现暗黑视觉。
背景
| 变量名 | 变量名 | 色值 |
|---|---|---|
| --color-bg-1 | 整体背景 | light:#fffdark:#17171A |
| --color-bg-2 | 一级容器背景 | light:#fffdark:#232324 |
| --color-bg-3 | 二级容器背景 | light:#fffdark:#2a2a2b |
| --color-bg-4 | 三级容器背景 | light:#fffdark:#313132 |
| --color-bg-5 | 下拉弹出框、Tooltip 背景颜色 | light:#fffdark:#373739 |
文字
| 变量名 | 变量名 | 色值 |
|---|---|---|
| --color-text-1 | 标题 | light:#1d2129dark:rgba(255, 255, 255, 0.9) |
| --color-text-2 | 语句 | light:#4e5969dark:rgba(255, 255, 255, 0.7) |
| --color-text-3 | 次要信息 | light:#86909cdark:rgba(255, 255, 255, 0.5) |
| --color-text-4 | 禁用状态文字 | light:#c9cdd4dark:rgba(255, 255, 255, 0.3) |
一行代码实现暗黑模式
filter: invert(1) hue-rotate(180deg);
复制代码会发现上图 图片也有些问题, 我们把图片和a标签进行还原处理 顺带添加一下切换暗黑的的动画
@media (prefers-color-scheme: dark) {
html {
filter: invert(1) hue-rotate(180deg);
}
html img {
filter: invert(1) hue-rotate(180deg);
}
a {
filter: invert(1) hue-rotate(180deg);
}
}
html {
transition: color 300ms, background-color 300ms;
}
复制代码参考文章：