关于本站的暗黑模式

12个月前 6

这两天刚好休息,在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版本,喜欢的童鞋感觉去试试吧!

6 条评论

  1. #1

    真不错,哎呀,还是想学习。。等以后什么时候能自己做主题的时候来学习。。

  2. #2

    嗯,看到了,现在舒服多了。

  3. #3

    暗黑看起来没哪么刺眼,挺好的。