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

2
votes

?

The Unix & Linux icon (favicon-unix) lost its blue shade and is now 1 color in dark mode.

DARK

dark-zoomed dark-2560x1440

LIGHT

light-zoomed
light-2560x1440

It becomes a bit indiscernible on high-res displays (ex. 2560x1440).

I'm not sure if related to this other answer, but it's already marked as .

2
  • 3
    Short of putting a background behind the U&L logo, making it white is the only way to have it appear on the black background. The dark blues are too close to black to be visible. I'm guessing this is the "fix", so it's status-bydesign
    – Catija Staff
    Commented May 16, 2020 at 8:07
  • @Catija I see. While posting this, I was trying to think of a suggestion, but couldn't think of one. I guess it's not as harmful as the others, so status-by-design it is. Commented May 16, 2020 at 8:54
2
votes

So far I have not found any way to search through answers to see if a problem has been reported before. This is a terrible way to manage bug reports. Stick to bug trackers.

Anyway, these elements on the edit answer pages are not accounted for yet:

enter image description here

2
2
votes

When creating a Developer Story.

Possibly related: Answer by Aryan Beezadhur

First step:

enter image description here

Second step:

enter image description here

2
votes

Adding a link in the tag wiki editor: enter image description here

3
  • 1
    This doesn’t impact the mobile version at al, which is essentially being replaced entirely by the responsive version.
    – Catija Staff
    Commented May 10, 2020 at 5:41
  • 1
    I deleted the mobile version part
    – Syntle
    Commented May 10, 2020 at 8:57
  • 1
    This'll be deployed at some point, hopefully not too long!
    – Aaron Shekey StaffMod
    Commented May 18, 2020 at 22:41
2
votes

The pagination label at the bottom of the "Select your next badge" modal should be white.

enter image description here

2
  • This should be fixed. Can you double check?
    – Aaron Shekey StaffMod
    Commented May 18, 2020 at 22:43
  • It's white on Safari, but it's still black on Chrome, Firefox and Opera
    – Mickael B.
    Commented May 19, 2020 at 16:58
2
votes

Bounty award text on answers should be a lighter color, currently it doesn't have much contrast against its background. This might be less apparent with the larger screenshot attached, but in practice I thought this needed work.

enter image description here

1
  • 1
    This is looking how it's designed, but could probably be improved.
    – Aaron Shekey StaffMod
    Commented May 18, 2020 at 22:47
2
votes

Page: About us

Error: Institutional Investors cards are not shown properly with the dark mode.

enter image description here

1
  • 1
    I've merged a fix for this and it'll be deployed soon.
    – Aaron Shekey StaffMod
    Commented May 18, 2020 at 23:49
2
votes

https://stackoverflow.com/review/suggested-edits/25748973

  • Active tab top-right

  • Code block

enter image description here

3
  • 1
    Duplicate, please see meta.stackoverflow.com/a/395999. Commented Apr 2, 2020 at 9:38
  • ok, will not try to help then. Also, the one you linked doesn't include my first point ("Active tab top-right")
    – Xymanek
    Commented Apr 2, 2020 at 10:37
  • 3
    If you scroll through the answers, you'll find similar issues that have been reported. Commented Apr 2, 2020 at 11:05
2
votes

Although this issue was reported two times (here and here) and marked as , the additions and removals in Suggested edits queue are still broken:

enter image description here

2
  • Perhaps it has not yet been deployed? Don't hurry to report it; instead wait for one day. Commented May 19, 2020 at 10:30
  • 1
    @double-beep I thought status-completed marks bugs whose fix is created and deployed. Correct me if I'm wrong...
    – FZs
    Commented May 19, 2020 at 10:33
2
votes

Incorrect dark theme colors used in edit tag info pages (making the text unreadable):

On the dark theme, user notifications on the edit tag info page are unreadable in SO.

Screenshot of unreadable tag user notification message

The notification says:

You do not yet have tag wiki edit privileges. Your edit will be placed in a queue until it is peer reviewed.

But is made unreadable due to the background color

2
votes

The suggested-edits's stats page seems to have uncovered bits.

Screenshot from https://stackoverflow.com/review/suggested-edits/stats

1
  • Pushed some improvements here. Should merge in and get deployed after the long holiday weekend.
    – Aaron Shekey StaffMod
    Commented May 22, 2020 at 20:06
2
votes

The header titled "Badge Progress" has low contrast in the stats page of the review queues.

enter image description here

2
2
votes

Requesting an offer for job postings redirects to a Thank You! page.

Thank you for getting in touch!

enter image description here

1
  • Good catch! Fixes for this have been pushed and will get merged and deployed after the long holiday weekend.
    – Aaron Shekey StaffMod
    Commented May 22, 2020 at 20:42
2
votes

On the "Ask Question" page.

Both Tags and title boxes have a low contrast pre-filled text.

(For comparison, the search box pre-filled text has a slightly different color.)

Edit: Arguably this isn't a bug, and low contrast is intended. The same happens in most (but not all) pre-filled textboxes; in light-mode faded grey is used. The Add Comment box is another notable example.

Enter image description here

2
  • FYI this one isn't a duplicate, I checked.
    – bad_coder
    Commented Apr 12, 2020 at 3:35
  • 1
    This one is by design, but could be improved. Punting!
    – Aaron Shekey StaffMod
    Commented May 18, 2020 at 22:40
2
votes

The WordPress Development and MathOverflow favicons are very low contrast in dark mode. The classes are:

class="favicon favicon-wordpress"
class="favicon favicon-mathoverflow"
2
votes


The rise of the DevOps mindset | Stackoverflow Blog

stackoverflow blog devops

2
votes

In review queue (in this case close questions/duplicates), text for active tabs is barely visible. I've seen multiple answers for tabs on other pages, that say "completed", but this still seems to be the case here.

review queue tab text low visibility

Example: https://stackoverflow.com/review/close/26414544

Also seen in reopen queue: https://stackoverflow.com/review/reopen/26388629

2
votes

When you apply for a job, you get to see screen like this even when Dark Mode is enabled:

enter image description here

2
votes

Code-box scroll bars are completely white, with no way of telling what position it is in:

Dark theme example:
Example image Dark theme

Light Theme Example:
Example image light theme

here's a live example

// this is a really long line of code this is a really long line of code this is a really long line of code this is a really long line of code

Note: This affects vertical scroll bars in addition to horizontal ones

I am using Firefox 75.0 on Kubuntu 18.04

Edit: This appears to be fixed

2
  • Which browser and operating system are you using? Having trouble reproducing this bug.
    – Aaron Shekey StaffMod
    Commented Apr 10, 2020 at 4:44
  • @AaronShekey I am using Firefox 75.0 on Kubuntu 18.04
    – DDriggs00
    Commented Apr 10, 2020 at 15:17
2
votes

The RadioButton controls on the flagging dialog are inconsistent. On the first page they have a light background:

enter image description here

On subsequent pages their background is dark:

enter image description here

1
vote

Top Users

enter image description here

1
  • This issue has already been reported. Commented Apr 2, 2020 at 5:47
1
vote

Hovering over a community on the communities section on a persons profile shows this white blur which was supposed to make the text look faded.

Communities

1
vote

Please, make the titles of questions white or light-gray or smth else, but not blue. Because it is hard to read. They are main texts of your site, why are they blue? For example I have time to answer some questions after work, but I can't focus on these blue titles.

1
vote

Another couple things I saw on the "edit history item" part of the story page.

First, the text in the technologies box is super hard to read while you're typing. If you look closely, you can see my little asdf at the end.

Technologies Box

Second, the date dropdown is black and hard to see.

Date Dropdown

Also, it's been mentioned in a couple other places in the app, but also in the timeline part the textboxes are white:

White Textbox

1
vote

First of all: thank you very much and great job!

There are only 2 minor details in the settings that I would like to report. First is in "Edit profile and settings" > "Developer Story preferences" under the "Public link" section, where the input box value is not very visible and the other input boxes (which you all can't change) are very bright.

public link section screenshot

Second is in job preferences. I know that jobs is out of scope for now, but his is in the settings and I don't know if this is the same. Either way as seen in the screenshot the "need visa sponsorship" text and the "to" are white so they aren't visible at all.

I hope this helps and nobody posted this before! First link is here and second here.

jobsearch screenshot

1
vote

The Vote Synonyms arrows appear to have some imperfections that weren't perceptible in light-mode.

enter image description here

2
  • FYI this one isn't a duplicate, I checked. OP mentioned "site sprites" specifically, I'm unsure if these should be posted.
    – bad_coder
    Commented Apr 18, 2020 at 2:52
  • Hmm... I think this is more of an issue with SO using outdated sprites. You could possibly open a new question asking for the sprites to be updated. Commented Apr 18, 2020 at 9:13
1
vote

Reverse colour on headlines in the Site tour site + bad background on Example screens

As a user with a new account, I have noticed, that the Site tour has a few bug with the newly introduced Dark-mode theme.

At first: The Headlines of the sub-items are in wrong colour. so you can kind of read them with the contrast, but it doesnt look really good.

Second, the Contrast of the example screens in the site tou seems to low, like you have changed the Text colour,but now the Background. you can see two examples in the picture below.

Hope it was kind of helpful.

two examples of both bugs in the site tour

1
1
vote

Tour is white

enter image description here This is especially bad for newbies in dark mode who visit the tour. One way to solve this is to make a privilege for using dark mode (I would recommend about 200 to 500 rep), just like the reduce ads privilege. Another way is to make the CSS for the text black directly. I'm not sure if this is already reported or not.

1
vote

I saw on the bug list on page 1 "contact", but I'm not sure we're talking about the same page so I'm posting it with an image.

https://stackoverflow.com/enterprise

enter image description here

1
vote

Filtering questions
e.g. html

The title "Sponsored links for this tag" and the bullets list are too dark.

enter image description here

1

You must log in to answer this question.

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