How do colors work and how to change them?

Product Support

AI-generated summary

In a support discussion about modifying colors in Discourse, pHneutre expresses confusion over CSS variables like var(--primary-low) and seeks guidance on how they’re defined and how to modify them consistently. Canapin explains that these variables are generated via SCSS files in Discourse’s codebase — specifically in color_definitions.scss and color_transformations.scss — and suggests overriding them directly in a theme using :root { --primary-high: red; }. However, Canapin notes uncertainty about using SCSS color transformation functions. ondrej recommends using the built-in styleguide (/styleguide/atoms/colors) — accessible after enabling it in site settings — as a visual reference for available colors. pHneutre confirms understanding that custom CSS is the primary method for overriding these styles. awesomerobot adds that another approach is to override auto-generated color variables via a theme’s about.json, referencing a meta.discourse.org guide. The consensus is that while CSS variables offer flexibility, the most straightforward method is direct override in theme CSS or via theme metadata.

1

Sorry for the broad subject but I’ve been puzzling over this and I cannot find an appropriate tutorial or even explanation.

Whenever I need to change a color anywhere on Discourse, I follow this path:

  • Is the color managed by a theme component? If not,
  • Does it seem to be managed by /admin/customize/colors? If not,
  • Open dev tools and try to find the matching CSS

But then I’m lost because I find things like var(--primary-low) and I have no idea where these are defined, though they look related to the notion of primary color in /admin/customize/colors. So:

  • How are these var() things defined?
  • What is the recommended way to modify them consistently?
3

The colors are (calculated) here:

The CSS variables are defined here:

If you want to override let’s say --primary-medium, you can add this to your theme:

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

However, I don’t know how to use the color transformation functions, which need SCSS variables.

I see that @import "common/foundation/variables"; is not required as “core and theme variables are now injected before any SCSS file is compiled”, but I couldn’t have it working nonetheless. I’ll pass the mic to more knowledgeable users :microphone:

4

You can check the style guide

You can check the /styleguide/atoms/colors for colours too. You have to enable in your site settings by searching for ‘styleguide’

For example: https://meta.discourse.org/styleguide/atoms/colors

5

Wow, first time I hear of styleguide, thanks.
So I understand custom CSS is the only way to modify these styles, as @Canapin said, right? (:heart: for confirming if you want)

6

This method is probably the easiest, it will work for any of the automatically generated colors

but you can also override colors in a theme’s about.json file as described here Override values for auto-generated color variables