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");