Would it be possible to add an outline to the logos of Stack Exchange websites?

I am using the Stack Overflow Dark user style, and it makes the Super User logo mostly unreadable, and the text of the Server Fault logo also hard to read. This could possibly be fixed by the user style itself, but I believe adding a simple a 1px white outline to the logos would fix this issue. (This would be invisible with the default theme anyway so it wouldn't be a visible change for most users – the outline color could be different on other sites if the default background is not white.)

I consider this more than just a user style issue, such outlines are generally recommended for accessibility as users may be using dark/high contrast themes for more than just personal preference.


Screenshot of Super User logo on black background

Screenshot of Server Fault logo on black background

  • 4
    I don't see how significantly altering the design of a ton of site logos to accomodate for the shortcomings of a custom and not officially supported userscript is remotely a reasonable idea. – Christian Rau Jun 11 '19 at 15:49
  • 3
    @ChristianRau How is adding a 1px white outline (which would be invisible on the default white background anyway) "significantly altering" the design? – nyuszika7h Jun 11 '19 at 19:11
  • So you're proposing to only do it for logos that ought to be presented in a default white environment? That might be worth adding to the question. – Christian Rau Jun 11 '19 at 19:58
  • Instead of changing the logo image files, could you add the 1px outline to the site logos by adding .site-header .site-header--link img {border:1px solid #FFFFFF;} to the Stack Overflow Dark user style? – Dhaust Jun 12 '19 at 0:15
  • @ChristianRau I did say "white (or black, if applicable for other sites)" but I'll clarify, not sure if it could be another color for any others. – nyuszika7h Jun 12 '19 at 8:07
  • @Dhaust That won't work because the logos have a transparent background so it would simply apply a rectangular border to them, it would look bad and wouldn't fix the visibility issue. Putting a drop-shadow on it may be a solution but I haven't managed to make it look nice so far. – nyuszika7h Jun 12 '19 at 8:08
  • I've come up with this as a workaround, though some logos such as codegolf look better without it: .site-header img { filter: drop-shadow(-1px 0px 0 #aaa) drop-shadow(0px -1px 0 #aaa) drop-shadow(1px 0px 0 #aaa) drop-shadow(0px 1px 0 #aaa); } – nyuszika7h Jun 12 '19 at 9:29
  • @nyuszika7h Ah, good point, I hadn't had a proper look at the underlying image files. No need for the CSS workaround now though because Samuel was so prompt to update his userscript. – Dhaust Jun 12 '19 at 22:15

I'm pleased to announce that my userscript StackExchangeDarkMode now has support for SO, SU, and SF logos.


enter image description here

| improve this answer | |

You must log in to answer this question.

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