xaoxuu / hexo-theme-stellar

内置文档系统的简约商务风Hexo主题,支持大量的标签组件和动态数据组件。
https://xaoxuu.com/wiki/stellar/
MIT License
1.3k stars 319 forks source link

[feat] support run-time theme switch, and visitor preferred theme #449

Closed calfzhou closed 5 months ago

calfzhou commented 5 months ago

Before this change:

With this change:

把构建时候根据 style.prefers_theme 的取值直接写死到 css 中的亮色/暗色/自动样式,调整为根据 html[data-theme]@media (prefers-color-scheme) 自适应的样式。这样给运行时(访客浏览页面的时候)访客自行改变色系提供了可能性。

站点作者可以在喜欢的位置放置一个按钮,供访客自行切换色系,比如放在 leftbar 底部(在 icons.yml 中增加了 default:theme 以便直接使用,并提供 switchTheme() 函数用于切换主题):

image

提供的 switchTheme() 函数可以在 亮色 / 暗色 / 跟随系统 三者之间循环切换,并将当前的选择记录在 local storage 中。访客手动切换时,页面会弹出 toast,提示切换到了哪个状态,如:

另:如果站点开启了 giscus 评论,评论区的配色也会同步调整。

stackblitz[bot] commented 5 months ago

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

xaoxuu commented 5 months ago

谢谢大佬 🤝

calfzhou commented 5 months ago

别别,您才是真·大佬。这个主题真的是太棒了,我完全是因为找到了这个主题,才确定使用 hexo 的。

特别感谢制作了如此优秀的项目!