[feat] support run-time theme switch, and visitor preferred theme #449
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Before this change:
style.prefers_theme
.With this change:
html[data-theme]
and@media (prefers-color-scheme)
.html[data-theme]
according tostyle.prefers_theme
.html[data-theme]
to his prefer dynamically.把构建时候根据
style.prefers_theme
的取值直接写死到 css 中的亮色/暗色/自动样式,调整为根据html[data-theme]
和@media (prefers-color-scheme)
自适应的样式。这样给运行时(访客浏览页面的时候)访客自行改变色系提供了可能性。站点作者可以在喜欢的位置放置一个按钮,供访客自行切换色系,比如放在 leftbar 底部(在
icons.yml
中增加了default:theme
以便直接使用,并提供switchTheme()
函数用于切换主题):提供的
switchTheme()
函数可以在 亮色 / 暗色 / 跟随系统 三者之间循环切换,并将当前的选择记录在 local storage 中。访客手动切换时,页面会弹出 toast,提示切换到了哪个状态,如:另:如果站点开启了 giscus 评论,评论区的配色也会同步调整。