自動夜間模式的替代做法(利用sessionStorage) #8
Description
這樣修改可以根據瀏覽器設置預設日間或夜間模式，在指定時間一律預設夜間模式，切換頁面時會保持當前模式
hingle.js中這一段改成
// 如果开启自动夜间模式
if(config.night){
var sessiondarklight = sessionStorage.getItem('dark or light');
var hour = new Date().getHours();
if(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches){
if(sessiondarklight == 'dark'){
document.body.classList.add("dark-theme");
}
else if(sessiondarklight == 'pre') {
document.body.classList.add("dark-theme");
sessionStorage.setItem('dark or light','dark');
};
}
else {
if(hour <= 6 || hour >= 21) {
if(sessiondarklight == 'dark') {
document.body.classList.add("dark-theme");
}
else if(sessiondarklight == 'pre') {
document.body.classList.add("dark-theme");
sessionStorage.setItem('dark or light','dark');
};
}
}
}還有這一段加入sessionStorage.setItem('dark or light', 'light');
// 关灯切换
this.night = function () {
if(body.classList.contains("dark-theme")){
body.classList.remove("dark-theme");
document.cookie = "night=false;" + "path=/;" + "max-age=21600";
sessionStorage.setItem('dark or light', 'light');
}
else{
body.classList.add("dark-theme");
document.cookie = "night=true;" + "path=/;" + "max-age=21600";
sessionStorage.setItem('dark or light', 'dark');
}
};layout.ejs中在<body>下加入這段
<body>
<script>
var sessiondarklight = sessionStorage.getItem('dark or light');
if (sessiondarklight == 'dark'){
document.body.classList.add("dark-theme");
}
else if (!sessiondarklight) {
sessionStorage.setItem('dark or light','pre');
}
</script>