Emacs is a lifestyle :-)
And happy hacking emacs!

博客亮/暗色主题切换

分类: 博客 · 字数: 521 · ...

我的博客为亮色主题,晚间浏览时光线太强,于是想实现在亮色与暗色主题间的自由切换。实现原理参考了 这里 ,即通过改变引入的css实现主题切换。

下面是具体的实现步骤:

1.在适当位置引入切换按钮。每次点击时触发 switchTheme 函数,实现主题切换。

<span onclick="switchTheme();">切换主题</span>

2.在 head 标签间引入博客主题的css文件,我的默认为 light.css

<link id="pagestyle" rel="stylesheet" type="text/css" href="/static/light.css"/>

3.在 </body> 标签之前引入 switchTheme 函数,通过改变css文件切换主题。实现单个按钮循环切换主题需要设置 flag 标志,标志状态存储在sessionStorage中。

    function switchTheme(){
        if(sessionStorage.getItem("flag")=="false"){
            document.ge
tElementById("pagestyle").href="/static/light.css";
            sessionStorage.setItem("flag", "true");
        }else{
            document.getElementById("pagestyle").href="/static/dark.css";
            sessionStorage.setItem("flag", "false");
        }
    };

4.以上代码可以实现亮/暗两个主题的切换,但是有个问题:主题的状态不能保持,刷新页面就会使主题恢复到默认状态。我通过sessionStorage来存储主题状态,实现页面间共享。改写后完整的js如下:

$(document).ready(function(){ //需要在head里引入jquery.
    var theme = sessionStorage.getItem("theme");
    if(theme=="dark"){
        document.getElementById("pagestyle").href="/static/dark.css";
    }else if(theme=="light"){
        document.getElementById("pagestyle").href="/static/light.css";
    }else{
        sessionStorage.setItem("theme","light");
    }});

function switchTheme(){
    if(sessionStorage.getItem("flag")=="false"){
        document.getElementById("pagestyle").href="/static/light.css";
        sessionStorage.setItem("theme","light");
        sessionStorage.setItem("flag", "true");
    }else{
        document.getElementById("pagestyle").href="/static/dark.css";
        sessionStorage.setItem("theme","dark");
        sessionStorage.setItem("flag", "false");
    }};

Ok,这样就可以自由的切换博客主题并保持状态了。