博客支持黑夜模式了~

随着WordPress升级到5.6版本,随之而来的还有2021年度主题Twenty Twenty-One ,简洁的样式风格还有原生的黑夜模式支持,经过一些调整后现在的黑夜模式可以说是完美了~

这里的调整主要是针对于代码块的优化,由于博客的代码高亮是使用的highlight.js,通过插入JS代码来控制,先判断是否是暗色模式然后引入不同的CSS样式。

在Github找到twentytwentyone的代码,找到里面控制暗色模式的代码dark-mode-toggler.js,判断是否启用暗色模式的方法twentytwentyoneIsDarkMode:

function twentytwentyoneIsDarkMode() {
	var isDarkMode = window.matchMedia( '(prefers-color-scheme: dark)' ).matches;

	if ( 'yes' === window.localStorage.getItem( 'twentytwentyoneDarkMode' ) ) {
		isDarkMode = true;
	} else if ( 'no' === window.localStorage.getItem( 'twentytwentyoneDarkMode' ) ) {
		isDarkMode = false;
	}

	return isDarkMode;
}

它是先判断系统的颜色模式,系统的颜色模式决定了用户首次进入页面的颜色模式,用户也可以手动切换颜色模式,会把设置保存LocalStorage中,并且以用户设置的模式为主。

然后覆盖了原有的window.toggleDarkMode方法,加入对代码高亮的切换,以实现代码高亮的暗色模式。


好久没有更新博客了,趁着升级博客主题水一篇~


评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注