前言
现在博客按下右边栏的昼夜切换按钮就可以白天 / 黑夜模式之间进行切换!
正文
data-theme
主要原理:在 <html>
上添加变量,值为 light
或 dark
,剩下的交给 CSS。
新建一个 toogleTheme.js
用于实现这个功能。
1 |
|
-
getTheme()
获取主题。-
如果
localStorage.getItem('theme')
的值存在,说明用户设置过主题,使用设置的主题。 -
查询用户系统是否存在昼夜主题偏好,若没有则使用白天主题。
-
-
setTheme()
设置主题。- 将昼夜主题的信息用
localStorage
存起来。 - giscus 主题不受
data-theme
控制,根据 运行时修改 giscus 主题 - Code & Tea (jvav.me),用 js 切换主题。
- 将昼夜主题的信息用
-
setToggleThemeButtonListener()
昼夜切换按钮的监听,侧边栏创建一个按钮。1
2
3
4
5<div class="rightside-button" id="js-toggle_theme">
<span>
<img no-lazy src="<%- theme.icon.toggle_theme %>" class="rightside-button-icon" alt="Icon">
</span>
</div>
防止闪烁
这个 setTheme()
必须放在页面渲染前执行,不然加载页面时会有昼夜切换的闪烁,影响体验。(参考:暗色模式下页面刷新或切换出现闪烁的问题 · Issue #107 · Siricee/hexo-theme-Chic (github.com))
1 |
|
var.css
CSS 中,写好昼夜模式下的颜色变量。
1 |
|
其它
从 Hexo 博客音乐播放器 Aplayer 深色模式 css 文件 | 张洪 Heo (zhheo.com) 抄一个深色模式的 Aplayer 的 css。
昼夜切换的过程中,给有变色的元素添加过渡动画:transition: XXX 0.5s ease-in-out;
。
其它的就是修图 & 乱调 CSS 了。
(夜间模式看顺眼了还不习惯改回来了)