暗黑模式

组件库内置暗色的主题，你可以轻易的切换到暗色，也可以简单的通过调整色板来自动生成基于色板的新暗色主题。（点击官网右上角图标可进行暗黑模式预览。）

如何切换暗黑模式

组件库通过 body 标签上的 data-theme 属性来标明当前的主题，所以你只要修改这个属性，即可完成主题的切换。

注意

通过设置 data-theme 为 dark，只是将组件库切换成了暗色模式，你的页面的整体风格，需要利用一些 CSS 变量 调整为暗色。

// 设置为暗黑主题
document.body.setAttribute('data-theme', 'dark');

// 恢复亮色主题
document.body.removeAttribute('data-theme');

跟随系统主题自动切换

const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");

darkThemeMq.addEventListener('change', e => {
  if (e.matches) {
    document.body.setAttribute('data-theme', 'dark');
  } else {
    document.body.removeAttribute('data-theme');
  }
});

调整整体背景和字体

body {
  background-color: var(--color-bg-1);
  color: var(--color-text-1);
  color-scheme: dark; /* 这个属性设置后，滚动条也能表现为暗色模式 */
}

原理

WebKit Pro 使用 CSS 变量来构建暗黑主题。组件内部内置了两套色板，一套默认的亮色，另外一套是根据亮色色板生成的暗色色板。如果你对当前色板感兴趣，可以看这里：色板系统。

WebKit Pro 内部 Less 变量和 CSS 变量共存，并且内置了亮色和暗色的色彩算法，可以更灵活的更改色板。

比如你想更改主色，你只需要更改 @arcoblue-6 这个变量的值即可，算法会自动帮你生成 1 号到 10 号的颜色，并且会自动生成暗色下反转后的 1 号到 10 号颜色。

变量

利用以下提供的变量，将页面上的背景和文字调整为合适的颜色，配合组件库本身的暗色主题，即可完美呈现暗黑视觉。

背景

变量名	变量名	色值
--color-bg-1	整体背景	light: #fff   |   dark: #17171A
--color-bg-2	一级容器背景	light: #fff   |   dark: #232324
--color-bg-3	二级容器背景	light: #fff   |   dark: #2a2a2b
--color-bg-4	三级容器背景	light: #fff   |   dark: #313132
--color-bg-5	下拉弹出框、Tooltip 背景颜色	light: #fff   |   dark: #373739

文字

变量名	变量名	色值
--color-text-1	标题	light: #1d2129   |   dark: rgba(255, 255, 255, 0.9)
--color-text-2	语句	light: #4e5969   |   dark: rgba(255, 255, 255, 0.7)
--color-text-3	次要信息	light: #86909c   |   dark: rgba(255, 255, 255, 0.5)
--color-text-4	禁用状态文字	light: #c9cdd4   |   dark: rgba(255, 255, 255, 0.3)