3309879937.jpg

  • 绛木子-仿简书主题里面扒出来的。
  • 感谢Hran 大好人 帮忙修改了代码
  • 如发现bug 先清除一次cookie,然后再试一次,仍发现情况,恳请在评论区告诉我!
  • 效果见底部的小太阳按钮,含记录cookie功能(2016/10/1 后更换了模板不再有此功能)

现在!贴出代码给出一点点分析。已存备用。

在我想要显示的位置:底部(foot.php),加上一个调用php 的代码
    <a class="btn-read-mode" href="#"><i class="<?php getReadMode(true);?>"></i></a>
在funtion.php 添加这个代码
function getReadMode($icon=false){
    $class = $_COOKIE['read-mode'];//获取cookie
    if($icon){
        $class = $class == 'night' ? 'fa fa-moon-o' : 'fa fa-sun-o';
    }else{
        $class = 'night' == $class ? 'night-mode' : '';
    }
    echo $class;
}
在foot.php加上 js代码,触发点击按钮的事件
function switchReadMode() { //切换显示模式
    var btn = $('.btn-read-mode');
    var next_mode = $('body').hasClass('night-mode') ? 'day': 'night';
    var mode = next_mode == 'day' ? '': 'night-mode';
    var icon = next_mode == 'day' ? 'fa fa-sun-o': 'fa fa-moon-o';
    if (next_mode == 'day') {
        $('body').removeClass('night-mode');
    } else {
        $('body').addClass('night-mode');
    }
    btn.find('i').attr('class', icon);
    setCookie("read-mode", next_mode);
}

$('.btn-read-mode').click(function(e) {
    e.preventDefault();//阻止点击打开超链接"#"事件
    switchReadMode();
});//这个触发事件主体


function setCookie(name,value) 
{ 
    var Days = 30; 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    var path = ';path=/'; 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString() + path; 
} 
最后css文件根据自己模板自行修改即可!

点开夜间按钮自动给body添加了night-modeclass样式,因为body是在最上层的。所以底部的所有样式,都可以通过 组合选择符 和 后代选择符 进行替换css样式!

终于修改好夜间模式的CSS了,大家可以测试,有什么问题恳请在评论区告知我,谢谢!

我写的CSS文件地址(有注释):https://www.ihewro.com/usr/themes/lpisme/style.css

其他细节可能需要根据自己主题进行适配。本主题 Lpisme需要修改usr/themes/lpisme/js/functions.js文件。

修改后的文件地址:https://www.ihewro.com/js/functions.js

最后修改:2019 年 02 月 24 日
喜欢我的文章吗?
别忘了点赞或赞赏,让我知道创作的路上有你陪伴。