通过JavaScript给你的网站添加夜间模式


  最近突发奇想想给博客做个夜间模式

  网络上有很多傻瓜化方法,比如 darkmode.js,但是他的默认样式在我的博客网站上实在是非常糟糕,并且并不能很方便的更改样式。

  还有其他方法比如给 <body> 添加 class 再用 css 选择器实现样式的更换。

  值得注意的是,我曾经使用了 mybrowseraddon.com 提供的 Darkmode Chrome 插件,发现效果很不错,并且我注意到它是通过添加一个外部css来实现的夜间模式效果。

  由于网络上暂且没有通过该种方式并且使用 javascript 实现的程序,于是我自行写了这个 darkmode 插件用于提供一个按钮使网站可以启用/停用CSS来更换主题。

只需要4步即可添加夜间模式。

1.添加 <link rel="alternate stylesheet" href="darkmode.css" class="darkmode"> 到你的网页上的<head>元素,darkmode.css是用于实现夜间模式的外部css文件,注意引入顺序带来的优先级问题。

 你可以通过下载 Darkmode Chrome 插件,解压获得其中的 css 样式。

2.添加

<script>
	theme = document.cookie.indexOf("dark-theme");
	var darkmodeCss = document.getElementById("darkmode-css");
	if(theme == -1){
	}
	else{
		darkmodeCss.setAttribute('rel', 'stylesheet');
	}
</script>

 到步骤一添加的代码和步骤三添加的代码中间任意位置

 推荐添加到 <head> 中使夜间模式能够快速生效。

3.引入或者添加 darkmode.js ,内容为

// Darkmode Copyright 2020 YexuanXiao under MIT license
function changeTheme() {
    var darktheme = document.cookie.indexOf("dark-theme");
    var deftheme = document.cookie.indexOf("default-theme");
    if (darktheme == -1) {
        applyTheme("dark-theme");
    } else if (deftheme == -1) {
        applyTheme("default-theme");
    }
}
function applyTheme(themeName) {
    var darkmodeCss = document.getElementById("darkmode-css");
    var date = new Date();
    date.setTime(date.getTime() + 30 * 60 * 1000 * 4);
    if (themeName === "default-theme") {
        darkmodeCss.setAttribute('rel', 'alternate stylesheet');
        document.cookie = "theme=default-theme;expires=" + date.toGMTString() + ";path=/";
        toast('Lightmode has been opened.');
    } else if (themeName === "dark-theme") {
        darkmodeCss.setAttribute('rel', 'stylesheet');
        document.cookie = "theme=dark-theme;expires=" + date.toGMTString() + ";path=/";
        toast('Darkmode has been opened.');
    }
}
(function(){
	var darkmode = matchMedia('(prefers-color-scheme: dark)').matches
	if (darkmode) {
		applyTheme("dark-theme");
	} else {
		var container = document.createElement("div"); 
	    var btn = document.createElement('input');
	    document.body.appendChild(container); 
	    container.setAttribute('id', 'btn-container');
	    container.appendChild(btn); 
		btn.addEventListener("click", changeTheme);
		btn.setAttribute('id', 'darkmode-btn');
		btn.setAttribute('class', 'darkmode-btn');
		btn.setAttribute('type', 'button');
		btn.setAttribute('value', '🌓');
		btn.setAttribute('style', 'background-color: transparent !important; border: none; font-size: 25px; z-index: 999; position: fixed; right: 30px; bottom: 50px');
	}
})()

如果你想要让网站在晚上8点到早上6点自动开启夜间模式,请把步骤二的代码换为

<script>
(function(){
	var theme1 = document.cookie.indexOf("-theme");
	var theme3 = document.cookie.indexOf("default-theme");
	var darkmodeCss = document.getElementById("darkmode-css");
	var date = new Date();
	date.setTime(date.getTime() + 30 * 60 * 1000 * 4);
	if (theme1 == -1) {
		if (new Date().getHours() >= 20 || new Date().getHours() <= 6) {
			darkmodeCss.setAttribute('rel', 'stylesheet');
			document.cookie = "theme=dark-theme;expires=" + date.toGMTString() + ";path=/";
		} else {
			document.cookie = "theme=default-theme;expires=" + date.toGMTString() + ";path=/";
		}
	} else if (theme3 == -1) {
		darkmodeCss.setAttribute('rel', 'stylesheet');
	}
})()
</script>