38

The color changes to the top bar now make it SCREAM AT THE USER .. as if it contained neon icons. All the icons are an eye magnet with the dark background.

It's not so bad on Stack Exchange sites where the page background is white (like here at meta or any beta site) or when there's a color bar below it (also like here at meta) or when its dark on light such as Stack Overflow.

Is there any way to tone down the white?

It's kind of hard to express how distracting they are on the main Stack Exchange site I visit. It's seriously just a constant pull on the eyes, as if someone is shining a flashlight at your eye and as much as you try and just accept it and ignore it... you can't help but notice it constantly.

I'd accept that perhaps this is a design failure at Graphic Design which does not have the color bar below the top bar or a white page background. So the grey page background against the top bar just makes the icons SCREAM louder.

Enter image description here

Improve this question
12
  • 1
    There's another on a related topic: Option to remove fuzzy outline and restore clarity to the counts on new top bar.
    – W.O.
    Mar 31, 2022 at 8:20
  • I did search @ARogueAnt. Didn't find anything (I may have missed it though). That Q is somewhat of a tangent, not really the same. That Q is more about the number blips.. I'm referencing the actual icon color (white) irrespective of the numbers.
    – Scott
    Mar 31, 2022 at 8:23
  • 5
    Well, you've got my vote. I've had to change my browser styles twice since December trying to keep up with it all. This will make it the third.
    – W.O.
    Mar 31, 2022 at 8:28
  • 1
    Honestly. I don't know what was wrong with the top bar from last week?? I don't understand changes for change sake. But to be fair.. I'm sure there's a post I haven't read detailing in considerable length the rationale and, possibly misguided, logic behind making these random, seemingly unwarranted, design changes. And just for the record the numbers are harder to read now as well :)
    – Scott
    Mar 31, 2022 at 8:39
  • 3
    @Scott the topbar was moved into "Stacks" the design system they use. I get that they wan't to get everything into there, and are doing that bit by bit, for the sake of consistency in the overall design and to keep it maintainable. At the same time I'm not overly fond of the changes either.
    – Luuklag
    Mar 31, 2022 at 8:41
  • @Luuklag A post explaining this would already have helped instead of just silently rolling it out with all the accompanying bugs...
    – samcarter_is_at_topanswers.xyz
    Mar 31, 2022 at 8:43
  • 2
    "It's easier to ask for forgiveness than permission." :) I do understand why they just pop stuff like this into the live stacks. The difficulty for me is the delay or, at times, seeming unwillingness to address visual issues related to specific stacks. Unless dozens of users here are mentioning an issue, it languishes. I don't think posting issues like this on a specific stack's meta does anything but alert those mods - who point you back to here. If I could post this on meta.GD.SE and know it's seen by the correct eyes which could alter the stack-specific CSS to adjust ... I'd do that.
    – Scott
    Mar 31, 2022 at 8:54
  • 1
    I honestly thought they were cut-outs (the white color of the icon is the same as the white background of this page). Look at the white space when the profile picture doesn't load properly - Image
    – Justin
    Mar 31, 2022 at 8:59
  • Cutouts would be much better. I imagine that presents other issues for many stacks though.
    – Scott
    Mar 31, 2022 at 9:01
  • 4
    @Scott "I'm sure there's a post I haven't read detailing in considerable length the rationale" - in normal site, where users first and actually cared about of course, it's trivial. SE is neither of those. Never was, and sadly looks like never will be. They try, they really do, but just can't do it. They move one step forward, ten steps backwards.
    – Shadow Wizard Is Sad And Angry
    Mar 31, 2022 at 10:54
  • (As this was posted before this year's April fool (the blog post is tagged with "april fools"), it was unrelated.)
    – This_is_NOT_a_forum
    Apr 1, 2022 at 12:12
  • @Scott: Just so you're aware, if a post is made on any meta site, a mod can escalate it to the staff's attention by adding the [status-review] tag; that will then automatically create a ticket in our system, and the CMs can then forward that request to whichever team is responsible for handling the issue. (See this Q&A for more info about this process.) That's true on both MSE and other sites' Metas. That said, for issues that affect the whole network, it is generally better to post on MSE rather than another Meta.
    – V2Blast
    Apr 2, 2022 at 0:58

3 Answers 3

Reset to default
9

We've updated the topbar item color on the forced dark topbar (as seen on non-Stack Overflow sites) to be a tad dimmer. The previous color was taken from the old topbar styles' font color and applied across all items, including icons. This turned out to be a tad too high contrast for most people, so we've reduced the color to somewhere in between the new and old styles.

A visual comparison of the old vs new vs newer colors (on the current topbar component) and their WCAG contrast ratings:

enter image description here

Improve this answer
9
  • Yes. Thank you. This was appreciated and is much better.
    – Scott
    Apr 1, 2022 at 16:52
  • 1
    @Ben Teams hasn't been updated: that's still bright-white despite the black top-bar.
    – Andrew Leach
    Apr 1, 2022 at 17:48
  • 1
    Still bright white when there are inbox items, and number very small. (Which is actually worse bug than the bright color.)
    – Shadow Wizard Is Sad And Angry
    Apr 1, 2022 at 17:58
  • 1
    All we need is a dab of violet in there and we will have the entire rainbow of colors just on the top bar. SE's color cues are kind of a mess semantically in my opinion. I always find it a bit off-putting that the staff tag is a close, but different color of red from status-* tags. After the site-dependent themes were gutted for performance reasons, it seems like we just gave up on design.
    – ColleenV
    Apr 5, 2022 at 18:45
  • I just put my finger on why your screenshots bug me... Why is the profile at the end of your bar and the text on the orange Stack Overflow logo (or the blue Stack Exchange logo) missing, when my profile is by the search box? Where are these bars from? I can't get the logo to compress without also compressing the profile to just the avatar image.
    – ColleenV
    Apr 5, 2022 at 19:38
  • @ColleenV Those screenshots were taken from the component docs here. I think the component docs had started out with the same layout, but might have accidentally drifted over the many iterations I went through during development of the component. I'll go back in and update the docs to roughly match the usage in prod.
    – Ben Kelly StaffMod
    Apr 6, 2022 at 18:30
  • Thanks, I know I'm a bit of a weirdo but discrepancies like that bug me and make my brain start chasing questions down rabbit holes :)
    – ColleenV
    Apr 6, 2022 at 18:33
  • No, I totally get it - I do too! At the end of the day, we're both trying to do the best we can to improve something we're passionate about.
    – Ben Kelly StaffMod
    Apr 6, 2022 at 18:40
  • All three options are just bad. Please just change it back to the way it was - nice muted gray, decent-size balloons.
    – einpoklum
    Apr 10, 2022 at 20:54
17

This is only a temporary workaround until they hopefully revert the change. Just use Greasemonkey / Violentmonkey or any other custom CSS tool you may have.

Luckily, CSS offers a brightness filter that just seems made for issues like this one...

// ==UserScript==
// @name     Save My Eyes
// @include     https://*.stackexchange.com/*
// @include     https://*.superuser.com/*
// @include     https://*.serverfault.com/*
// @include     https://*.stackapps.com/*
// @include     https://*.mathoverflow.net/*
// @include     https://*.askubuntu.com/*
// @grant    GM_addStyle
// @run-at   document-start
// ==/UserScript==

GM_addStyle ( `
   .s-topbar .s-topbar--content .s-topbar--item  > .svg-icon
   {
      filter: brightness(75%) !important;
   }
` );

Using a brightness 75% setting seems quite acceptable:

screenshot after using the userscript

Note, the > .svg-icon was added to the CSS selector in order to prevent the avatar from being dimmed too. If you copied the script before the update, please upgrade to the last version above.

Improve this answer
8
  • 3
    I appreciate the answer. I'm sure it will come in handy for some. I, personally, am not fond of custom styling. Even if I dislike something, it merely serves as a reminder to not do the same thing in my work.
    – Scott
    Mar 31, 2022 at 9:29
  • 3
    I love the name of the script!
    – samcarter_is_at_topanswers.xyz
    Mar 31, 2022 at 9:32
  • 1
    @samcarter_is_at_topanswers.xyz now you know WHY the ViolentMonkey icon has red eyes... they were burned by looking at the new icons.
    – SPArcheon
    Mar 31, 2022 at 9:43
  • @SPArcheon :P Trouble with its eyes would explain why the Greasemonkey keeps staring at me like this - it is a bit creepy :)
    – samcarter_is_at_topanswers.xyz
    Mar 31, 2022 at 9:54
  • 2
    I don't like userscripts and never use any, but +1 for the name.
    – Shadow Wizard Is Sad And Angry
    Mar 31, 2022 at 10:57
  • Is there a similar script for restoring the red/green balloon sizes?
    – einpoklum
    Mar 31, 2022 at 14:03
  • @einpoklum I did not try it myself, but meta.stackexchange.com/a/377614/237989 claims to undo all the changes
    – samcarter_is_at_topanswers.xyz
    Mar 31, 2022 at 15:15
  • @samcarter_is_at_topanswers.xyz thanks for the link. Different approach, more invasive. Like you said, the user does indeed try to undo all the changes, not only the color. I didn't try the script since I was just focusing on reducing the eye strain caused by the "look straight at the sun" white. May be worth a test... I just wonder why they used JavaScript document manipulation instead of GM_addStyle (which is still applied via JavaScript but is far more readable)
    – SPArcheon
    Mar 31, 2022 at 17:14
17

Thankfully.. the icons appear to have been ever-so-slightly tweaked in color overnight.

The change is so slight that it almost goes unnoticed.. but, the "neon" aspect of the icons has been diminished considerably.

enter image description here

Thank you to whoever is responsible! This is much better.

Improve this answer
3
  • .. I would point out that now... when the trophy icon highlights as green due to a badge award... the green is exceptionally dark. It's still obviously green and the dark icon does make one notice it, but it does really seem as "joyful" as the previous green was - i.e it's no longer "Yay! an award!" it's more "why is that so dark?" -- I know, I know... users.. always finding something to b**** about. :)
    – Scott
    Mar 31, 2022 at 18:04
  • 1
    I posted this as an answer to the original post Idea behind new top header icon color. Hope you don't mind.
    – Justin
    Mar 31, 2022 at 18:32
  • 1
    No problem @Justin :)
    – Scott
    Mar 31, 2022 at 18:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .