Skip to content

Latest commit

 

History

History
20 lines (16 loc) · 954 Bytes

dark-mode.md

File metadata and controls

20 lines (16 loc) · 954 Bytes
title description spline
暗色模式
组件库提供了暗色模式,以适配在操作系统暗色模式下的展示体验,可以点击官网右上角开关切换整体浅色与暗色模式体验。
design-mode

如何使用

html 增加 theme-mode 属性来控制浅色/暗色展示:

// 设置暗色模式
document.documentElement.setAttribute('theme-mode', 'dark');
// 重置为浅色模式
document.documentElement.removeAttribute('theme-mode');

实现原理

组件库使用 css variables(自定义属性) 来实现所有颜色相关的 Design Token,目前所有现代浏览器基本上都已经支持这一特性,我们默认实现了浅色和暗色两套色板值,供页面主题切换时应用。

对本方案浏览器兼容性有疑问的小伙伴可以参考这里