415
votes

With the full launch of Dark Mode on 17 June 2020, we've shut down this post as a way to get feedback and bug reports. Thank you to the many people who have posted answers, comments, and done the curation work of keeping this post in order so that Aaron could more easily find and address the issues. As of posting, Aaron has updated the status of all the posts in the compilation answer.

There are some outstanding issues, particularly related to the Developer Story page, which is difficult to fix without breaking a lot of things. There are also a handful of items that we've deferred acting on but there shouldn't be anything critical that is left. Being out of beta doesn't mean we won't look at these or new bugs brought to our attention, only that we feel this project is stable and ready to go.

Our team working on this is pretty small but they're excited to have this project in a good place so they can move on to other things like working on getting the rest of the site responsive.

From today on, If you find new bugs, please post them as a new question here on MSO.


Thank you so much for your interest in helping us find bugs in our dark mode version! The response to this has been amazing! My one request is that you look through existing answers before posting a new one. Nearly all of the newer answers I’ve gotten have been identified previously so the answers are duplicates!

For those of y’all waiting for fixes, we’re already working on many of them and you should start seeing status tags added to the answers soon. We appreciate your help and feedback!

—-

For years the answer to "can we have dark mode" has been a resounding "no!" Because of a huge number of technical complexities, which our design systems lead Aaron discusses in this blog post, creating dark mode has been too big of a project to take on with such a small team. You can read a bit about it in this discussion about dark mode.

As Aaron’s been working on building Stacks styles and he and the other developers have been gradually converting site elements to Stacks, Dark Mode was finally in reach for development. We've had Dark Mode in mind with our Stacks updates since July 2019 and started really focusing on it for the last two months.

Starting today Dark Mode is in beta for all logged-in users on Stack Overflow

It’s going to be a long road to complete this project but we felt that we were finally in a place where we could get your help finding all of the long tail bits we may have missed. For now, this is Stack Overflow in English only at this point - it doesn’t even work on MSO currently. The beta test will also be active on any Teams you may be on, so switching between the two shouldn’t cause blindness.

Thank you so much for your patience with us in getting this out. It’s been really neat to see the work some of y’all have done in creating userscripts to emulate dark mode here on SO and I hope you enjoy our version of it. I’ve been pestering Aaron with bugs for the last couple of weeks and I’m sure he’s going to love getting them from all of you!

Beta means some pages are out of scope

There are some parts of Stack Overflow that are currently opted out during the beta for various reasons. These include:

  • Homepage of Stack Overflow for non-logged in users
  • Jobs
  • Talent client portal

How to enable it:

To enable this, visit your Stack Overflow profile, go to the "Edit profile and settings" tab, scroll down to "Preferences" under "Site Settings" and find the "Theme" section at the top of the page. You have three options - light, dark and "system setting" which will adjust the theme based on what your system prefers.

Screenshot of the preferences page, showing the three options, light, dark, and system setting.
(click the image to see a gif of the path)

How to give feedback:

Write an answer below. Be sure to give us the following information:

  • Description of the issue
  • Screenshot of the issue
  • Link to the page you’re seeing this problem

There are a couple of issues we’re already aware of that we’re working on but weren't able to clean up before release:

Badges

  • We still need to do an audit of our badges and see if we can simplify them a bit on our way to dark mode.

Various tabs

  • There are still some legacy filter tabs on a few pages that we need to convert to newer components.

Tables

  • Mostly impacts moderator (/admin) pages, though there are a couple on /tools pages.

Future releases

At this point, the focus of Dark Mode is on Stack Overflow and we’ll eventually bring it to MSO. While the retheming we did across the network two years ago makes updating our LESS easier, creating dark versions of all of our sites, particularly the custom-designed ones, is going to be a huge challenge we’re not able to contemplate at this time. The artwork on some of those sites simply can’t be made dark because we don’t have access to the original art files and, to be honest, some of the themes will always be better as-is.

If you have questions about dark mode on the network, please ask them on MSE rather than here.


In addition to bug reports, let me know if you have any questions or things I can clarify.

34
  • 94
    Thank you! Exciting to see such developments.
    – deceze Mod
    Commented Mar 30, 2020 at 17:24
  • 43
    Nice, was expecting an April joke, but was offered something much better :) Commented Mar 30, 2020 at 17:43
  • 14
    Could this possibly be extended into chat.SO? Commented Mar 30, 2020 at 17:49
  • 24
    Not really a fan of dark mode, but it is extremely encouraging to see a feature that so many users in the community clamored for for so long. Well done!
    – Travis J
    Commented Mar 30, 2020 at 18:36
  • 12
    This is great; thank you very much Catija, Aaron, and the rest of the team! Can't wait to see it make its way to Meta.
    – TylerH
    Commented Mar 30, 2020 at 18:49
  • 12
    ... OK... so... I'm not sure what y'all think about things... we're getting a handful of different kinds of answers below - some things are bugs with one bug per answer and others are huge digests of many bugs... some answers are FRs and some are a combo of bugs and FRs... some of the digests include individual answers. I usually prefer single answers but I'm wondering if it makes sense to have one big bug wiki answer and FRs as separate answers... or something else... thoughts?
    – Catija Staff
    Commented Mar 30, 2020 at 19:01
  • 3
    YES!! Dark mode is 99% there. Biggest issue I see is syntax highlighting.If the color used is Saturated, then it will lack almost all contrast in dark mode. The same "color" can be used, but it needs to be de-saturated (using HSV values). The less saturation used, the more contrast with dark backgrounds there is (it doesn't effect light-mode to desaturate up to 50%+, but will make dark-mode readable) We know how much you try to stick to the international standard colors -- worth a check of the HSV values to see if they need tweaking for dark-mode. Commented Mar 30, 2020 at 21:57
  • 12
    It's almost perfect, but I'd like to see more lens-flares in the banner animation.
    – alain
    Commented Mar 30, 2020 at 23:17
  • 6
    I was afraid this was an early April Fools joke due to the timing and the animated banner, and I'm so pleasantly surprised that it's real, and has been so lovingly crafted. This is a much tougher feature to implement in an established site. Thank you so much for taking the time to work on it! It looks great.
    – Blank
    Commented Mar 31, 2020 at 0:53
  • 5
    Wow, impressive to see how many people are putting effort into reporting all the little dark mode fails. Commented Mar 31, 2020 at 2:54
  • 12
    background-color: #2d2d2d is a bit too bright for me. The low contrast looks nice at first glance, but for longer periods of browsing, I prefer things a bit more contrasty: background-color: #222 and color: #ddd. Luckily, there's always custom CSS styling... Commented Mar 31, 2020 at 3:12
  • 12
    I just came to meta (non-darkmode) from Darkmode main site, and I'm miserable now.
    – Pac0
    Commented Mar 31, 2020 at 15:52
  • 16
    I hope the feature of dark mode will be added in meta too. Well done, stack team! Commented Mar 31, 2020 at 17:42
  • 4
    The "ultra" dark is really cool for really late night work, but still a little "too" dark, especially if you lower your screen brightness to adapt to other windows. Commented Apr 1, 2020 at 21:12
  • 6
    @HadiPawar I am guessing that the bug you’ve reported was already reported in one of the answers so it’s been downvoted because it’s a duplicate answer. I know it’s hard because there’s a ton of answers but it’s difficult for us to gauge what needs to be fixed if I have multiple answers saying the same thing. We love y’all for helping, we just need y’all to be thoughtful about checking existing answers before adding a new one.
    – Catija Staff
    Commented Apr 6, 2020 at 13:05

154 Answers 154

3
votes

Developer Story - Edit button (gear icon) is too dark when in MouseOver state and also its pop-up color is bright

OK:

enter image description here

Not OK:

enter image description here

3
votes

In the users menu at the left of the screen, the text's of buttons for the filter is not visible when they are select.

like:

sample one

and

sample two

1
  • This has already been reported. Commented Apr 3, 2020 at 6:46
3
votes

enter image description here

URL: https://stackoverflow.com/teams

I am not sure whether this is a bug or a feature but while surveying the beta dark-mode, I came through this.

3
votes

I managed to take a video of this issue, but in the review queue, when the subject matter highlights right after loading up the item for review, it flashes white instead of using a darker accent to draw attention to the space. It causes the highlight to flash and distract from the content of the page, and makes the underlying text difficult to read briefly.

3
  • I support this, the question below the answer being reviewed has especially low contrast. (It's also faded in light-theme but for some reason I find it harder to read in dark theme.)
    – bad_coder
    Commented Apr 15, 2020 at 1:04
  • 1
    I think part of it is having that bright splash of bright white flash on your dark screen in a dark room making your eyes bleed is what does it for me.
    – codewario
    Commented Apr 16, 2020 at 15:51
  • I was just in the review-queues, and the "flash" also makes you loose a couple of seconds before it lets you see the post. Taken over, say, 50 reviews/day that's 1min30sec looking at the same animation...The animation also gets old in less than 20 reviews for me...(I share your thought about the "flash", it does cause me daze.)
    – bad_coder
    Commented Apr 16, 2020 at 16:15
3
votes

Silver badge cannot be seen clearly in expanded profile message.

enter image description here

3
votes

Please swap (or change) the styling colors of visited and non-visited links

I'm not a UX expert but in my experience, visited links are usually styled with a "more dull" color. With this new dark mode, it seems the be quite the opposite. Here are some examples:

Home Page:

Home Page

Sidebar:

Sidebar

Profile Activity (Votes, Responses, All actions):*

Profile Activity tabs

In all the examples above, it's always the "brighter color" that is used to indicate visited links and the "more dull" color is used to indicate non-visited links. That seems counter-intuitive to me and I'm mistaking them all the time. I think it's more obvious in the second and third examples. I used to immediately spot newly featured Meta posts that I haven't visited. Well, not anymore.

P.S. I posted this as a discussion question a few days ago. I will probably delete it or close it as dup soon.


(Feel free to skip this part)

For comparison, this is how it looked like with a Chrome extension that I used before the SO Dark Mode was released:

Home Page using a Chrome extension

..and this is how Reddit, for example, handles visited links in dark mode:

Reddit


* There's also the inconsistency issue with this one. It uses this styling only for the last 3 tabs (under Profile > Activity). The remaining tabs use the same styling that's used for the Home Page.

4
  • This post is really cool. I had noticed these issues but didn't want to bring them up without doing a good job, which you did.
    – bad_coder
    Commented Apr 26, 2020 at 7:34
  • @bad_coder If you think it's a good suggestion, upvoting the answer may give it a better chance of being taken into consideration.
    – 41686d6564
    Commented Apr 29, 2020 at 2:35
  • 1
    I was the only guy that up voted it.
    – bad_coder
    Commented Apr 29, 2020 at 4:09
  • 2
    I'm glad I'm not the only one with this issue,. I don't think I've ever seen a lighter "visited" link before, it's definitely not standard
    – GammaGames
    Commented May 8, 2020 at 14:43
3
votes

@Marco-Bonelli mentions this, but no screen shot was included. For completeness:

Stats on the Tag Info page are difficult to read. E.g..

enter image description here

3
votes

Jobs
This job offer panel is difficult to read, especially with the silver (I think) text.

1
  • I believe this one was fixed, and should be out in the next build or... two :)
    – Aaron Shekey StaffMod
    Commented May 19, 2020 at 21:11
3
votes

text dark

https://stackoverflow.com/teams

The text is dark and difficult to read.

3
votes

Headers in posts don't stand out very well in dark mode.

In light mode, the bold black text really pops out and helps to visually "break up" a long post. But in dark mode, the brightness of the regular body text seems to match the headers and they get drowned out, making it harder to distinguish sections.

This might just be my eyes, but on long posts I have to search a lot harder for the headings.

I have screenshots below, but you can try it for yourself on this post:

Regular expression for floating point numbers

Light Mode

Dark Mode

Here is another screenshot of this page shown side-by-side, in dark and light modes. Scanning for the headings is easier in light mode.

screenshot of two pages side-by-side, one in dark mode, the other in light mode

3
  • This super tough, and something that's a real problem on dark modes in general. Ideally we'd be able to change our font stack to include more weights. This article really sums up the issue css-tricks.com/dark-mode-and-variable-fonts
    – Aaron Shekey StaffMod
    Commented May 22, 2020 at 18:10
  • @AaronShekey - Thanks for the reply. That article is very interesting! Yeah, I figured it wasn't an easy fix. Additional decorations, like underlining, would also not be ideal.
    – JDB
    Commented May 22, 2020 at 18:13
  • It's a long goal of mine to replace Arial with something with more rendering flexibility. But, we're a lean company with a ton of traffic. We don't want to just force everyone to load a ton of fonts. Tough one!
    – Aaron Shekey StaffMod
    Commented May 22, 2020 at 18:15
3
votes

By clicking the sidebar widget of the newsletter subscription, it opens a popup with a white background.


Screenshots:

1) Newsletter Widget


2) Popup with White Background


To reproduce the issue:

  • Visit any question and look at the widgets on the right side.
  • In between "Featured on Meta" and "Linked" or "Related" portion you might find this widget. Refer 1st screenshot.
  • Click on see an example newsletter.
  • It'd open a popup with a white background. Refer 2nd screenshot.

NOTE: You won't see any weekly newsletter widget if you're already subscribed.


I hope it helps.

1
  • 1
    It's not ideal, but our emails aren't dark-mode enabled. That preview is accurate, sadly.
    – Aaron Shekey StaffMod
    Commented May 22, 2020 at 21:02
3
votes

The "Looking for a Job?" item in the sidebar is not converted, though components of it are (the tags for the job's languages).

enter image description here

1
  • 1
    First post to mention the components in ads. Ads by themselves had been mentioned here, and here.
    – bad_coder
    Commented Apr 16, 2020 at 23:35
3
votes

I noticed on the Developer Story tab when using story mode, there's a white line on the lower end of education information when it's long enough to cause a read more text button to appear:

When info is minimized

But it disappears after expansion:

When info is expanded

1
3
votes

In your profile if you don't have any network communities visible the link "View Network profile" has a different color of blue.

It's probably supposed to be "greyed out", however just a glance at it strains the eyes because of low contrast. The screen shot has two side-by-side examples for comparison. Please notice the problem is worst on-screen, because fonts are smaller.

(It's also the only instance of this color I recall seeing on the site.)

Enter image description here

2
  • FYI this one isn't a duplicate, I checked.
    – bad_coder
    Commented Apr 12, 2020 at 2:40
  • 1
    This one's coming in a build or two. Thanks!
    – Aaron Shekey StaffMod
    Commented May 19, 2020 at 21:22
3
votes

It seems like dark mode was mistakenly added to the result of snippets.

Snippet results can not be auto-dark mode. Otherwise, they'll break 1000s of snippet on this site. Example:

const ctx = document.querySelector('canvas').getContext('2d');
for (let i = 10; i < 70; i += 10) {
  ctx.lineWidth = 5;
  ctx.beginPath(); ctx.arc(75, 75, i, 0, Math.PI * 2); ctx.stroke();
}
<table style="text-align: center;"><tr>
  <td>Some <span style="black">black</span> text</td>
  <td>
    <div>a canvas</div>
    <canvas width="150" height="150"></canvas>
  </td>
  <td>
    <div>an image</div>
    <img src="https://threejsfundamentals.org/threejs/lessons/resources/scene-down.svg" width="200">
  </td>
</tr></table>

ends up like this in dark mode

Enter image description here

Users can't be expected to test light and dark modes in their snippets. All the major live coding sites came to this conclusion. JSFiddle, CodePen, CodeSandbox, etc. all default to the default (white) in their results panels because anything else is guaranteed to make things unreadable.

3
votes

Text color of the infobox is hard to read (after approving a suggested edit)

When approcing a suggested edit that needs more approves, an infobox with the following text is shown:

This suggestion still needs 1 approve vote from other reviewers. Close this popup (or hit Esc) to continue.

The color of the text is set to #990000 which is hard to read on dark background (#2D2D2D)
That's a Contrast Ratio of 1.54:1

Screenshot

3
votes

Autofill suggestions are using a bright background at least in Chrome:

  1. start editing a post
  2. click the "Edit Summary" input
  3. when the autofill menu appears press the down arrow key to select an item in that menu

bad

StackOverflow Dark usercss style solved this issue via an animation hack:

@-webkit-keyframes autofill {
  to {
    background-color: #111;
    background-image: none;
    color: #ddd;
  }
}
input:-webkit-autofill, input:-webkit-autofill:hover,
input:-webkit-autofill:focus, textarea:-webkit-autofill,
textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus,
select:-webkit-autofill, select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-animation-name: autofill !important;
  -webkit-animation-fill-mode: both !important;
}

With this fix applied:

good

1
2
votes

There is some text here on this sponsored tag. Look closely and you might discover it.

enter image description here

1
  • 1
    These come in via our ads network, so they're a little tricky to fix behind an iframe. Working on it!
    – Aaron Shekey StaffMod
    Commented May 19, 2020 at 21:23
2
votes

PNGs, SVGs, and GIFs, need to have white backgrounds, otherwise their transparency shows up dark.

Example PNG

png

Becomes

transparent png on site

Example SVG

svg

Becomes

enter image description here

Example GIF:

enter image description here

Becomes

enter image description here

note: I solved this on my own site with

@media (prefers-color-scheme: dark) {
  img {
    background: white;
  }
}

Non-transparent PNG or SVG or GIF will show no issues with these settings, at least not directly since there is no background to show through and of course "jpg" has no transparency but for user images it seems like S.O. needs to default to white or else you'll get issues like those above.

Two other things I tried. One is applying an invert(1) filter to just PNG,GIF,SVG via img[src$=.svg] etc. Another is to apply invert(1) hue-rotate(180deg) filter. But of course they only work sometimes, generally if the image is a diagram, not a photo. No good way to know AFAIK.

Note this is a separate issue from the one about snippet results. That one what that snippet results need to have their iframe default to a white background. This one is about images in answers needing to have a white background.

3
2
votes

The <kbd> tag is too light:

keyboard tag too light

2
2
votes

"Please upvote" Message

This popover asking you to upvote the question has a bright background and a fairly light font color. I would consider making it a bit darker.

4
  • Already reported: meta.stackoverflow.com/a/396163/10046076. Commented Apr 14, 2020 at 9:19
  • @Zera correct me if I'm wrong: this exact instance has not been reported, has it? Commented Apr 15, 2020 at 10:04
  • The messages appear to be exactly the same. They are both welcome back messages and have the same message. If there is a difference, please could you point it out. Commented Apr 15, 2020 at 10:06
  • @zera Sorry, you appear to be correct. Looks like I didn't see the answer when I first clicked on the link. Thanks! Commented Apr 16, 2020 at 11:13
2
votes

The icon for the "Watched Tags" suggestion is white.

Watched tags

4
  • If it was black, then it would not be seen because it would blend in with the black outside of it, Commented Apr 4, 2020 at 14:59
  • I did not say that is should be black. I suggest that instead of a bright white circle, it should look a bit different.
    – Iter Ator
    Commented Apr 4, 2020 at 21:12
  • What "different"? Commented Apr 4, 2020 at 21:28
  • 3
    I don't know, I am not a designer. I just feel that this icon does not look good in the dark mode.
    – Iter Ator
    Commented Apr 4, 2020 at 22:49
2
votes

"Synonyms" and "Related Tags" headings are too dark, in both Synonyms page and Top Users. However, both are rendered differently in Tag Info.

enter image description here

1
  • FYI this one isn't a duplicate, I checked.
    – bad_coder
    Commented Apr 12, 2020 at 12:22
2
votes

The contact us page when looking at the Enterprise solution.

https://stackoverflow.com/enterprise/get-started

Contact us - when looking at Enterprise solution

2
votes

The 3 tooltips: Share, Edit, Flag haven't been converted; Follow however has been converted.

enter image description here

6
  • FYI this one isn't a duplicate, I checked.
    – bad_coder
    Commented Apr 17, 2020 at 20:40
  • 1
    Aren't the 3 tooltips browser tooltips though? Maybe you could ask a new question tagged [feature-request] asking for the browser tooltips to be converted to custom tooltips for consistency. Commented Apr 18, 2020 at 9:09
  • 2
    Perhaps that's not a bad idea. But you know how SO goes, everyone's a critic so before I get massively downvoted and criticized for opening a question it's probably better to do nothing. After all, there's plenty of more knowledgeable folks on these matters and it's perhaps wiser to just sit back indifferent and let someone else take the initiative. I mean, who cares...
    – bad_coder
    Commented Apr 18, 2020 at 9:20
  • Or maybe browsers should make their tooltips match the user's color scheme preference or the website's color scheme. 🤔
    – D. Pardal
    Commented Apr 18, 2020 at 15:50
  • This has been posted as a separate question now: Please make all of the link tooltips the same style as the “follow” tooltip. Commented Apr 22, 2020 at 21:00
  • 1
    These'll get unified at some point, but I wouldn't necessarily consider this a dark mode® issue. Soon-ish!
    – Aaron Shekey StaffMod
    Commented May 11, 2020 at 19:23
2
votes

Tags

Internal tags selection seem to be unreadable with the new color contrast. The tags in the list view are also not readable.

2
  • Duplicate, check out meta.stackoverflow.com/a/396001. Commented Apr 1, 2020 at 12:52
  • Added a comment on the original there. It's tricky, and we might bail on theming tags since admins can choose colors that make no sense in dark mode.
    – Aaron Shekey StaffMod
    Commented May 11, 2020 at 19:57
2
votes

Note: I'm quite sure that no one has already posted this, please let me know in the comments if so and I will immediately delete my answer.

Error message when editing is not possible is too dark:

screenshot

Fails WAIM contrast checker for normal text

2
votes

Note: I'm quite sure that no one has already posted this, please let me know in the comments if so and I will immediately delete my answer.

When you click on Products, the text in the button turns black but should instead turn white to prevent lack of contrast:

Before click:

screenshot 1

After click:

screenshot 2

Fails WAIM contrast checker for normal text

1
  • 1
    The contrast is not too low, but a black (#000000) would be better. Commented May 13, 2020 at 19:19
2
votes

Note: I'm quite sure that no one has already posted this, please let me know in the comments if so and I will immediately delete my answer.

Text in flag question button is too dark and the button's background colour should be a bit lighter to attract more attention. Also, the background colour of the box stating that a recent flag was declined is too dark:

screenshot

Button fails all WAIM contrast tests

Flag declined box fails second WAIM contrast check for normal text (AAA)

2
votes

Contrast in bounty score boxes on user profile is low:

+50 barely readable

It's a bit better in questions with dark text:

+50 in question

I am also not too happy with the accepted answer score boxes:

white on light green text

The WebAIM does not seem to like it either:

enter image description here

You must log in to answer this question.

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