html 黑夜模式,网站夜间模式的实现

整体流程

夜间模式开关按钮：用来手动切换夜间模式的，会存储cookie。

自动夜间模式：当cookie为空时，浏览器时间大于22点小于6点时会自动进入夜间模式，并存储cookie。

后端配合：php判断是否有cookie，有的话直接输出夜间css，避免切换页面时网页闪烁。

具体操作

引入黑夜 css

有title熟悉rel属性值同时包含alternate stylesheet的作为备选样式CSS文件加载，默认不渲染。

切换夜间模式的 js 函数

function switchNightMode(){

var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';

if(night == '0'){

document.querySelector('link[title="dark"]').disabled = true;

document.querySelector('link[title="dark"]').disabled = false;

document.cookie = "night=1;path=/"

console.log('夜间模式开启');

}else{

document.querySelector('link[title="dark"]').disabled = true;

document.cookie = "night=0;path=/"

console.log('夜间模式关闭');

}

}

指定时间进入夜间模式

(function(){

if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){

if(new Date().getHours() > 22 || new Date().getHours() < 6){

document.querySelector('link[title="dark"]').disabled = true;

document.querySelector('link[title="dark"]').disabled = false;

document.cookie = "night=1;path=/"

console.log('夜间模式开启');

}else{

document.cookie = "night=0;path=/"

console.log('夜间模式关闭');

}

}else{

var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';

if(night == '0'){

document.querySelector('link[title="dark"]').disabled = true;

console.log('夜间模式关闭');

}else if(night == '1'){

document.querySelector('link[title="dark"]').disabled = true;

document.querySelector('link[title="dark"]').disabled = false;

console.log('夜间模式开启');

}

}

})();

php 后端判断 cookie 进行加载 css

适配 Mac 的 Dark Mode

纯js判断设备是否进入了夜间模式，感谢simplify提供代码

if (

window.matchMedia &&

window.matchMedia("(prefers-color-scheme: dark)").matches

) {

alert('进入夜间模式');

}

旧版适配 Mac 的 Dark Mode的方案

需要插入段css然后用js判断css的变化，来监控是否进入夜间模式

插入 css

html {

content: "";

}

/* Light mode */

@media (prefers-color-scheme: light) {

html {

content: "light";

}

}

/* Dark mode */

@media (prefers-color-scheme: dark) {

html {

content: "dark";

}

}

前端使用 JS 检查

const mode = getComputedStyle(document.documentElement).getPropertyValue('content');

if(mode == '"dark"'){alert('进入夜间模式');}

最后

在dark.css里重写一些元素的背景色文字色等等。

参考

1，link rel=alternate网站换肤功能最佳实现

2，给博客添加夜间模式

3，prefers-color-scheme: CSS Media Query