Site header icons don't use header primary color

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.

10 Likes