I’ve installed v2.3.0.beta1 and noticed a ux regression.
The site header icons don’t use the header primary color specified in the color scheme:
@david & @awesomerobot is this related to your report on icons no longer using opacity?
2 Likes
Yes, almost certainly. I’ll add it to the list to fix
6 Likes
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
Many thanks for looking into this, @awesomerobot!
I did a rebuild and unfortunately, the result is quite different:
The correct coloring using #FFFFEF (which is also used for the font in my logo) would be something along
I’ve reported something similar back in December and think it’s related
https://meta.discourse.org/t/changing-the-color-of-the-header-category-nav/104338
Right, so the white you selected is slightly yellow and when it’s darkened the yellow becomes much more prominent.
If you want to override the color you can add some CSS:
.d-header-icons {
.d-icon {
color: #ffffef;
}
}
6 Likes
@awesomerobot should we keep this bug report open? Anything more to do on our side?
3 Likes
I think we’re good here.
3 Likes