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