12

I'd really like to see orange part of the Stack Overflow logo when in dark mode.

I noticed that the Stack Overflow image is just plain white on dark-mode
dark-mode logo
vs the light-mode view:
light-mode logo

So I inspected the CSS and found:

@media (prefers-color-scheme: dark)
body.theme-system .s-topbar .s-topbar--logo .-img {
    filter: invert(.5) brightness(2);
}

So I figure with tweaks to the filter property we could still keep the orange of the logo...

@media (prefers-color-scheme: dark)
body.theme-system .s-topbar .s-topbar--logo .-img {
    filter: invert(1) hue-rotate(170deg) brightness(1.51);
}

And voila:
dark-mode with orange icon

I did some further inspection and found that (according to Chrome's eyedropper tool) the standard icon's orange is: #f27f30 and the above CSS produces the orange part to be #ff7f2d.

So I realise, it's a little out on the blue value, but would it be possible to implement this so dark-mode users can see a little color in the logo?

3
  • 5
    I don't work with the design/branding team but I'm guessing they do not want to use a logo like that. While it may be clear to you, the grey trey under the stack is likely not clearly enough distinguishable from the black. Our logo guidance is available here - stackoverflow.design/brand/logo :D
    – Catija StaffMod
    Feb 8 at 16:51
  • 1
    Also reported here when dark mode was first released.
    – 41686d6564
    Feb 9 at 1:58
  • No, clearly the designers prefer the grey to be nearly indistinguishable from the normal white background, as shown in the logo usage guidance that Catija linked. Note, also, how indistinguishable the light-grey international-site branding (e.g., "em português") is from the white background. Feb 9 at 5:00

0

You must log in to answer this question.

Browse other questions tagged .