# Highlight color

**URL:** https://meta.discourse.org/t/highlight-color/82757
**Category:** Support
**Created:** [March 12, 2018, 12:53am UTC](https://meta.discourse.org/t/highlight-color/82757 "2018-03-12T00:53:14Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![alekstrust](https://avatars.discourse-cdn.com/v4/letter/a/c89c15/32.png) [@alekstrust](https://meta.discourse.org/u/alekstrust)
#### Post date: [March 12, 2018, 12:53am UTC](https://meta.discourse.org/t/highlight-color/82757/1 "2018-03-12T00:53:14Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/2/8/28b70f947320d3875b4a55f4a4f73fe09e3358b9.jpg)

Is it the default behaviour?

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [March 12, 2018, 1:16am UTC](https://meta.discourse.org/t/highlight-color/82757/2 "2018-03-12T01:16:14Z")

</div>

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:

```plaintext
$highlight: #1a1a1a; 

```

And the usage would be like:

```plaintext
background-color: $highlight;

```

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

```plaintext
$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:

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

```

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [September 9, 2019, 8:52pm UTC](https://meta.discourse.org/t/highlight-color/82757/3 "2019-09-09T20:52:56Z")

</div>

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`?

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [September 10, 2019, 9:21pm UTC](https://meta.discourse.org/t/highlight-color/82757/4 "2019-09-10T21:21:56Z")

</div>

You can find all the colors here: [color\_transformations.scss](https://github.com/discourse/discourse/blob/d348368ab6790be8f69b8d3bc4352c96aaab73c3/app/assets/stylesheets/common/foundation/color_transformations.scss)

The `about.json` [file](https://meta.discourse.org/t/structure-of-themes-and-theme-components/60848) 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

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

```

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [April 15, 2023, 8:22am UTC](https://meta.discourse.org/t/highlight-color/82757/5 "2023-04-15T08:22:57Z")

</div>



---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [April 15, 2023, 8:33am UTC](https://meta.discourse.org/t/highlight-color/82757/6 "2023-04-15T08:33:03Z")

</div>