[Bug] topbar 异常发光

[RYQ-22]

检查清单

• [x] 已经阅读过 官方文档 相关内容，并尝试进行搜索。
• [x] 尝试过在本地测试运行官方 demo 源码。
• [x] 尝试过在 Codespace 中测试运行官方 demo 源码。

问题描述

如图，设置了prefers_theme: dark后，浏览器默认是light主题时Topbar会异常发光，“站内搜索”的style也会稍微不同；浏览器默认dark主题时一切正常。

[welcome[bot]]

Thanks for opening your first issue here! Be sure to follow the issue template!

[RYQ-22]

设置成 prefers_theme: light 也会有类似的问题，即当浏览器为深色模式时文字周围会有黑色的模糊效果。看 inspect 的结果是因为文字阴影的效果还是用的亮色模式的 text-shadow: 0 0 4px #fff, 0 0 8px rgba(255, 255, 255, .8), 0 0 16px rgba(255, 255, 255, .6);

估计 bug 的原因是 navbar 的亮/暗色模式还是根据 prefers-color-scheme 决定的，换成根据 data-theme 决定可能就好了

[RYQ-22]

手动引入 css 覆盖一下至少效果正常了，不过感觉还是统一一下比较好

.navbar-blur {
    text-shadow:0 0 2px rgba(0,0,0,.2),0 0 4px rgba(0,0,0,.4)
}

.navbar-blur nav a:not(.active,.navbar-blur:hover) {
    filter:none
}

.navbar-blur:before {
    background:rgba(255,255,255,.2)
}

.navbar-blur:after {
    box-shadow:inset 0 0 2px 1px rgba(255,255,255,.2)
}

.navbar nav a.active {
    background:rgba(255,255,255,.25)
}

[xaoxuu]

是手动模式处理的问题，你可以暂时不用手动模式，跟随用户系统主题。