Dark!您可以不用,但我们不能不水:基于当前主题配色方案发布夜间模式

铭记历史 珍爱和平
系统性的使用Wordpress是在2015年末在这之前使用过dedecms、zblog、emlog甚至还用过Word文档来编辑过HTML等搭建着“网站”。刚开始是购买便宜的虚拟空间到期后就去不断去寻找免费空间来提供网站。同样也是在这一年所使用的Wordpress发布的主题Twenty Fifteen深受我的喜欢,因为在2014年接触到的Twenty Fourteen的三栏布局在当时老是空着右边栏感到不协调,在后来的Twenty Sixteen可以说没有在2016年重新安装过因此没有预感到,到了2017年在有新安装时遇到Twenty Seventeen其首屏图片使我喜欢不过也和其他的一样在移动端侧边栏不是和Twenty Fifteen一样可以展开隐藏直接放在下面的使我到现在还是使用着Twenty Fifteen。

由于偏爱Twenty Fifteen所以本次也是针对该主题所设置的“夜间模式”,说是夜间模式其实就是使用其内置的“暗色”配色方案。

虽然经过搜索了解到Blackout: Dark Mode Widget、Night-Mode这类插件,可是我在使用这类插件提供的Demo发现刷新会闪烁一下(为什么要伤害我的眼睛),本来打算在生成不同颜色的函数动手根据是否开启夜间模式来加载不同的配色方案。可惜由于技术问题暂时无法找到相关function,后来发现不同的配色主要的区别就是会动态生成相对应的内部样式,删除掉内部样式就是“默认”配色。

于是在睡觉前的思考中就决定开启夜间模式就新增个“暗色”的配色方案的可以假装有夜间模式了。本来没有必要再把代码水上来的可是不水点代码就感觉都是废话流了不需要放在这里了。

这里粘贴一点“关键”代码吧

//加载该主题的暗色方案
function twentyfifteen_dark_css(){
    wp_enqueue_style( 'dark_css' ,CSS . "dark.css",array( 'twentyfifteen-style' ));//css
}
//设置为夜间模式时
if($_COOKIE['isDark'] == 'true'){
	//add_action( 'wp_head', 'sc_meeting_map_load_css' );
	add_action( 'wp_enqueue_scripts', 'twentyfifteen_dark_css' );
}

切换按钮由于找不要“免费”的图片就暂时用文字代替了,本来准备加载外部脚本显示切换按钮的但是不知道如何使用相对路径方便在不同网站使用不需要再修改,最后只好将其在footer那输出了(虽然这个主题的footer不是看到的那个页脚)。
同时为了少加载点脚本(jQuery、cookie.js)这次操作cookie使用纯js来实现。

Ps:也是在寻找配色方案储存在那个值里才发现使用自定义css哪里竟然会不断在post表增加ID怪不得ID不能连续了(强迫症)。

这个主题的一个问题就是经典编辑器的文章内容全部都在左边显示(即不能居中两边留空也不能全占满都不留空)空着右边有点不好看,虽然可以自己修改css里面的样式(/css/editor-style.css)可是懒加怕它还有更新除非使用子主题。

ChiuYut

2019年12月13日

发布者

ChiuYut

咦?我是谁?这是什么地方? Ya ha!我是ChiuYut!这里是我的小破站!