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