19

Out of curiosity, why was it decided to keep the Stack Overflow logo monochromatic in dark mode?

Current monochromatic logo

The light mode uses the colored logo. Wouldn't it have been a better choice to keep the logo colored in order to be in sync with light mode? I feel if meta was to ever have dark mode, the monochromatic variant would fit in quite well.

It may be interesting to know if there is a reason behind this decision. Or is it that there isn't a reason?

Here is how the colored logo would look like in dark mode:

Stack Overflow stack icon on a black background

From https://stackoverflow.design/brand/logo/

2
  • 7
    It is status-review as of right now; meta.stackoverflow.com/a/395992/12708583
    – 10 Rep
    Jun 20, 2021 at 18:01
  • 5
    Note: It's not clear to me that there shouldn't be a new question for each feature request remaining from that intro question. At least in the relatively recent past, once SE has locked the feature intro and bugs question, they've generally wanted people to create new questions for the remaining feature requests/bugs, rather than only have them only on the intro question (i.e. they've general treated the intro question as dead/complete). Given that it's been over a year, that may be the case here, even though they did not explicitly say so.
    – Makyen Mod
    Jun 21, 2021 at 0:19

2 Answers 2

18

Our top bar logos are still powered by an SVG sprite. Most of the icons and images in our user interface are inlined SVG. This allows us to recolor things arbitrarily. The topbar, however, is pretty tricky to refactor. I'd prefer to do inline SVG there, so that we can more easily have dark mode-aware colors.

When we built dark mode, we just applied a CSS filter to make it monochrome, and then inverted it. This allowed us to get an aesthetic that made sense, without swapping for a new dark mode-only sprite or waiting for a refactor to inline SVG.

For an example of what should be happening with the logo, you can check out our icons documentation. Hit the dark mode button on the top right of the documentation site and see what happens to the "native" color logo.

2
  • 2
    I hope we can also have that "dark mode button" on SO to switch easily between dark and light modes. Are there still no plans for this?
    – 41686d6564
    Jun 21, 2021 at 7:15
  • 3
    @41686d6564 Me too! The design team is cooking up some ideas there, so we'll see what sticks. 🤗 Jun 21, 2021 at 17:57
9

The following CSS will provide a dark-themed SO logo. IIRC, the SVG code is taken from SO's old dark topbar theme.

body.theme-dark__forced .top-bar .-logo .-img,
body.theme-dark .top-bar .-logo .-img {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 540" width="190" height="540">    <g fill="none"><g transform="translate(0 500)">            <path fill="%23DBD8D9" d="M33.9 18.6l-1.7-.2c-1.3-.1-1.9-.6-1.9-1.6 0-1.1.8-1.8 2.4-1.8 1.1 0 2.1.3 2.8.8l1-1c-1-.8-2.3-1.1-3.8-1.1-2.3 0-3.9 1.2-3.9 3.1 0 1.8 1.1 2.7 3.2 2.9l1.8.2c1.2.1 1.8.6 1.8 1.6 0 1.3-1.1 1.9-2.8 1.9-1.3 0-2.5-.3-3.3-1.2l-1 1c1.2 1.1 2.6 1.5 4.4 1.5 2.6 0 4.3-1.2 4.3-3.2-.2-2-1.5-2.7-3.3-2.9zm13.3-4.8c-1.7 0-2.8.3-3.7 1.5l1 1c.6-.9 1.3-1.2 2.7-1.2 1.9 0 2.7.8 2.7 2.3v1h-3.2c-2.4 0-3.7 1.2-3.7 3.1 0 .8.3 1.6.8 2.2.7.7 1.5 1 3 1 1.4 0 2.2-.3 3.1-1.1v1h1.6v-7.2c-.1-2.4-1.5-3.6-4.3-3.6zm2.7 7c0 .9-.2 1.5-.5 1.8-.7.6-1.5.7-2.4.7-1.7 0-2.4-.6-2.4-1.8 0-1.2.8-1.9 2.4-1.9h3l-.1 1.2zm7.6-5.6c1 0 1.6.3 2.4 1.2l1-1c-1.1-1.2-2-1.6-3.5-1.6-2.7 0-4.7 1.8-4.7 5.5 0 3.6 2 5.5 4.7 5.5 1.5 0 2.4-.4 3.5-1.6l-1.1-1c-.8.9-1.4 1.2-2.4 1.2s-1.9-.4-2.5-1.2c-.5-.7-.7-1.5-.7-2.9 0-1.3.2-2.2.7-2.9.7-.8 1.6-1.2 2.6-1.2zm13.4-1.3H69l-4.8 4.7V9.1h-1.6v15.4h1.6v-3.9l1.9-1.9 3.6 5.8h1.9l-4.4-6.9 3.7-3.7zm7.3-.5c-1.6 0-2.7.6-3.4 1.4-1 1-1.3 2.3-1.3 4.3s.3 3.3 1.3 4.3c.7.7 1.8 1.4 3.4 1.4 1.6 0 2.8-.6 3.4-1.4 1-1 1.3-2.3 1.3-4.3s-.3-3.3-1.3-4.3c-.6-.8-1.7-1.4-3.4-1.4zm1.3 8.3c-.3.3-.7.5-1.3.5-.6 0-1-.2-1.3-.5-.6-.6-.6-1.6-.6-2.7 0-1.2.1-2.1.6-2.7.3-.3.7-.5 1.3-.5.6 0 1 .2 1.3.5.6.6.6 1.5.6 2.7.1 1.2 0 2.2-.6 2.7zm10.8-8.2l-2.2 6.9-2.3-6.9h-2.9L87 24.6h2.2l4.1-11.1h-3zm7.6-.1c-2.9 0-4.8 2-4.8 5.7 0 4.5 2.5 5.7 5.1 5.7 2 0 3.1-.6 4.2-1.7l-1.7-1.6c-.7.7-1.3 1-2.5 1-1.6 0-2.4-1-2.4-2.5h6.9v-1.2c0-3.2-1.7-5.4-4.8-5.4zM95.8 18c0-.5.1-.8.3-1.2.3-.7.9-1.2 1.9-1.2.9 0 1.6.5 1.9 1.2.2.4.2.7.3 1.2h-4.4zm11-3.4v-1.1h-2.7v11.1h2.8v-6.7c0-1.4.9-2 1.8-2 .7 0 1 .2 1.5.7l2.1-2.1c-.8-.8-1.5-1-2.6-1-1.3-.1-2.3.4-2.9 1.1zm6.3-2.3v12.3h2.8v-8.8h2v-2.1h-2v-1.2c0-.6.3-1 1-1h1.1V9.2h-1.6c-2.3 0-3.3 1.6-3.3 3.1zm16.2 1.1c-1.6 0-2.7.6-3.4 1.4-1 1-1.3 2.3-1.3 4.3s.3 3.3 1.3 4.3c.7.7 1.8 1.4 3.4 1.4 1.6 0 2.8-.6 3.4-1.4 1-1 1.3-2.3 1.3-4.3s-.3-3.3-1.3-4.3c-.6-.8-1.8-1.4-3.4-1.4zm1.3 8.3c-.3.3-.7.5-1.3.5-.6 0-1-.2-1.3-.5-.6-.6-.6-1.6-.6-2.7 0-1.2.1-2.1.6-2.7.3-.3.7-.5 1.3-.5.6 0 1 .2 1.3.5.6.6.6 1.5.6 2.7 0 1.2 0 2.2-.6 2.7zm16.5-8.2l-1.8 6.9-2.3-6.9h-2l-2.3 6.9-1.8-6.9H134l3.4 11.1h2.3l2.3-7 2.3 7h2.3l3.4-11.1h-2.9zM122 21.2V9.1h-2.8v12.3c0 1.6 1 3.2 3.2 3.2h1.6v-2.3h-1c-.7 0-1-.4-1-1.1zm-80.7-5.6l1.4-1.4h-3v-3.5h-1.6v11.1c0 1.6.9 2.9 2.7 2.9h1.1v-1.3h-.8c-1 0-1.5-.6-1.5-1.6v-6.1h1.7v-.1z"/>            <path fill="%23BCBBBB" d="M21 27v-8h3v11H0V19h3v8"/>            <path fill="%23F48024" d="M5.402 19.1l13.56 1.96.165-2.38-13.256-2.546-.468 2.967-.001-.001zM7.2 12.3l12 5.6 1.1-2.4-12-5.6-1.1 2.4zm3.4-5.9l10.2 8.5 1.7-2-10.2-8.5-1.7 2zM17.1.2L15 1.8l7.9 10.6 2.1-1.6L17.1.2zM5 25h14v-3H5v3z"/>        </g>    </g></svg>');
}
body.theme-dark.theme-dark .top-bar .-logo .-img,
.theme-dark__forced.theme-dark__forced .top-bar .-logo .-img {
    filter: unset;
}

You must log in to answer this question.

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