使用 color-scheme 屬性只有 4個(gè)
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark; // 跟隨系統(tǒng)切換
例子： 兩套主題，class一套。 data-theme 一套，兩個(gè)都可以單獨(dú)切換單獨(dú)使用
<html lang="en" class="light" data-theme="light">
<style>
// : root 是默認(rèn)的主題顏色
: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')
// 當(dāng)然也可以根據(jù)本地緩存來(lái)修改默認(rèn)值 如
if (localStorage.getItem('upDownColor') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
黑白之下紅綠交替
