跳到主要内容

setAttribute DataTheme

2025年01月18日
柏拉文
越努力,越幸运

一、认识


二、实现


2.1 Css 设置主题

Css 中预设主题模式: 预设明亮和暗黑主题

:root{
--color-link: #1677ff;
--color-bg-base: #fff;
--color-primary: #1677ff;
--color-success: #52c41a;
--color-warning: #faad14;
}

[data-theme="light"]{
--color-link: #1677ff;
--color-bg-base: #fff;
--color-primary: #1677ff;
--color-success: #52c41a;
--color-warning: #faad14;
}

[data-theme="dark"]{
--color-link: #d9363e;
--color-bg-base: #fff;
--color-primary: black;
--color-success: #52c41a;
--color-warning: #faad14;
}

2.2 JavaScript 切换主题

JavaScript 动态切换主题

document.documentElement.setAttribute('data-theme', "light");