我喜欢这个组件!
但我遇到了一个小问题。
看起来该组件仅在启用了“启用自动暗模式配色方案”选项时才有效。当启用该选项且系统偏好设置为暗模式时(即,首选配色方案:暗),我遇到了问题。
在上述场景中,当我尝试通过“偏好设置”>“界面”>“主题”切换到浅色主题时,什么也没发生,这对我来说没关系。据推测,由于我的系统偏好已设置为暗模式,因此在 Discourse 中切换到浅色模式不会覆盖它。
当我使用“暗/浅模式切换器”组件执行相同操作时,如果 Discourse 中的主题偏好设置为浅色,则切换器实际上允许我切换到浅色模式(在我看来这更好),但标题中的网站徽标仍处于暗模式,在浅色模式下难以看清。当我查看检查器时,我看到该元素如下所示:
<div> class="title"><a> href="/" data-auto-route="true"> <picture> <source srcset="<link to image>" media="(prefers-color-scheme: dark)"> <img src="<link to image>" id="site-logo" class="logo-big"> </picture> </a> </div>
我注意到 media=“(prefers-color-scheme: dark)” 部分,尽管我们现在处于切换器设置的浅色模式。
我应该补充一点,当 Discourse 中的“启用自动暗模式配色方案”选项未选中时,网站徽标通常可以在浅色和暗模式之间正常切换。但是,这会阻止显示“暗/浅模式切换器”![]()
此外,如果 Discourse 中的主题偏好设置为暗色(通过“偏好设置”>“界面”>“主题”),并且我的系统偏好也是暗色,则切换器不会在浅色和暗色之间切换——它始终保持在暗主题。
理想情况下,我希望“暗/浅模式切换器”组件能像现在一样工作,但让标题中的网站徽标跟随当前活动的浅色/暗色设置,而不是用户的系统首选配色方案。