Semi 的默认主题和通过 Semi DSM 配置的定制主题都自带了亮色模式与暗色模式，可以方便地进行切换。Semi 也支持在页面的局部范围使用暗色模式。

Semi 暗色模式的切换是通过给 body 添加属性 [theme-mode='dark'] 来实现的。你可以使用任何你喜欢的方式来进行切换。比如：

这里也有一个🌰：

如果你希望页面的亮色/暗色模式能自动和系统主题保持一致，可以参考 prefers-color-scheme 属性。该属性目前处于实验阶段，请留意浏览器兼容性 (Chrome >= 76, Safari >= 12.1) 及未来可能发生的改变。

macOS 下的系统主题可以通过 系统偏好设置 -> 通用 -> 外观 来配置。

由于我们不建议直接修改 npm 主题包的内容，你可以通过 JS 的方式监听该属性的变化，这里也有一个🌰：

Semi 2.0 原生支持局部暗色/亮色模式。使用时，在顶级元素上添加 .semi-always-dark 或 .semi-always-light 类，这个类下的组件会使用对应模式的颜色变量。