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

12
votes

Update : 2

In Review Suggested Edits :

Review Tab not visible : Review Tab not visible

History Tab hover also not proper : History Tab hover also not proper


1. Adding the Developer Story. Icons seems to be too dark.

Icons seems to be too dark

2. Personal Statement section goes beyond limit.

Read More Screen : Read More Screen here

Read Less Screen : Read Less Screen

3. Story tab text is too dark.

Story Tab text

Story tab hover:

Story tab hover

2
11
votes

After suggesting an edit, here's what happens

Edit

The contrast should be adjusted, because it is difficult to see.

10
votes

In Developer History, when setting personal info.

enter image description here

10
votes

I think this image can be another bug in the dark mode because the button's text is not showing when the mouse pointer enters the button.

In the Profile Activity > BADGES when a new badge everyone earns the button's text of congratulations dialog not show.

enter image description here

10
votes

Missing background of An edit has been made to this post text/button:

I cannot give a link to a page, as it's every post and you need to have already opened a question and wait for somebody to make an edit to see this.

Also see X new answers to this question

1
  • 2
    This should be fixed in the next build. Thanks for reporting!
    – Aaron Shekey StaffMod
    Commented Apr 15, 2020 at 23:16
10
votes

3
  • Wow, the find users page is like Beetlejuice!
    – Catija Staff
    Commented Mar 31, 2020 at 2:54
  • Note: The same issue exists on Help Center > Badges (image)
    – Sumurai8
    Commented Apr 14, 2020 at 16:25
  • Cracked open a pull request to fix these today. Should get merged after the long holiday weekend.
    – Aaron Shekey StaffMod
    Commented May 22, 2020 at 19:26
9
votes

Minor one, but the review queue icons now seem to imply the empty queues are the most important:

v Current light v
Current light

v Current dark v v Suggested dark v
Current dark Suggested dark

3
  • 2
    Technically, the grey dot means there's only a few tasks, not that they're empty. If they're empty, they don't have a dot at all. :) That said, your suggestion makes sense. Maybe a bit lighter but... :)
    – Catija Staff
    Commented Mar 30, 2020 at 21:55
  • @Catija May I suggest red - orange (not yellow) - greenish?
    – Scratte
    Commented Mar 30, 2020 at 23:23
  • 1
    @Scratte Using colors rather than shading or greyscale vs single color (or other sorts of choices), they're not noticeably different to people who have colorblindness - particularly red vs green, which is the most common variety.
    – Catija Staff
    Commented Mar 31, 2020 at 1:59
9
votes

Bugs

On Click (Close Vote screen) enter image description here


On Hover(Close Vote screen)

enter image description here


4
  • I appreciate this! I think that some of these have already been reported. Could you remove any that are already here? I know it's long and hard to look through but it's probably easier for you to do than me - for example, the last one you posted is the second-higest-scoring answer here. Thanks :D
    – Catija Staff
    Commented Mar 31, 2020 at 3:27
  • @Catija sure will do Commented Mar 31, 2020 at 3:29
  • 5
    All of these have been reported: meta.stackoverflow.com/a/395952, meta.stackoverflow.com/a/395986. Commented Mar 31, 2020 at 5:36
  • 1
    @double-beep I thought so too, but the first one looks very different. Much less text is lost in the link you posted meta.stackoverflow.com/a/395952
    – weston
    Commented Apr 4, 2020 at 22:02
9
votes

PluralSight IQ cards are not showing very well.

enter image description here

2
  • 2
    Gotta work on those Java skills, buddy :))
    – oamandawi
    Commented Apr 1, 2020 at 15:56
  • 1
    @oamandawi Thanks, dude. This could be a lifetime tip. xD
    – glinda93
    Commented Apr 1, 2020 at 16:13
8
votes

Found another example of the bug related to inverse shadow, it is not working well with formulas.

https://stackoverflow.com/questions/5945193/average-runtime-of-quickselect

4
  • This is a link to the post you found. Those are in fact transparent images. So this seems to be a duplicate of meta.stackoverflow.com/a/396071/1723886.
    – Alex Telon
    Commented Apr 2, 2020 at 9:51
  • 3
    If there is a duplicate issue present should I let this post be here or delete it? Commented Apr 2, 2020 at 10:10
  • I'm new here too so don't know either. The other post is mine so I don't want to be the one telling you that you should remove yours in favor of mine in case that is not the way to deal with things here.
    – Alex Telon
    Commented Apr 2, 2020 at 10:44
  • I think I will just leave it as another example Commented Apr 2, 2020 at 18:59
8
votes

IMO, the difference, between questions which are highlighted, ignored or normal (in that order in the screenshot) is to minimal: enter image description here

The same image but in light mode is far more distinguishable, because highlighted questions have a different colored background enter image description here

1
  • 1
    Agree on the ignored questions, but highlighted seem fine to me
    – GChuf
    Commented Mar 31, 2020 at 10:38
8
votes

Have you given thought to your adverts area? These are white and quite contrasting.

enter image description here

7
votes

In the Tag "watching & ignoring" at "Ignored Tags" section the autofill textbox for adding new tags is white and suggested tags not showing like below picture:

enter image description here

1
  • 3
    This one has been reported already.
    – yivi
    Commented Mar 31, 2020 at 10:39
6
votes

Missing background to X new answers to this question

Very similar to the my other bug report - I cannot give a link to a page, since it's every question and you have to open it and wait for an answer to be posted.

6
votes

Can the background of badges get some more contrast, the boxes are almost invisible, especially when compared to the background of tags.

enter image description here

6
votes

Overall, great job by everyone!

Some minor stuff:

  1. This format for bug reports kinda sucks. Don't you have a regular bug base for this? (This format = everyone just post a bunch of answers to a question. Seems iffy and a dedicated search function would be handy too.)

  2. The main text on the main page is bright white, 100%. (Well, it's rgb(231, 232, 235) according to FireFox, but it's still pretty bright.) I'd like to see something just a bit dimmer, like 40% or so. Usually dark themes like this have grayer text.

  3. Ditto for links, like the titles of questions on the main page. They're bright blue (looks like the default blue), they could be a bit dimmer or darker.

  4. User default icons have white backgrounds, these could be changed to something darker, like the background color of the theme (or transparent so the work for both?)

  5. Once Dark Mode is selected, I'd like to see it on all my accounts, including this page (meta.stackoverflow.com) and all my stackexchange.com accounts. Yeah I know probably a lot more work.

  6. This page: https://stackoverflow.com/company has a super bright blue header. Could be a bit dimmer.

This seems like a long list now, I'll stop. Thanks again for the great work!

1
  • #5 is explained in the OP: "For now, this is Stack Overflow in English only at this point - it doesn’t even work on MSO currently." It's a beta, relax :). Many of the other items in your list have already been mentioned in other answers. Please search for those an remove the duplicate entries. Commented Apr 8, 2020 at 18:58
6
votes

Similar to other message pop ups I've seen reported, the "Welcome back! If you found this question useful, don't forget to vote both the question and the answers up." message is has unreadable contrast.

enter image description here

This page: What's the canonical way to check for type in Python?

2
6
votes

Some of the HNQ icons are wrong, for example the Japanese Stack Exchange icon is rendered as the 3d printing meta icon. I'm using Firefox 75.0 on a Windows 10 system, and have reloaded the page with caches disabled. Other users report that the icons are correct in light mode.

I haven't noticed other icons that are off yet.

enter image description here

1
  • 2
    Confirmed. Hmmm. Interesting one.
    – Catija Staff
    Commented May 3, 2020 at 17:38
6
votes

Selecting code snippets in dark mode:

Especially keywords seem to cause problems.

code selection in dark mode

1
  • 1
    This is super tricky, and I don't think Stack Overflow should be too opinionated here. This can be adjusted system-wide, and I think we should respect that. I think! For now. 😛
    – Aaron Shekey StaffMod
    Commented May 11, 2020 at 20:00
5
votes

The question feed RSS icon should remain white in the segments. The segments are hollow so the background color shines thru.

enter image description here

5
votes

On Teams sites, after clicking on a tag, a popup comes up asking whether the user wants email notifications. Some issues there:

enter image description here

5
votes

In review queues when checking badge progress.

enter image description here

5
votes

The background in the tour is white, but the text is gray

the bug

5
votes

I have noticed that the information box that says:

Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

It seems a bit hard to see when editing an answer/question while in dark mode. And it may make new users a bit confused if they are not used to the editing process...

I have added an image to help out.

The light background and grey text makes it harder to see the information box.

1
  • 2
    The edited post title also has bad contrast ("Creating a java library...", black text)
    – user202729
    Commented Apr 30, 2020 at 3:49
5
votes

The markdown examples in the help text for adding a comment are hard to read. Font color should be white.

enter image description here

1
4
votes

It's not really clear to me what "system mode" means. On Linux, I don't know of any such setting. On Android 10+, it doesn't seem to respect the "dark mode" setting:

enter image description here

Edit:

Indeed, when selecting the full site (as opposed to the default mobile view above, it does respect the Android system setting

enter image description here

9
  • 2
    It depends on the operative system and browser support. Also, in the screenshot you show you are not viewing the responsive version, but the "mobile" site. Scroll down to the bottom and click on "full site". Dark mode is not available on the mobile site, only in the responsive version.
    – yivi
    Commented Mar 31, 2020 at 17:22
  • 2
    My guess is that they are looking at the "prefers-color-scheme" css property, a demo: codepen.io/svoisen/pen/VRegLe
    – Ferrybig
    Commented Mar 31, 2020 at 17:22
  • 1
    Dark mode was added in Android 10, wasn't it? Commented Mar 31, 2020 at 17:24
  • Thanks for the comments. Makes one wonder why there is a dedicated mobile site at all. Commented Mar 31, 2020 at 17:32
  • @NicoSchlömer I don't think it's actually that dedicated anymore. The design of SO for a while now has been moving more and more toward a responsive "one site for all devices" design.
    – TylerH
    Commented Mar 31, 2020 at 17:43
  • "System default" does not detect GNOME theme, although as noted above, this is probably an issue with prefers-color-scheme and WebKit/Blink. I have "Adwaita-dark" set as Themes>Applications in GNOME Tweaks (as opposed to "Adwaita (default)"), but prefers-color-scheme is still "light", despite that Chrome is using dark color in title and bookmarks bar already.
    – zypA13510
    Commented Apr 1, 2020 at 2:28
  • Turns out, on Linux, the issue is Chromium-only (affects Google Chrome, Electron etc.), see bugs.chromium.org/p/chromium/issues/detail?id=998903. Mozilla Firefox works just fine.
    – zypA13510
    Commented Apr 1, 2020 at 2:39
  • 1
    I don't understand why the deprecated mobile site is still the default. Commented Apr 6, 2020 at 19:50
  • Still so many mobile layouts to convert to responsive. This might be my next big initiative here.
    – Aaron Shekey StaffMod
    Commented Apr 27, 2020 at 18:39
4
votes

The contrast in action description text in close/flag/review actions dialogs fails all WCAG standards:

1
4
votes

Just now I started to face a new issue when I tried to access Developer Story inside my Stack Overflow profile after switching from the activity tab:

Activity Tab:

Enter image description here

Developer Story tab:

Enter image description here

This is happening while I'm still on the dark theme; please check this. Maybe a small bug while trying to fix the theme.

1
  • We've opted the page out for now since there's a ton of work left.
    – Aaron Shekey StaffMod
    Commented Apr 23, 2020 at 21:05
4
votes

? Or ? Or maybe just a nitpick... I don't know.

Pagination controls' selected color is too bright. They stand out too much. The contrast between the white text and orange background is also a bit too little:

I just realised it doesn't look as bad as it actually is on the screenshot, because it's against the white background of meta.

1
  • My least favorite tag, but yeah, these are as intended. We might be able to drop that down a brightness level, but all the things like this use the same color, and we'd have to change it in every context. 🤔
    – Aaron Shekey StaffMod
    Commented May 22, 2020 at 19:28
3
votes

As one of the purposes of a dark-theme is high contrast, I'd like to have the option to display the background of code blocks black, i.e. #000000. (Maybe a checkbox in the preferences?)

default daaaark

4
  • I would wait for this to be out of beta to start requesting new features.
    – yivi
    Commented Mar 31, 2020 at 17:12
  • 1
    "wait for this to be out of beta" != "make a new question about it right now" Commented Mar 31, 2020 at 17:18
  • 1
    And posting a separate question with this feature request at this stage would be premature, and correctly closed as a dupe since this Q&A would show you that the feature is still in beta and not yet ready for new feature requests. "Pathetic", "brainless"... I don't know why do you feel the need to resort to that language, but I would tone it down.
    – yivi
    Commented Mar 31, 2020 at 17:18
  • @yivi I understand the "at this stage would be premature" but this is not a duplicate. Because the feature is still in beta, this is a duplication of the main post that is about finding bugs and low-contrast and un-converted bits? What? I think this feature would be a great addition to the site and I just want to post it so it's already on the table - exactly what a feature-request should be like. Things can be planned much better when potential features are known early.
    – akuzminykh
    Commented Mar 31, 2020 at 17:38

You must log in to answer this question.

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