我的博客为亮色主题，晚间浏览时光线太强，于是想实现在亮色与暗色主题间的自由切换。实现原理参考了这里，即通过改变引入的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，这样就可以自由的切换博客主题并保持状态了。