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.