暗色模式说明:如何选择以及如何启用切换

简介

本指南涵盖暗色模式(dark mode)的内容、如何选择以及如何启用它。

什么是暗色模式?

正如《福布斯》所解释的:

暗色模式的核心理念在于,它在保持可读性所需的最低色彩对比度的同时,减少设备屏幕发出的光线。

暗色模式本质上是在您的设备上使用以深色(通常为黑色或灰色)为主的界面主题,并配以浅色文字以形成对比。Discourse 提供了许多同时支持浅色和深色配色方案的主题。

如何选择暗色模式?

在您的 Discourse 论坛中,管理员首先需要安装它。在 admin/customize/themes 页面下,管理员可以在热门主题列表中选择“Dark”(深色)主题。
之后,您需要前往 my/preferences/interface 来更改主题。您应该会看到如下页面:
(移动端)

在此之后,点击显示当前主题的下拉菜单,或者找到“主题”下拉菜单。在我的案例中,它是“Meta Branded”。
然后,从下拉菜单中选择“Dark”(深色),或任何具有深色配色方案的主题(稍后我们将了解如何识别)。
选择您想要的主题后,点击“常规”(Regular)下拉菜单。选择任何名称中包含“Dark”(深色)一词的配色方案。常见的选项包括“Dark”、“WCAG Dark”和“Solarized Dark”。

:warning: 在遵循本指南时,选择任何适用于浅色模式的配色方案都不会产生良好的效果。建议您为本指南选择“Dark”(深色),因为我们将使用该方案。

完成以上所有步骤后,您可以点击页面底部的 保存更改 按钮。这将使 Discourse 进入暗色模式(或者更准确地说,应用深色配色方案)。

暗色模式下拉菜单的作用是什么?

我知道您可能正对此感到好奇。
简单来说,您在此处设置的配色方案会在您的设备处于暗色模式时生效。当您的设备处于暗色模式时,所选的配色方案将覆盖在“常规”下拉菜单中选择的方案。
通常,您无需更改此设置。但是,如果您已在“常规”中选择了某个配色方案,并希望其在“暗色模式”下保持一致,而无需在切换配色方案时反复调整,您可以将“暗色模式”下拉菜单设置为“与常规相同”,这样 Discourse 将遵循“常规”中选择的方案。
如果您的设备处于浅色模式,“暗色模式”下拉菜单将不会产生任何效果。

那么……如何检查某个主题是否包含深色配色方案?

啊,没错!基本上,您可以选择一个主题,查看其支持的配色方案,并检查是否存在深色配色方案。一个很好的判断标准是查找“WCAG Dark”,因为这是一种遵循无障碍指南的配色方案。

暗色/浅色切换开关

既然 此组件 已合并到核心代码中,您便无需再单独安装它。

有关该切换开关的更多信息,请参阅以下主题:

结论

就是这样!您已成功找到更改主题为暗色模式的区域,并尝试了不同的配色方案!


来源与引用

福布斯:https://www.forbes.com/uk/advisor/mobile-phones/what-is-dark-mode-and-should-you-be-using-it/
为管理员添加暗色模式:Looking for default dark theme - #2 by JammyDodger

本指南中的所有信息均由人工编写,图片说明除外。其他信息均为原创,若非原创,均已在上文提供链接。

6 个赞

可能只有我一个人,但图片似乎在我这边没有加载出来:

4 个赞

我重新上传了。再试试?

5 个赞

现在可以了!:grinning_face_with_smiling_eyes:

4 个赞

我已更新帖子,将最近的组件合并到核心中。

4 个赞