刚刚折腾了一下博客的样式,就想能不能做一个夜间模式,然后晚上也能看,虽然根本没人关注这个,就连我自己也只是偶尔看一下。

没想从网上找现成的,寻思造个轮子,于是就开始了折腾。


  1. 首先想到的是 js 修改样式,可惜太过繁琐,放弃。

  2. 其次想到的是 js 修改 classname ,可行,两小时不到撸完代码。测试,完美。不过,第二天发现有部分构件的样式在夜间模式显得有些突兀,改。测试,上线,完美。然后  ??? 一个不好的预感就这样出现。握草,点击接不就重新加载了么!然后,没有然后了……

  3. 最后直接替换样式文件不就得了?或者加个顶层遮罩?然而一切都没想想得简单,替换样式文件?刷新还是会重新加载,加遮罩?也太简陋了吧,而且页还是会重新加载啊。

  4. 想了一下可以选择使用 localstorage 记录模式状态,然后在页面 load 完成之前进行模式的切换不就好了。代码如下:


;
$("#nightmodel").click(function(){
    document.getElementById('switch_mode').classList.toggle("nightmodel");
    if(document.getElementById('switch_mode').classList.contains("nightmodel")) {
        localStorage.setItem("night",true);
    }
    else {
        localStorage.setItem("night",false);
    }
    dayModeState();
});


function dayModeState() {
    var night=localStorage.getItem('night');
    console.log("night_mode:" + night);
    if(night==="true") {
        switchmode_moon ();
        document.getElementById('nightmodel').innerHTML='<i id = "moon" class="fa fa-lightbulb-o fa-fw"></i>'
    &#125;

   else &#123;
        switchmode_sun ();
        document.getElementById('nightmodel').innerHTML='<i id = "moon" class="fa fa-moon-o fa-fw"></i>'
    &#125;
&#125;

window.onload = dayModeState();

夜间模式的折腾也就到此为止了,效果还算可以,就是有一部分的样式并没有完成适配,不过要准备考研的考研狗也没什么时间折腾了。

松花酿酒,春水煎茶