本指南说明了如何为您的 Discourse 站点的外观设置浅色和深色模式颜色方案。它涵盖了每个主题的配置、方案分配和用户界面注意事项。
所需用户级别：管理员
配置不同的浅色和深色模式颜色方案可以让您的 Discourse 社区以符合您品牌、提高可访问性并让用户控制其查看体验的方式呈现。Discourse 主题系统的最新改进允许您为每个主题分配首选的浅色和深色方案，并允许用户选择他们所需的显示方式。
摘要
本指南涵盖：
- 了解浅色和深色模式方案分配
- 将浅色和深色颜色方案分配给主题
- 管理站点的颜色方案
- 为用户启用颜色模式选择器
- 了解面向用户的选项
- 方案使用和可访问性的最佳实践
了解浅色和深色模式方案分配
Discourse 主题支持明确分配“浅色”和“深色”颜色方案。这样，任何主题都可以根据用户的系统设置自动切换，或者让用户选择首选模式，同时保持您偏好的品牌颜色。
将浅色和深色方案分配给主题
要配置主题的颜色方案：
-
前往 管理 > 外观 > 主题和组件 (
/admin/config/customize/themes) -
点击您想要编辑的主题。
-
在主题设置中，找到 颜色方案 部分。
-
对于 颜色方案 和 深色颜色方案，选择您想要使用的方案。
-
点击主题设置页面底部的 保存。
这可确保您站点的外观在浅色和深色模式用户中都使用正确的方案。请注意，您的会员仍然可以选择其他用户可选的方案，但这里设置的方案将是默认的。
管理您的颜色方案
所有可用的颜色方案（及其链接的分配）都可以集中管理：
-
导航至 管理 > 外观 > 颜色方案 (
/admin/config/colors) -
在此处您可以编辑、添加或移除方案，将它们标记为用户可选，并将其分配为您主题的默认浅色和深色方案。
启用颜色模式选择器
在用户可以在站点上切换浅色和深色模式之前，您必须启用 interface_color_selector 站点设置。默认情况下，此设置为禁用。
要启用它：
- 前往 管理 > 设置 并搜索
interface color selector。 - 将其设置为以下之一：
- 在侧边栏页脚中显示 — 在侧边栏底部添加一个浅色/深色/自动切换按钮
- 在页眉中显示 — 将切换按钮添加到站点页眉
如果没有启用此设置，用户将不会在站点上看到颜色模式切换按钮，站点将自动遵循每个用户的系统颜色方案偏好设置。
面向用户的选项
用户偏好设置
用户可以选择他们偏好的站点查看模式：
-
前往 用户偏好设置 > 界面
-
在“颜色方案”部分，会员可以选择他们偏好的浅色和深色方案，以及他们想要使用的模式：浅色、深色、自动：
如果选择了“自动”，Discourse 将适应用户的系统颜色方案偏好设置。
最佳实践
- 品牌一致性： 自定义方案以匹配您两个模式的品牌。保持核心颜色一致，但要调整以适应对比度和可读性。
- 可访问性： 确保颜色对比度比例符合 WCAG 指南（此工具可能有帮助），尤其是在深色模式下，某些颜色可能看起来比较柔和。
- 在多种设备上进行测试： 检查跨设备和浏览器的两种模式下的外观。
- Logo 资源： 您可以在 管理 > 外观 > 站点 Logo (
/admin/config/logo) 上传浅色和深色模式的独立 Logo。 - 保持方案数量可控： 只提供用户需要或认为合理的方案数量。
常见问题
我可以拥有多个深色或浅色方案吗？
可以，但建议为每种模式保留一个主要方案以减少混淆。仅将主要方案分配给主题供用户选择。
我能强制每个人只使用浅色（或只使用深色）模式吗？
您可以通过将相同的方案设置为默认浅色和深色方案，并确保没有其他方案可供用户选择来实现这一点。
自定义主题组件会自动调整颜色吗？
如果它们使用 Discourse 的 CSS 颜色变量（例如 --primary、--secondary），它们将继承方案的颜色。最好避免在自定义 CSS 中使用硬编码的颜色。
方案切换会更改整个外观，还是只更改颜色？
只更改颜色变量。更改颜色方案时，结构、字体和布局保持不变。