「这是我参与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;
}
复制代码
参考文章: