|||
-|-|-|
| 摘要 | 深色/浅色模式切换器 在汉堡菜单中添加了一个可点击的切换配色方案按钮。该切换器可在同一主题之间切换浅色或深色配色方案。
| 存储库链接 | https://github.com/discourse/discourse-color-scheme-toggle
| 刚开始使用 Discourse 主题？ | Discourse 主题使用入门指南
功能
此组件允许在您的 Discourse 论坛上显示深色/浅色模式切换图标。如果您的系统操作系统更改为与当前配色方案不同的模式，它也会自动切换。
您可以选择将切换器显示在新的 Discourse 侧边栏或标题中，与其他图标并列。
侧边栏
标题
重要步骤
为了使其正常工作，需要在您的 /admin/customize/colors 区域启用至少 2 种配色方案选择。至少需要启用 color scheme can be selected by users 选项。
需要为深色模式设置默认配色方案：/admin/site_settings/category/basic?filter=dark
完成这些步骤后，用户应该可以在其用户偏好设置界面菜单中选择“浅色”和“深色”偏好设置之间的两种配色方案。
设置
| 名称 |
描述 |
| svg icons |
|
| add color scheme toggle to header |
在站点标题中添加配色方案切换按钮 |
| 翻译 |
默认 |
| toggle_button_title |
切换配色方案 |
由我们托管？ 标准版、商务版和企业版计划均可使用主题组件。
45 个赞
这是否只适用于用户通过转到他们的偏好设置并启用它来输入？如果可以进行全站实现而不是基于用户，那会更好。
管理员将为整个站点启用此组件。
之后，根据设置该组件的管理员的设置，切换将出现在用户汉堡菜单或论坛的标题中。启用后，所有用户都可以使用此功能。
1 个赞
抱歉，我认为我的问题没有说清楚。从您的安装教程来看，在管理员端启用后，无论是通过汉堡菜单还是标题栏，似乎每个单独的用户都需要进入他们的偏好设置并启用/添加浅色/深色配色方案。否则，新用户/未登录用户将无法使用。所以我的问题是：
是否可以将配色方案应用于整个网站，而不是逐个用户应用？
您的图片供参考：
我相信一旦管理员启用浅色方案和深色方案，它们就会被自动分配。之后，用户可以根据个人喜好编辑所使用的深色和浅色方案。
您可能还必须在此处添加一个选择 /admin/site_settings/category/basic?filter=dark
我已经更新了说明以反映此添加。抱歉造成混淆！
3 个赞
当默认颜色方案为深色时，似乎无法正常工作。我们该如何适应这种情况？
当默认颜色方案为深色时，除非用户从界面偏好设置中选择浅色方案，否则切换按钮将无法工作。
2 个赞
嗯，我认为这是因为我正在根据浏览器和系统设置检查 prefers-dark 用户方案设置。
您能否查看您的检查器控制台，看看在使用切换按钮时是否有任何内容弹出？
我可能需要对此进行调查。
1 个赞
domain.com/logs 中的警告；
Dark-Light Toggle 主题/组件正在抛出错误
initialize@https://develcoder.com/theme-javascripts/1d5669cf8344e0837406cef0be37bb086b5968f5.js?__ws=develcoder.com:153:73
initialize@https://develcoder.com/assets/application-01686ed6ee22a989833acbbce970ba63.js:1:11855
https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268273
each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:429458
walk@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:428478
each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427828
topsort@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427874
_runInitializer@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268501
runInstanceInitializers@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268222
_bootSync@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:252462
didBecomeReady@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:257791
invoke@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418024
flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:417018
flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418946
_end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424401
end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:421081
_run@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424937
u@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26509
https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26807
1 个赞
Arta_S
(Arta)
21
您好，
我遇到了一个问题。添加主题后，汉堡菜单中未添加切换图标。它们甚至不存在于原始代码中。另外，您此处演示的按钮不起作用。这意味着它们无法在浅色和深色主题之间切换。
还有其他人遇到同样的问题吗？
您能否检查一下开发人员工具控制台，看看是否有与此相关的任何内容？我在演示网站上看到图标运行正常。
Arta_S
(Arta)
23
这是视频：
我的主要问题是，在我的论坛上，我甚至在汉堡菜单中看不到这些选项：
您没有在屏幕录像中打开“控制台”选项卡，因此很难看到是否发生任何错误。
您是否确保遵循了此主题原始帖子中的每个步骤？
至少需要启用两个配色方案选择：/admin/customize/colors 区域
需要在以下位置启用深色主题：/admin/site_settings/category/basic?filter=dark
您是否作为用户在用户首选项中选择了两个配色方案，一个用于浅色，一个用于深色？
1 个赞
Arta_S
(Arta)
27
您好，
是的，这已正确执行。今天一切都显示正确。这是由于 cookie 引起的。奇怪的是，在其他浏览器（我从未访问过论坛）上，它也显示缺失。现在一切都正确了。谢谢您，并为我造成的困惑感到抱歉。
唯一的问题是，包括访客在内的所有用户都可以看到标题中的切换按钮。但是，作为管理员登录时，我却看不到切换按钮。这是故意的吗？这可能是服务器缓存或其他原因吗？
1 个赞
嗯，这很有趣。您是否在用户首选项中选择了深色和浅色配色方案？
您是否正在使用安装了该组件的主题？
2 个赞
Arta_S
(Arta)
29
我必须转到我的个人资料并启用此选项（启用自动暗模式配色方案），它才能显示在标题上。可能是我在摆弄时错过了那个复选框。
2 个赞
我喜欢这个组件！
但我遇到了一个小问题。
看起来该组件仅在启用了“启用自动暗模式配色方案”选项时才有效。当启用该选项且系统偏好设置为暗模式时（即，首选配色方案：暗），我遇到了问题。
在上述场景中，当我尝试通过“偏好设置”>“界面”>“主题”切换到浅色主题时，什么也没发生，这对我来说没关系。据推测，由于我的系统偏好已设置为暗模式，因此在 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 中的主题偏好设置为暗色（通过“偏好设置”>“界面”>“主题”），并且我的系统偏好也是暗色，则切换器不会在浅色和暗色之间切换——它始终保持在暗主题。
理想情况下，我希望“暗/浅模式切换器”组件能像现在一样工作，但让标题中的网站徽标跟随当前活动的浅色/暗色设置，而不是用户的系统首选配色方案。
1 个赞
MattiaB
(Mattia)
31
我也是！你找到解决方案了吗？
我不是前端开发人员，但我做了一些调试：
当处于深色模式时，就像我的计算机设置的那样，徽标的 HTML 看起来像这样：
徽标看起来不错，深色模式运行正常。切换到浅色模式时，主题变为浅色，但徽标消失（深色徽标保留）。
HTML 看起来是这样的：
有一行额外的代码 \u003csource srcset=\"https://radixtalk.com/uploads/default/original/1X/19838ecb731d3f87d9db76c927e793ab2e159f1e.png\" media=\"(prefers-color-scheme: dark)\"\u003e 会“阻止”正确徽标加载。如果我使用“检查元素”删除该行，只留下 \u003cimg src=\"https://radixtalk.com/uploads/default/original/1X/237090c67d33a1a38f9f031336dab420c4c4a37d.png\" alt=\"RadixTalk\" id=\"site-logo\" class=\"logo-small\" width=\"36\"\u003e，则会显示正确的徽标。
希望这些信息有用。
1 个赞
恐怕没有。我最终改变了页眉背景颜色，这样切换浅色和深色模式下的徽标就无关紧要了🤷🏻♂️
| 摘要 | 深色/浅色模式切换器 在汉堡菜单中添加了一个可点击的切换配色方案按钮。该切换器可在同一主题之间切换浅色或深色配色方案。
