happy hacking emacs!

首页   归档   分类   关于   留言  

博客亮/暗色主题切换

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

我的博客为亮色主题,晚间浏览时光线太强,于是想实现在亮色与暗色主题间的自由切换。实现原理参考了这里,即通过改变引入的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.getElementById("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,这样就可以自由的切换博客主题并保持状态了,快点击下面的切换主题按钮体验一下吧~

切换主题

Posted on 2020-02-19


©2020 戈楷旎 | Licensed under 知识共享许可协议

Generated by Emacs 26.3 (Org mode 9.1.9)