color-scheme 主题颜色

使用 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');
}

黑白之下红绿交替

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容