只实现跟随系统不难，同时实现开、关和跟随系统更难一点。
JS：https://gitee.com/hu60t/hu60wap6/blob/master/src/tpl/jhin/js/hu60/header.js#L152
)
// 读取用户的夜间模式选择
function hu60_read_color_scheme_option() {
var scheme = localStorage.getItem('hu60ColorScheme');
if (!scheme) scheme = 'auto';
return scheme;
}
// 根据用户选择和系统状态决定夜间模式是否开启
function hu60_get_color_scheme() {
var scheme = hu60_read_color_scheme_option();
if (scheme != 'dark' && scheme != 'light') {
// 这里就是跟随系统，检测系统是否开启了夜间模式
scheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
return scheme;
}
// 通过设置data属性`data-hu60-color-scheme`切换夜间模式
// 之所以可以这样切换，是因为CSS中的夜间模式配色使用了条件表达式`[data-hu60-color-scheme='dark']`
function hu60_update_color_scheme() {
var scheme = hu60_get_color_scheme();
document.documentElement.setAttribute('data-hu60-color-scheme', scheme);
}
function hu60_set_color_scheme(scheme) {
localStorage.setItem('hu60ColorScheme', scheme);
hu60_update_color_scheme();
}
// 立即执行而非在onload事件后执行，这样才能避免用户看到主题切换过程（闪烁）
hu60_update_color_scheme();
// 主题切换下拉框
window.addEventListener('load', function () {
var scheme = hu60_read_color_scheme_option();
var options = {auto: '跟随系统', 'dark': '开', 'light': '关'};
var select = document.createElement("select");
select.id = "hu60-color-scheme";
for (var key in options) {
var option = document.createElement("option");
option.value = key;
option.text = options[key];
if (key == scheme) {
option.selected = true;
}
select.appendChild(option);
}
var box = document.querySelector('#hu60_footer_action');
if (!box) return;
box.insertAdjacentText('beforeEnd', ' . 夜间模式：');
box.appendChild(select);
document.getElementById('hu60-color-scheme').addEventListener('change', function (ev) {
hu60_set_color_scheme(this.value);
});
});
// 监听系统是否开关了夜间模式，并实时做出反应
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
hu60_update_color_scheme();
});
CSS：https://gitee.com/hu60t/hu60wap6/blob/master/src/tpl/classic/css/default.css
/*白天模式配色*/
:root {
--classic-body-bg: #FFF;
--classic-body-color: #000;
--classic-tp-bg: #E6F3FF;
--classic-a-color: #08C;
--classic-hr-color: #BED8EA;
……
}
/*夜间模式配色*/
[data-hu60-color-scheme='dark'] {
--classic-body-bg: #111312;
--classic-body-color: #717372;
--classic-tp-bg: #303030;
--classic-a-color: #567756;
--classic-hr-color: #995555;
……
}
/*使用 var(--变量名) 引用上述配色*/
body {
word-wrap: break-word;
word-break: break-all;
padding: 2px 5px;
background-color: var(--classic-body-bg);
color: var(--classic-body-color);
max-width: 1024px;
margin: 0px auto;
box-shadow: 0 0 15px var(--classic-border-shadow);
tab-size: 4; -moz-tab-size: 4; -o-tab-size: 4; -webkit-tab-size: 4;
}
.tp {
margin: 0px;
background-color: var(--classic-tp-bg);
}
a {
text-decoration: none;
color: var(--classic-a-color);
}
hr {
height: 1px;
border: 1px solid var(--classic-hr-color);
border-left: none;
border-right: none;
}
……
网页有API，反而更好做。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme
小米MIX2s(白)