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

网上流传的版本太多，都不是我喜欢的，我希望代码越简单，功能还强大。可鱼和熊掌难以兼得。现在浏览器本身自带两种模式，一是深色模式，一是浅色模式。通过简单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版本，喜欢的童鞋感觉去试试吧！

单栏简洁黑色主题

演示如图：

2023.03.16提交官方审核，几经修改，与今日（2023.04.06）审核通过。

官方主题库地址：https://wordpress.org/themes/hmd/

简单介绍：
1、此主题设计灵感来源于markdown编辑器，所以命名为hmd；
2、现在的博客主题越来越简洁化，突出内容，强化阅读体验，所以单栏设计很适合，连官方主题都是这样，不过为了保留widget边栏，将其放在底部；
3、主题支持WP-UserAgent插件，WordPress这种功能的插件都很久没更新了，这个勉强可以用；
4、官方主题因为不能添加外链，所以没有添加“LXGW WenKai”字体，但保留了默认该字体css样式，你只需在主题添加https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/lxgwwenkaiscreen.css即可体验该字体。后续更新看能不能添加在设置面板里；
5、更多功能还在计划里，譬如支持更多色调，PJAX或者Ajax，自定义功能（官方已不再支持后台设置面板了，只能自定义），转换为区块主题（官方现在大力推广区块主题，我觉得太复杂了，还不如直接PHP编写）......

如果有好的建议，也欢迎留言给我！