皇家元林

这两天刚好休息，在WU先生的强烈谴责下，我下定决心修改下本站的主题。其实这主题的默认风格就是暗黑色，我感觉这样会好看些，就像淘宝店卖衣服一样，默认展示的应该是大众喜欢的颜色。然而我以为的并不是我以为的，所以为了大众的审美，我还是决定修改一下。瞧，左上角，菜单最左边那个貌似呼吸灯的按钮就是了！

另外，对于前段时间在微博上，给我博客在各种浏览器上字体显示提建议的朋友说声抱歉，能力有限，找不出其中问题所在，这个问题我也会放在心上，后面再看看！

网上流传的版本太多，都不是我喜欢的，我希望代码越简单，功能还强大。可鱼和熊掌难以兼得。现在浏览器本身自带两种模式，一是深色模式，一是浅色模式。通过简单CSS设置——“@media (prefers-color-scheme: dark){......}”——就可以跟随浏览器模式显示对应的模式。但如果自己想换又比较麻烦。

有人通过JS设置cookie值，然后通过CSS达到手动变换。譬如我的好友profan的博客，本站也是参考他的网站代码，只不过，我没用cookie，而是利用浏览器自身的存储属性来完成的。话不多说，上代码：

JQ部分：

    //暗黑模式开关
    var isDarkmode = localStorage.getItem('darkmode');
        if (isDarkmode === "false") {
            // 深色模式业务处理代码
            $('body').addClass("light-scheme");
            //console.log('深色模式');
        } else {
            // 浅色模式业务处理代码
            $('body').addClass("dark-scheme");
            //console.log('浅色模式');
        }
    $('#darkroll').on( 'click', function() {
        if ( $('body').hasClass( "dark-scheme" ) ) {
            $('body').removeClass("dark-scheme");
            $('body').addClass("light-scheme");
            localStorage.setItem('darkmode', false);
        }else{
            $('body').removeClass("light-scheme");
            $('body').addClass("dark-scheme");
            localStorage.setItem('darkmode', true);
        }
    })

HTML部分：

<div id="darkroll"></div>

CSS部分

:root {
	--color-background: #17181a;
	--white-color-background: #F6F7F9;
	--color-text-dark: #d0d3d8;
	--color-text-white: #383838;
	--color-page-background: #1f2022;
	--color-page-background-white: #FFFFFF;
	--color-menu-background: #383838;
	--color-menu-background-white: #eeeeee;
	color-scheme: light dark;
}
.dark-scheme {
	background: var(--color-background);
	color: var(--color-text-dark);
}
.light-scheme {
	background: var(--white-color-background);
	color: var(--color-text-white);
}

还有那个呼吸灯的CSS样式，有喜欢的可以拿去：

#darkroll{
	border-radius: 50%;
	position: absolute;
	cursor: pointer;
	left: 15px;
	top: 15px;
}
#darkroll::before{
	content: '';
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	transform: translateX(-50%);
	animation: blink 1s infinite;
}
#darkroll::before{
	background-color: #ffffff;
	border: 3px solid #1c73e0;
}
@keyframes blink {
	0% {
	opacity: 1;
	}
	50% {
	opacity: 0.5;
	}
	100% {
	opacity: 1;
	}
}

其实还有一些CSS样式没贴出来，大体原理就是这样。因为还有其他地方在深浅色变换的时候，需要配合当前模式也是需要修改CSS样式的，这就根据自己的情况来定了。我这算是抛砖引玉了，有更好用的代码还请慷慨分享。其实按照我这思路，还能再加一种模式，譬如浏览器自身的阅读模式，那个色调我还是很喜欢的，之前考虑过，现在感觉重复了，就没做了。

另外本主题hmd已经同步更新到1.5版本，喜欢的童鞋感觉去试试吧！