颜色是如何工作的以及如何更改它们？

pHneutre · 2025 年3 月 20 日 10:12

抱歉主题比较宽泛，但我一直在琢磨这个问题，找不到合适的教程或解释。

每当我需要更改 Discourse 中的任何颜色时，我都会遵循以下路径：

颜色是否由主题组件管理？如果不是，
似乎是由 /admin/customize/colors 管理的吗？如果不是，
打开开发者工具并尝试查找匹配的 CSS

但之后我就迷失了，因为我发现了像 var(--primary-low) 这样的东西，我不知道它们在哪里定义的，尽管它们看起来与 /admin/customize/colors 中的主颜色概念有关。所以：

这些 var() 东西是如何定义的？
如何以一致的方式修改它们是推荐的方法？

Canapin · 2025 年3 月 20 日 11:15

颜色在这里（计算）:

github.com/discourse/discourse

app/assets/stylesheets/common/foundation/color_transformations.scss

main

// standard color transformations, use these if possible, and add any new dark-light-diffs here
// any variables defined here can be added in theme color schemes
// all variables should have the !default flag

@use "sass:string";

// primary
$primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-low: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%) !default;
$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%) !default;
$primary-high: dark-light-diff($primary, $secondary, 30%, -25%) !default;
$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%) !default;

// primary-numbers
$primary-50: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-100: dark-light-diff($primary, $secondary, 94%, -80%) !default;
$primary-200: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-300: dark-light-diff($primary, $secondary, 80%, -60%) !default;
$primary-400: dark-light-diff($primary, $secondary, 70%, -45%) !default;

This file has been truncated. show original

CSS 变量在这里定义:

github.com/discourse/discourse

app/assets/stylesheets/color_definitions.scss

main

// This file maps all SCSS color variables to CSS custom properties.
// It is compiled to CSS separately from the rest of the app.
// The source variables come from color_transformations.scss and variables.scss
:root {
  color-scheme: #{schemeType()};

  --scheme-type: #{schemeType()};
  --primary: #{$primary};
  --secondary: #{$secondary};
  --tertiary: #{$tertiary};
  --quaternary: #{$quaternary};
  --header_background: #{$header_background};
  --header_primary: #{$header_primary};
  --highlight: #{$highlight};
  --danger: #{$danger};
  --success: #{$success};
  --love: #{$love};
  --d-selected: #{$selected};
  --d-hover: #{$hover};
  --always-black-rgb: 0, 0, 0;

This file has been truncated. show original

如果你想覆盖比如 --primary-medium，你可以在你的主题中添加这个:

:root {
    --primary-high: red;
}

但是，我不知道如何使用颜色转换函数，这需要 SCSS 变量。

我看到 @import "common/foundation/variables"; 不是必需的，因为 “核心和主题变量现在在任何 SCSS 文件编译之前注入”，但我仍然无法让它工作。我将把话筒交给更有知识的用户

ondrej · 2025 年3 月 20 日 13:13

您可以查看样式指南

您也可以查看 colors 的 /styleguide/atoms/colors 以获取颜色。您必须通过搜索“styleguide”在您的站点设置中启用它

例如：https://meta.discourse.org/styleguide/atoms/colors

pHneutre · 2025 年3 月 20 日 13:24

哇，我第一次听说 styleguide，谢谢。
那么，正如 @Canapin 所说，我理解自定义 CSS 是修改这些样式的唯一方法，对吗？（如果你愿意，请给我一个来确认）

awesomerobot · 2025 年3 月 20 日 13:37

这种方法可能是最简单的，它适用于任何自动生成的颜色

但你也可以像这里介绍的那样，在主题的about.json文件中覆盖颜色：Override values for auto-generated color variables

system · 2025 年4 月 19 日 13:37

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

话题		回复	浏览量
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	11857	2018 年1 月 9 日
Referencing Discourse theme color variables in custom theme component? Support css	4	72	2025 年4 月 20 日
Styling Discourse with variables: Show & Tell Dev dev-news	1	164	2025 年8 月 5 日
Reference for full color customization Dev	4	1306	2023 年2 月 14 日
Challenges creating a custom color palette Dev	8	149	2025 年1 月 29 日

颜色是如何工作的以及如何更改它们？

相关话题