暗色模式自动主题切换器

[pmusaraj (Penar Musaraj)]

Discourse 核心现已支持 https://meta.discourse.org/t/automatic-dark-mode-color-scheme-switching/161593，此组件现已弃用，不应再使用。

仓库：

https://github.com/pmusaraj/discourse-dark-mode

安装说明：Installing a theme or theme component

此组件的作用是什么？

此组件允许在浏览器设置为深色模式时自动切换到深色主题。此功能仅对已登录用户在所有支持 prefers-color-scheme 媒体查询的浏览器上有效。

默认情况下，此组件处于启用状态，个别用户可在其“偏好设置 > 界面”屏幕中将其关闭。管理员也可以将组件设置为默认关闭，此时用户将在其界面偏好设置中看到启用自动切换的按钮。

工作原理？

如果浏览器处于深色模式，此组件将重新加载 Discourse 并启用深色主题。如果浏览器返回到浅色模式，此组件将重新加载并启用默认主题。

如果用户在访问网站时切换了深色模式，组件也会重新加载（如上方视频所示）。

（如果您启用了两个以上的主题，且用户选择了默认主题或深色主题以外的主题，此组件将不执行任何操作，即尊重用户的选择。）

配置

• 确保已安装深色主题，并且用户可以选择该主题
• 将此组件同时添加到默认主题和深色主题中（非常重要，如果您未将其添加到两个主题中，用户将无法切换回默认主题）
• 在组件设置中，在 dark theme id 中输入您的深色主题 ID

[Stephen]

Awesome, although flux is overkill just to toggle dark mode on the mac. Night Owl will do the same thing without interfering with anything else.

[pmusaraj (Penar Musaraj)]

我刚刚向这个主题组件推送了一个小更新，使其兼容 iOS 13（该系统将推出深色模式，并支持在傍晚自动启用该模式）。

[mekentosj (Alexander Griekspoor)]

感谢提供这个超棒的组件，我一直在找它！可惜我好像无法让它正常工作。也许是个小问题，但我在哪里可以找到深色主题 ID？那只是主题的名称吗？

[pmusaraj (Penar Musaraj)]

谢谢！

ID 是在后台选中主题时，URL 中显示的主题编号。例如，在 URL /admin/customize/themes/39 中，ID 就是 39。

[mekentosj (Alexander Griekspoor)]

太棒了，效果完美，谢谢！真心希望这能成为标准 discourse 安装的一部分。

[Justin_Vega]

Google Chrome 现已支持 iOS 13 和 iPadOS 13 的深色模式。不过，对于 Google Chrome 在 macOS Mojave 或 macOS Catalina 上的深色模式支持，我尚不太确定。

Google Chrome 的支持将在何时到来？

[pmusaraj (Penar Musaraj)]

它在 Chrome 中应该已经可以工作了，底层使用的是 prefers-color-scheme 媒体查询，如今浏览器对该功能的支持相当不错：Can I use... Support tables for HTML5, CSS3, etc

[Justin_Vega]

@pmusaraj

它在 Chrome 中应该已经可以工作了，底层使用的是 prefers-color-scheme 媒体查询，如今浏览器对该功能的支持相当不错：Can I use… HTML5、CSS3 等的支持情况表

哦，听到这个太好了！

@mekentosj

真心希望这能成为标准 Discourse 安装的一部分。

是的，我也非常希望这能成为标准 Discourse 安装的一部分。有些人只喜欢更新他们的论坛，而不会做更多的事情。

[mekentosj (Alexander Griekspoor)]

@pmusaraj 我注意到切换功能仅对已登录用户有效，是否有办法让尚未创建账户的匿名用户也能自动设置（例如，在使用无痕浏览器窗口时自动切换为深色主题）？

[terraboss (Markus)]

@pmusaraj

谢谢！

ID 是在管理员后台选择主题后，URL 中显示的主题编号。例如，在 URL /admin/customize/themes/39 中，ID 就是 39。

这对我来说不起作用 :-/

仅作为未来更新的建议：如果能提供一个下拉菜单来选择正确的主题，那就太好了。

[Nisutec (Niclas)]

@pmusaraj

该组件会跟随您的 Mac 或手机的深色模式。

“prefers-color-scheme”功能也支持 Windows。最新的 Chrome Beta 版和最新的 Firefox 版本均支持此媒体查询。

[tomtjes (Thomas Reintjes)]

该组件似乎与 2.4.0.beta11+39 存在兼容性问题。在我的仅限注册用户的社区中，https://mydomain/login 登录页面显示为空白。停用该组件后，功能恢复正常。

[pmusaraj (Penar Musaraj)]

我无法在本地使用最新版本的 Discourse 和组件复现此问题。当登录界面为空白时，浏览器控制台中是否有报错？

更新：Thomas 遇到的问题已在组件中修复。感谢反馈！

[ChrisBeach (Chris)]

+1 支持将此功能纳入 Discourse 核心