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

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

  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>'
    }

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

window.onload = dayModeState();

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

松花酿酒，春水煎茶