Inject different pieces of css code according to style.prefers_theme.
run time:
Visitor cannot switch theme among light / dark / auto.
With this change:
build time:
Use the same piece of css code, which adjust colors based on html[data-theme] and @media (prefers-color-scheme).
Set the default value of html[data-theme] according to style.prefers_theme.
The site owner can expose a button / icon to let visitor switch theme among light / dark/ auto.
run time:
When page is loading, check visitor preferred theme settings (in local storage). If there is, update html[data-theme] to his prefer dynamically.
If the site owner enabled visitor preferred theme, the visitor can switch theme among light / dark / auto. His choice will be save (in local storage), and will be applied to all his further visits.
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 评论,评论区的配色也会同步调整。