Highlight color

Product Support

AI-generated summary

Highlight Color Discussion Summary

The discussion revolves around the highlight color in Discourse themes. alekstrust noticed that the applied highlight color is transformed and asked if this is the default behavior. Johani confirmed that this is the default behavior and explained how the highlight color is used, along with three color transformations ($highlight-low, $highlight-medium, $highlight-high) based on the $highlight and $secondary values.

pfaffman asked how to override these color transformations globally in common.scss for a client who wants to keep the original highlight color. Johani provided a solution by overriding the color values in the about.json file of the theme, specifically in the color_schemes section.

1

Hi,
I’ve been playing with the color schemes. I’m trying to set the highlight color but when applied, the results are not the same colors, some kind of weird transformation is going on.
See the next image:

image
image1604×790 204 KB

Is it the default behaviour?

2

Yes, this is the default behavior.

There is the highlight color, which is the value you set in the color scheme,

In your case it would look like:

$highlight: #1a1a1a;

And the usage would be like:

background-color: $highlight;

And then there are three color transformations based on the $highlight and $secondary values and they are:

$highlight-low: dark-light-diff($highlight, $secondary, 70%, -80%);
$highlight-medium: dark-light-diff($highlight, $secondary, 50%, -55%);
$highlight-high: dark-light-diff($highlight, $secondary, -50%, -10%);

And these are used like so:

.overridden {
      background-color: $highlight-medium;
}
3

This is very helpful.

I have a client that thinksthey want to not have the various versions of these colors (I suspect that they’re wrong). How would I go about re-writing the various highlights to not change them in a theme? Can I override them globally in common.scss?

4

You can find all the colors here: color_transformations.scss

The about.json file of the theme has a section for colors. If you want to override any of the colors in the file above, you just need to define the new value in that section like so

{
  "name": "My theme",
  "about_url": null,
  "license_url": null,
  "assets": {},
  "color_schemes": {
    "My Colour Scheme": {
      "highlight-low": "FF0000",
      "highlight-medium": "FF0000",
      "highlight-high": "FF0000"
    }
  }
}