暗色模式自动主题切换器

[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)]

I just pushed a small update to this theme component to make it compatible with iOS 13 (which will ship with Dark Mode as well as an option to automatically enable it in the evenings).

[mekentosj (Alexander Griekspoor)]

Thanks for this awesome component, I’ve been looking for this! Unfortunately I can’t seem to get it to work. Perhaps something trivial but where do I find the dark theme id? Is that just the name of the theme?

[pmusaraj (Penar Musaraj)]

Thanks!

The ID is the number of the theme in the URL when you’ve selected it in the admin. In this URL: /admin/customize/themes/39 for example, it’s 39.

[mekentosj (Alexander Griekspoor)]

Awesome, works like a charm, thanks! Really hope this becomes part of the standard discourse install.

[Justin_Vega]

Google Chrome now supports dark mode on iOS 13 and iPadOS 13. I’m not too sure about dark mode support for Google Chrome on MacOS Mojave or MacOS Catalina though.

When will support for Google Chrome arrive?

[pmusaraj (Penar Musaraj)]

it should work in Chrome already, under the hood it uses the prefers-color-scheme media query and browser support for it is pretty good nowadays: Can I use... Support tables for HTML5, CSS3, etc

[Justin_Vega]

@pmusaraj

it should work in Chrome already, under the hood it uses the prefers-color-scheme media query and browser support for it is pretty good nowadays: Can I use… Support tables for HTML5, CSS3, etc

Oh, that’s good to hear!

@mekentosj

Really hope this becomes part of the standard discourse install.

Yeah, I also really hope that this becomes part of the standard Discourse install. Some people only like to update their forums and don’t really go beyond that.

[mekentosj (Alexander Griekspoor)]

@pmusaraj one thing I noticed is that the switching only works for logged in users, is there a way to also have it automatically set for anonymous users that haven’t created an account yet (e.g. switch to dark theme while using a private browser window)?

[terraboss (Markus)]

@pmusaraj

Thanks!

The ID is the number of the theme in the URL when you’ve selected it in the admin. In this URL: /admin/customize/themes/39 for example, it’s 39.

Doesn’t work for me :-/

Just for future updates: It would be great, if there is some dropdown menu for choosing the right one.

[Nisutec (Niclas)]

@pmusaraj

This component follows your Mac’s or phone’s dark mode.

The “prefers-color-scheme” feature is also supported by windows. The newest Chrome Beta and newest Firefox Version supports this media query.

[tomtjes (Thomas Reintjes)]

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

[pmusaraj (Penar Musaraj)]

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

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

[ChrisBeach (Chris)]

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