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 日
© 允许规范转载
喜欢我的文章吗？
别忘了点赞或赞赏，让我知道创作的路上有你陪伴。