SnowDesign
开始
组件
开始
组件

暗色模式

内置暗色模式通过CSS变量实现。CSS选择器判断body标签theme-mode参数为dark或light（默认light）。 支持snow-always-light，snow-always-dark类名进行主题色切换。

全局切换

  • 目前支持通过切换body标签属性进行更改。（暴露主题变更方法，待更新...）
const body = document.body;
if (body.hasAttribute('theme-mode')) {
    body.removeAttribute('theme-mode');
} else {
    body.setAttribute('theme-mode', 'dark');
}

局部切换

  • 更改className为snow-always-dark和snow-always-light实现。（支持ConfigProvider组件待更新...）
import { Button } from '@snow-design/components';

const Home = () => {
    return (
        <div className="snow-always-dark">
            <Button>暗色模式</Button>
        </div>
    );
};