# Site header icons don't use header primary color

**URL:** https://meta.discourse.org/t/site-header-icons-dont-use-header-primary-color/108093
**Category:** Bug
**Created:** [2월 1, 2019, 6:45오전 UTC](https://meta.discourse.org/t/site-header-icons-dont-use-header-primary-color/108093 "2019-02-01T06:45:56Z")
**Posts on this page:** 1
**Showing post:** 4

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2월 1, 2019, 3:05오후 UTC](https://meta.discourse.org/t/site-header-icons-dont-use-header-primary-color/108093/4 "2019-02-01T15:05:37Z")

</div>

There is a fix here, but ultimately the color might be different from where it was before:

**The fix**  
I added a new color variable, but was comparing the wrong colors within it.  
`$header_primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%);`

It looked fine in our default themes because the headers use the same colors as the rest of the page, but if the header is dark and the body is light, then you’re going to notice the issue (what @fhe is reporting)

I’ve just updated that to use `$header_primary` and `$header_background` instead of `$primary` and `$secondary`.

* * *

That being said, the colors might be slightly different from what they were before. Here’s why:

**How it worked before**  
Previously they used `$header_primary, $lightness: 50` or `$header_primary` along with `opacity: .7`

If you were using a light background in the header, you’d end up with `$header_primary` adjusted to be 50% lighter (which is basically a light grey for our standard light theme).

If you were using a dark background you ended up with `$header_primary` which is just the unaltered color.

How we were treating the color was entirely different based on whether it was a dark or a light background, which isn’t consistent.

**How it works now**  
Those icons were updated to use `$header_primary-low-mid`. Which is adjusted to be brighter or darker depending on the header’s background color

The way it behaves now is the same for dark/light themes. On light backgrounds `$header_primary` is lightened to have less contrast and for dark backgrounds `$header_primary` is darkened to have less contrast.

---

_[View the full topic](https://meta.discourse.org/t/site-header-icons-dont-use-header-primary-color/108093)._