使用 color-scheme 属性只有 4个
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark; // 跟随系统切换
例子： 两套主题，class一套。 data-theme 一套，两个都可以单独切换单独使用
<html lang="en" class="light" data-theme="light">
<style>
// : root 是默认的主题颜色
:root {
--text-1: #000;
--text-2:#1C75B9;
--text-link: #2483ff;
--bg-box: rgb(200,200,200);
}
[data-theme="light"] {
--up: #F6465D;
--down: #CF304C;
}
[data-theme="dark"] {
--up: #CF304C;
--down: #F6465D;
}
.light {
--bg-button: #2483ff;
}
.dark {
--bg-button: #186ddd;
}
html.light{
color-scheme: light;
}
html.dark{
color-scheme: light;
}
</style>
</html>
使用js切换主题颜色
// class的主题
document.documentElement.setAttribute("class", "dark");
// data-theme的主题
document.documentElement.setAttribute('data-theme', 'dark')
// 当然也可以根据本地缓存来修改默认值 如
if (localStorage.getItem('upDownColor') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
黑白之下红绿交替
