自动深色模式配色方案切换

您现在可以将 Discourse 站点配置为在用户设备处于深色模式时自动切换配色方案。如需快速预览,请访问 try.discourse.org 实例,并切换您设备的深色模式,以查看此新功能的效果。(此功能在 meta 站点上未启用。)

启用自动深色模式

要在您的实例上启用此功能,您可以在站点设置中选择深色模式配色方案:

设置该选项后,您可以在设备处于深色模式时重新加载站点,即可看到深色配色方案生效。

如果某个在浅色方案中效果良好的标志在深色背景下效果不佳,您现在可以在核心中新增的设置上传替代方案。

在这些设置中上传的文件将替换同名的常规设置,条件是:a) 已启用自动深色模式切换且用户设备处于深色模式,或 b) 用户正在使用深色主题(即使未处于深色模式)。之前使用 https://meta.discourse.org/t/alternative-logos-for-dark-light-themes/88502 的站点现在可以改用核心站点设置,并移除该组件。

有些用户可能不希望当浏览器处于深色模式时自动切换到深色配色方案。他们可以在“偏好设置 > 界面”页面中取消勾选“启用自动深色模式配色方案”选项来禁用此功能:


用户选择的配色方案选择器

要使用此功能,您需要在站点中创建多个配色方案,并将它们标记为用户可选:

完成后,用户应在“偏好设置 > 界面”页面中看到两个下拉菜单:

另请参阅 Update themes and plugins to support automatic dark mode

56 个赞

当它进入 Beta 频道时,我就可以进行测试了。从技术上讲,只要 ChromeOS(像 Android、iOS、macOS 等)支持 prefer-color-scheme 媒体查询,就没有理由无法运行。

我刚刚在 Beta 频道的 Chromebook 上尝试了一下。它勉强能用,但还不够完善。我可以强制所有网页内容(包括 Discourse 站点,我用 try.discourse.org 测试过)进入深色模式。但它似乎无法在操作系统在深色和浅色主题之间切换时同步切换网页内容。而且,在尝试过程中,我经常陷入一种混合状态,即界面的某些部分使用浅色模式,而其他部分使用深色模式。

对于其他想尝试的用户,请访问 chrome://flags,搜索“Dark”,并启用“系统 UI 的深色/浅色模式”和“强制网页内容使用深色模式”。

11 个赞

我们提供浅色和深色主题。深色主题能完美呈现所有内容,包括标签图标和话题预览。但在使用这些插件时,深色配色方案会出现不少显示问题。我不禁想问:为何不能为自动深色模式设置默认主题,而不是默认配色方案呢?主题似乎比配色方案提供了更灵活的调整空间。

4 个赞

我猜您是指“主题预览”插件在深色模式下存在一些显示问题?如果您点击您个人主页中的网站链接,我会发现深色模式下某些悬停颜色显示不正确。也许“主题预览”插件需要进行小幅更新以更好地支持深色模式(有一篇 面向插件开发者的指南)。如果是这样,我认为值得在该插件的主题中提出这个问题。

我们无法即时切换主题。主题可能包含自定义 JavaScript 代码,如果不重新加载页面,就无法切换这些 JavaScript 代码。

11 个赞

嗯,我在最新版本中没看到这个选项。

2 个赞

好的,如果只有一个可用的深色主题,复选框就会显示。我们最近引入了符合 WCAG 标准的主题,这将把界面更改为您截图中“颜色方案”下方看到的两个下拉菜单。

希望禁用自动深色模式的用户可以点击“深色模式”下拉菜单,并将其设置为“与常规相同”。

9 个赞

能否将此复选框默认设置为未勾选状态?我们社区的大多数成员还不习惯在暗色模式下浏览网站。不过,仍有一些用户希望保留自动暗色模式选项。

7 个赞

这仍然是测试此功能的最佳方式吗?我在使用 Chromebook 访问 try 实例并启用/禁用深色模式时,没有看到主题发生任何变化。即使刷新网页也无济于事。我使用的是最新版本的 ChromeOS。我还尝试创建一个测试账号并进行了同样的操作,但依然没有变化。

屏幕录制 2021-03-22 9.26.53 AM|视频

我还查看了其他我使用的网站,包括自托管站点和 Teams,但无法实现根据设备的深色模式设置自动切换。

附:很喜欢 ChromeOS 中的屏幕录制功能,非常棒!:heart_eyes:

4 个赞

所以在 Windows 和 iOS 上可以运行,但在 ChromeOS 上不行?测试结果显示是这样吗?这是否意味着 ChromeOS 可能需要更新,或者其处理方式与其他平台有所不同?@pmusaraj 有什么想法吗?

7 个赞

是的,这确实是一个 ChromeOS 的问题。在所有支持深色模式的操作系统(如 macOS、Windows、iOS、Android 以及多种 Linux 发行版)上,该功能都能正常运行。我们在此方面确实无能为力。

11 个赞

现在有可能启用吗?

3 个赞

嗯,说得有道理,我们如何在 Meta 上测试这一点 @pmusaraj?我已在 Windows 10 中为应用启用了“深色模式”,看到 Twitter(网页版/Chrome)变为了深色,但 Meta 却没有?

2 个赞

是的,Meta 上仍未启用此功能,因为我们有多个主题在此启用,每个主题都专为特定的配色方案设计。此外,我们的汉堡菜单中包含主题切换器,这与配色方案的兼容性不佳。

5 个赞

哦,我明白了。它在 Discourse 默认安装中能用吗?我能否让它与 https://discourse.codinghorror.com/ 一起工作?

4 个赞

是的,它在默认安装上可以正常工作。例如,它在 https://try.discourse.org 上就能运行。

https://discourse.codinghorror.com/ 上,您可能需要切换该设置(默认情况下设置为“无”):

2 个赞

啊,我明白了。我的安装版本比较旧,只有一种配色方案,即浅色模式。我基于默认的深色模式添加了一种新的配色方案,结果成功了——我现在可以确认,在 Windows 设置中切换深色和浅色配色方案会自动影响 Discourse!:tada:

不过,对于新安装的 Discourse,这是否能开箱即用呢?希望是可以的吧?

4 个赞

确实如此,系统默认提供了几种配色方案(浅色、深色、WCAG 浅色、WCAG 深色)。不过该设置默认处于关闭状态,新管理员需要找到并启用它。

4 个赞

我们是否可以将此设置在本版本中默认开启作为一个目标?只要我们随深色版本默认附带标志,应该就没问题吧?

6 个赞

这个功能非常实用,感谢将其纳入核心。

我制作了一个 GIF 来演示它在 Windows 上的效果。Discourse 瞬间切换,甚至比操作系统本身还快:+1

更多详细信息请查看我的 实例,如果您感兴趣的话。

https://forums.chalk.sg/t/prefer-a-dark-theme-try-out-dark-mode/110/2

9 个赞

:clap: 现在我可以阅读两倍的内容了。:laughing:

7 个赞