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

1
2 3 4 5 6
48
votes

Complete list of reported feature requests and bugs

11
  • "Editing tag wiki boxes are still light" has been marked with "status-completed" in this index however, the tag wiki boxes themselves are still light. The reason is probably because the post contains 4 different issues, the specific issue indicated in the title is pending revision.
    – bad_coder
    Commented Apr 25, 2020 at 11:12
  • 8
    Just for my sanity, I'm marking these as status-completed as they're merged into master. There's sometimes a lag in deployment, so sit tight, y'all. ✌️
    – Aaron Shekey StaffMod
    Commented Apr 27, 2020 at 18:08
  • @AaronShekey I think this one has been fixed and is status-completed?
    – bad_coder
    Commented Apr 28, 2020 at 6:56
  • 1
    @AaronShekey I think you should make the repository public, just so that I can c̶o̶p̶y̶ ̶a̶l̶l̶ ̶t̶h̶e̶ ̶c̶o̶d̶e̶ ̶a̶n̶d̶ ̶t̶a̶k̶e̶ ̶o̶v̶e̶r̶ ̶S̶t̶a̶c̶k̶ ̶O̶v̶e̶r̶f̶l̶o̶w check the changes. 😉 Commented Apr 28, 2020 at 9:23
  • 1
    @Zera Lemme just get your email so I can add you to my pull requests, hahah 😛
    – Aaron Shekey StaffMod
    Commented Apr 28, 2020 at 15:23
  • 2
    @bad_coder Sadly, still exists on Safari. Chrome looks great, which is why I hadn't caught it.
    – Aaron Shekey StaffMod
    Commented Apr 28, 2020 at 15:35
  • "Comment markdown help is still light" is definitely not fixed... unless you call this unreadable mess "fixed". Seen on Chrome.
    – Nyerguds
    Commented May 5, 2020 at 8:59
  • @Nyerguds Sorry for the "unreadable mess". Different markdown help appears in different contexts.
    – Aaron Shekey StaffMod
    Commented May 11, 2020 at 19:35
  • @AaronShekey There are a few minor, non-duplicate reports that haven't been added to the list yet: meta.stackoverflow.com/a/397388/10046076, meta.stackoverflow.com/a/397421/10046076, meta.stackoverflow.com/a/397422/10046076, meta.stackoverflow.com/a/397447/10046076. Should I add them? Commented May 27, 2020 at 10:13
  • @Zera I wonder how you or Aaron are still able to keep track of all this...I thought about adding those new posts but couldn't wrap my head around things anymore.
    – bad_coder
    Commented Jun 3, 2020 at 23:09
  • It there a way to check the status of these items? I didn't see them in the GitHub repos. I want especially to know when the blue color of the questions will become lighter (big comfortability issue).
    – Amessihel
    Commented Jun 25, 2020 at 12:38
234
votes

The Stack Overflow logo at the top of the page should not lose all color just because we're in dark mode:

Normal logo:

normal SO logo in topbar

New white-washed logo:

enter image description here

Please consider re-adding at least the orange color to the actual stack overflow icon.

3
  • Awww you beat me: twitter.com/tombyrer/status/1244715846393528321
    – tomByrer
    Commented Mar 30, 2020 at 20:06
  • 47
    Also note: in the footer it's still orange + grey and actually looks fine imo
    – Erik A
    Commented Mar 31, 2020 at 10:50
  • 1
    It seems I'm only just noticing this now, but it was enough to make me dig up this answer. Please consider changing.
    – user692942
    Commented Jun 25, 2020 at 0:26
196
votes

enter image description here

7
  • 27
    Came here to post this Commented Mar 31, 2020 at 6:37
  • 3
    so did I, but it was already here Commented Mar 31, 2020 at 15:44
  • 9
    #hireme, .everyonelovesstackoverflow { filter: brightness(0.5); } Commented Mar 31, 2020 at 19:56
  • 66
    @TamásBolvári Or display: none;...
    – TylerH
    Commented Apr 1, 2020 at 20:37
  • Probably a better way to style... .theme-dark div.clc-jobs-multi>.middle { background: #000; } .theme-dark div.orange { background-image: linear-gradient(90deg, rgb(120,51,16) 0%, rgb(122,68,3) 100%); } Commented Apr 7, 2020 at 3:16
  • 1
    I've been using the Dark Reader plugin for chrome to get dark mode for all websites - it works pretty good on most websites. I like the official dark mode for stackoverflow better then the Dark Reader version except for this ad section, so I went back to using Dark Reader.
    – jc12
    Commented Apr 15, 2020 at 15:07
  • 1
    These have been improved on our end and will get deployed soonish. Marking as complete so I don't have to revisit ✌️
    – Aaron Shekey StaffMod
    Commented May 11, 2020 at 19:40
183
votes

While reviewing suggested edits, here's what clicking 'Reject' looks like:

"clearly conflicts with author's intent" is invisible.

Also happens with Triage and Low Quality Posts queues and flag/close dialogs.

5
  • The edits themselves are also affected. Unchanged text in a changed line is invisible. Marco mentioned it
    – wjandrea
    Commented Mar 31, 2020 at 14:37
  • This colouring clearly conflicts with the author's intent. They just didn't want you to know that ;) Commented Mar 31, 2020 at 16:45
  • 10
    Highlight issue is also relevant for Close Votes (found while closing an issue as Off-Topic, selected close reason cannot be read once highlighted)
    – Tim Lewis
    Commented Mar 31, 2020 at 19:09
  • 4
    This should be looking better now.
    – Aaron Shekey StaffMod
    Commented Apr 7, 2020 at 18:48
  • Just saw a change applied to the close reasons UI a few minutes ago, was that part of the dark mode efforts or something unrelated? I don't remember being able to drag the modal around before, was that just added as well? It's a nice addition in case I need to quickly reference content behind the modal while selecting an option. Commented Apr 13, 2020 at 19:07
118
votes

Next badge popup

enter image description here

Also, dark mode is not dark enough for me. :)

20
  • 93
    "also, dark mode is not dark enough for me." Challenge accepted.
    – Aaron Shekey StaffMod
    Commented Mar 30, 2020 at 17:15
  • 52
    @AaronShekey Please don't make the current one darker! Maybe just add a 'midnight' option for those who want things truly black.
    – TylerH
    Commented Mar 30, 2020 at 18:40
  • 2
    @TylerH perhaps a "none more black" option
    – miken32
    Commented Mar 30, 2020 at 20:00
  • 2
    @TylerH There's a big difference between pure black and less bright. I'd personally like a 30% drop in brightness. Perhaps a configurable option would be nice since how black one likes their c̶o̶f̶f̶e̶e Stack Overflow is something that varies from person to person. Commented Mar 31, 2020 at 5:37
  • 6
    @MateenUlhaq I highly doubt they'll give a configurable slider option, though that would be amazing. I also doubt they'll add multiple dark modes with different preset sliders. The best I can hope for is enough people vote up my comment that Aaron sees a significant % of the community doesn't want a too-dark dark mode.
    – TylerH
    Commented Mar 31, 2020 at 13:28
  • 23
    If you check your preferences, I made the dark mode a little darker for ya ;)
    – Aaron Shekey StaffMod
    Commented Apr 1, 2020 at 18:40
  • 11
    It's awesome! Please order more black pixels.. :)
    – Scratte
    Commented Apr 1, 2020 at 18:45
  • 1
    @AaronShekey April Fools!
    – S.S. Anne
    Commented Apr 1, 2020 at 18:49
  • 3
    @AaronShekey There's a blog post about the making of Dark Mode, but I'd really like to see a post about how the "flashlight" effect in Ultra Dark Mode works.
    – mbomb007
    Commented Apr 1, 2020 at 21:28
  • 5
    @AaronShekey Hey there, I see you made an Ultra Dark Mode but you have made it available only till 5th of April, in the Ultra Dark Mode you have kept the background pitch black whereas in the Dark Mode, it looks like a grey wash. In the Ultra Dark Mode, the pitch black can help people with OLED screens. Also a humble request for a customizable color scheme where one can select the color for links, buttons etc. Hope you take my request into consideration.
    – Valay_17
    Commented Apr 2, 2020 at 6:51
  • 2
    @AaronShekey I feel the ultra dark mode is such a nice playful feature, that it should stay permanently. If it gets to stay or come back later it may be a little more useful if the flashlight would show the light mode instead of a colourless mode. I've been reading several posts on ultra dark mode already, just because it's fun :)
    – Scratte
    Commented Apr 2, 2020 at 13:18
  • 3
    @AaronShekey Heh. Appreciate flashlight gimmick. But honestly, if the flashlight just covered the entire screen, it'd be perfect for me. :) 🐱‍👤
    – Macke
    Commented Apr 2, 2020 at 14:18
  • 3
    @AaronShekey You joke but I, er, actually really like that 😂 Can we keep it? Commented Apr 3, 2020 at 21:48
  • 1
    Yeah, I'm here for the ultra dark mode's background, so if the foreground was light enough to read (kinda like it is in the 'flashlight') I'd be using it right now.
    – Zoey Hewll
    Commented Apr 6, 2020 at 3:54
  • 2
    @zovits There is no "activating it". It's there in Ultra-Dark, or something's off on your browser/system. Screen shot
    – Scratte
    Commented Apr 6, 2020 at 11:39
100
votes

The floating tooltip on the reputation graph has light text in a light box:

low contrast tooltip

4
  • 5
    Came here to post this, glad it's already on the radar Commented Apr 2, 2020 at 1:39
  • 3
    This should be looking better now. I hope ;)
    – Aaron Shekey StaffMod
    Commented Apr 7, 2020 at 18:49
  • 1
    Excellent work.
    – Chindraba
    Commented Apr 7, 2020 at 20:40
  • This bug has been solved Commented Apr 8, 2020 at 19:42
81
votes

Inverse shadow effect on the "welcome to stack overflow", and "Ask questions, get answers, no distractions" text from the tour page: (http://stackoverflow.com/tour) stack overflow tour I'm calling it a bug instead of just style preference because it hurts my eyes to look at it for some reason.

3
  • 14
    Also the tour needs to replace the white images in the examples
    – Scratte
    Commented Mar 30, 2020 at 18:54
  • I also figured this. The whole thing should be a bit reworked since the fonts and the examples are quite ... lets say ugly.
    – Blub
    Commented Apr 8, 2020 at 15:42
  • Please tag the answer with [meta-tag:bug]. Commented Apr 17, 2020 at 0:31
77
votes

Add a button in the top right of the sites menu, so that users can toggle between light and dark mode quicker and easier, in case dark mode is causing problems and they need to temporarily switch to light mode.

sites menu

8
  • 3
    This isn't ideal for mobile (I placed the theme toggle next to the site switcher instead of the place circled in your screenshot), but I whipped up a userscript that does essentially the same thing their code does in the preferences page for themes, if anyone is interested. Commented Mar 30, 2020 at 22:31
  • How do I currently turn it off on PC?
    – NelsonGon
    Commented Mar 31, 2020 at 5:45
  • 2
    @NelsonGon Profile page -> Edit profile and settings -> Preferences Commented Mar 31, 2020 at 8:14
  • 2
    I agree. I like using light modes during the day and dark modes during the night. It's convenient to have a quick toggle button somewhere on the header or footer (rather than having to dig through all sorts of menus).
    – Daniel
    Commented Apr 2, 2020 at 18:10
  • @Daniel isn't that what the system setting is for? Configure your OS to switch to dark mode in the evening, and set SO to follow the system Commented Apr 7, 2020 at 17:03
  • @andrewtweber The problem is that I prefer to always keep my phone in dark mode. Commented Apr 7, 2020 at 17:06
  • 1
    I'd like to improve this at some point, but it's not planned just yet. I think getting to preferences in general is way too difficult.
    – Aaron Shekey StaffMod
    Commented May 11, 2020 at 19:33
  • This should also work when you're not logged in. I've been blinded too many times using someone else's computer, which isn't logged in. If the style was purely CSS, you could even include both and switch between them with the browser. (In firefox, the option is in "View" > "Page Style".) I've seen few sites that do this, I assume for a reason.
    – bobsburner
    Commented Jun 14, 2020 at 2:38
74
votes

Stack Snippet Editor

The embedded snippet result should not render with a dark background. This is a breaking change to the look of existing Stack Snippets. See the explanation at the end of this answer and the comment chain below for a detailed explanation of why this shouldn't be implemented like this.

Stack Snippet Editor should not apply dark mode theme to the embedded page

How the Stack Snippet Editor used to look in dark mode theme before the latest patch

Embedded <iframe>s(?)

Embedded Stack Snippet should not apply dark mode theme to iframe

How the embeded stack snippet iframe used to look in dark mode theme before the latest patch:

Again, this change is a regression, see below.


Old answer

Possible Solutions?

  • Apply the user preference theme to the <iframe> if and only if there is no CSS added to the code, either by the <!-- language: lang-css --> section, or by <style> and <link> tags added to the <!-- language: lang-html --> section.

No. This might seem satisfactory at first, but there are also cases where JavaScript is used to dynamically apply styling, and that would be impractical to account for, since the relevant JavaScript could even be externally linked.

  • Apply the user preference theme only if the conditions above are met, and additionally there is no externally linked JavaScript.

No. Again, this is still impractical, as statically analyzing the JavaScript for changes to the document styling could potentially leave edge-cases unaccounted for, and any feasible implementation of this would only make the styling for these appear inconsistent at best.

  • Apply the user preference theme if the only section used is <!-- language: lang-html --> and it doesn't contain any <style>, <link> or <script> tags, or style attributes [and the approximately 100 deprecated attributes that affect color anywhere].

No. This might avoid ruining the contrast for the vast majority of cases (see below for even more exceptions), but there are so few questions that involve HTML and nothing else, that you'd probably never see this. Why even bother if it's never going to be seen?

For these reasons, my suggestion is to never apply the user theme to these <iframe>s.

23
  • 3
    Regarding the iframe background, there is no need to mess with the iframe's content, it's white because CSS says it should be (.snippet-box-edit{...background:#fff;...) By default the document's background is transparent. But dealing with text color might be a problem.
    – Kaiido
    Commented Mar 31, 2020 at 1:34
  • There's no security risk whatsoever, that line should be removed. It can be easily solved either with some JS appending a link tag, or even with pure CSS. Commented Apr 1, 2020 at 14:28
  • The snippet and the iframe "sandbox" in the SO share the same origin, so there's no CORS or any other kind of sharing needed. The "least surprise" has nothing to do with security, it's mentioned in the 3rd topic about confusion. Commented Apr 1, 2020 at 17:46
  • @rafaelcastrocouto then why does location.origin in the iframe evaluate to "https://stacksnippets.net"? Commented Apr 1, 2020 at 18:00
  • You are correct. I always thought they shared the same origin because the iframe has no src attribute. Anyway, they can set the dark theme option in the same way they change the origin. I still can't see how that can be a security risk. Commented Apr 1, 2020 at 19:53
  • 3
    You can not set the background of the iframe to dark by default. You'll break every example that explicitly set the color of the text to some dark color. You might notice none of the sites like jsfiddle, codepen, codesandbox etc change the color. It's white for that exact reason.
    – user128511
    Commented Apr 2, 2020 at 4:36
  • @gman maybe the condition for when user preference is applied could be based on whether there is any CSS present in the Stack Snippet? Of course that might be asking a bit much, but I think that would at least guarantee it doesn't ruin the contrast of any Stack Snippets. Commented Apr 2, 2020 at 17:04
  • @gman on second thought, there may be a handful of cases where Stack Snippets use JavaScript to apply styling, which would be very hard to automatically detect... Commented Apr 2, 2020 at 17:29
  • 2
    There are other problems than just whether CSS is set by JS. Canvases are transparent and they default to drawing in black so both WebGL and Canvas2D would have issues. PNG files are often transparent. Worse, if you made the iframe switch colors then the dev filling out might mess up and not know it. They might draw/style in white because "works on my machine" only to find out on people in light mode their example is unsuable. Really, it needs to stay white. If you want it dark add CSS to your example.
    – user128511
    Commented Apr 2, 2020 at 17:59
  • @gman I agree with you, see the update to my post Commented Apr 2, 2020 at 18:02
  • 1
    True. Ultimately though I think it would be unsafe to add such an option. Just look at all the bugs on S.O. I've converted 3 sites to dark mode. It took months to find all the bugs and come up with solutions. They are not all easy especially for images that don't look good over dark background and canvas drawing that need different colors and therefore have to programatically look up the mode and set colors. I think keeping snippet results the default white is best. Giving the option just adds more places for more bugs and broken snippets. Just my personal opinion.
    – user128511
    Commented Apr 5, 2020 at 6:39
  • 1
    So much room for a larger refactor here, but this should much more usable now.
    – Aaron Shekey StaffMod
    Commented Apr 7, 2020 at 18:50
  • 1
    Righttt. I'll see what I can do!
    – Aaron Shekey StaffMod
    Commented Apr 7, 2020 at 20:29
  • 2
    @PatrickRoberts No worries at all. A lot of this CSS is just so global and a bit of a house of cards 😬. I'm on it!
    – Aaron Shekey StaffMod
    Commented Apr 7, 2020 at 20:58
  • 2
    This should be fixed sometime tomorrow whenever the next build is.
    – Aaron Shekey StaffMod
    Commented Apr 15, 2020 at 23:07
69
votes

Clicking the question mark button for getting help when posting produces:

Happens also in comments formatting help (and the help page):

In addition, the Advanced help page has related issues and needs improvement.

5
  • Probably related: the text that says "Your edit will be placed in a queue until it is peer reviewed" has similarly low contrast. Commented Mar 31, 2020 at 18:00
  • 1
    @CoryCoolguy that issue has been reported. Commented Mar 31, 2020 at 19:29
  • stackoverflow.com/editing-help#comment-formatting, this section is barely readable Commented Apr 2, 2020 at 19:51
  • redacted...
    – S.S. Anne
    Commented Apr 7, 2020 at 23:07
  • 2
    This should be improved! These pages are generally pretty rough, aren't they. 😬
    – Aaron Shekey StaffMod
    Commented Apr 15, 2020 at 20:40
61
votes

Here's some suggestions (click on the first link of each point for a screenshot). Bold ones are serious issues. Sorry if the list doesn't really follow some kind of order.

  1. The blue color of post titles definitely feels off for me. I'm having an hard time reading the text. Confront this with Reddit RES dark theme for example.
  2. Question titles and scores: same here, a bit too dark, they are darker than the question body. I would suggest a simple 100% white. I tested it and it seems perfectly fine IMHO. Question scores also seem too dark in the main page (not only the question page).
  3. Tag badges: I understand that they are supposed to be different than normal badges, but they stand out a bit too much right now. It almost seems like they haven't been styled at all. A different, darker color would be better (link).
  4. Next badge to track dialog: wrong text colors, unreadable.
  5. Almost invisible site icons: some kind of background needs to be applied. This affects various parts of the site, and might be pretty hard to get right, but it currently isn't really eye-pleasing.
  6. Flag modal and Close question modal: totally unreadable.
  7. Vote event labels in any post's /timeline?filter=WithVoteSummaries are kind of unreadable (example). I am referring to the blue rectangle with the text "vote" inside. The "answer" labels are also on the edge for me.
  8. Syntax highlighting: type keywords are way too dark (example), and overall the syntax highlight color scheme is pretty hard to look at. This is most likely not an issue with SO's style itself, but rather with the default syntax highlighter theme that you are using.
  9. Tag stats summary in tag wikis: unreadable (link).
  10. Right bar titles in tag top users: unreadable (link).
  11. Review queues stats: half dark, half light. Unreadable text everywhere (link).
  12. Review queue filter dialog: still light, also the little title is kind of unreadable (link).
  13. Suggested edits markdown diff: whelp!
  14. Code snippet modal: whelp! again.
  15. Highlighted code in the Markdown formatting help page: unreadable (link).
  16. Tag badge info modals: unreadable.
  17. Tab buttons on various pages: unreadable. This happens in many places: review queues, /users, /tools, /help/badges, /help/privileges, /site-analytics, etc. Some question titles on /tools are also darkened out and hard to read.
  18. Axis and labels text on analytics graphs: unreadable. Both in /site-analytics and /site-analytics/traffic-sources.
  19. Developer story text fade gradient: wrong, light color (LOL at this one). Happens in different places (link).
  20. Developer story "add new item" icons: wrong color, invisible.
  21. User profile reputation graph: I don't know if this is intended, but it surely looks odd being all white (link).
  22. Job preferences settings' fields: wrong colors, some text is also unreadable (/users/jobsearch/<user-id>).

  23. You probably already know, but looks like /company/compensation/calculator is half dark and half light. Bottom text color is also impossible to read.

  24. Some buttons in the /advertising website (link) have very low contrast between text and BG (don't know if this already was a problem, but might as well throw it in there).
5
  • The example you included in nº8, IMO, slightly gained in readability. (Some Dark themes completely change code highlight colors, but thus far SO dark theme kept source code colors very close - which is good.)
    – bad_coder
    Commented Mar 30, 2020 at 21:59
  • I don't really think so. In which universe is this more readable than this? Keyword and non-keyword colors are almost identical, whereas on the light theme keywords are blue and code is black. In the dark theme every color is a pastel color, which does not create a real contrast between keywords and other text. Commented Mar 30, 2020 at 22:04
  • @Skeets Light mode: normal text is #2F3337, keywords are #0054A3 => contrast 1.69:1. Dark mode: normal text is #DADEE0, keywords are #B8DFFD => contrast 1.03:1. I don't think I would ever use such a color scheme. This is the theme I use for vi and also what I call a good amount of contrast. Commented Mar 30, 2020 at 22:57
  • 1
    You're comparing colors between themselves, they compare foremost against background. B&W is THE extreme- poor choice example, conductive to eye strain. "Too high of color contrast, however, creates a significant disparity in light levels that affect the user's eyes when they read.". So far, I think the code block background with source highlights is rather harmonious in this new theme. (I have no intention of elaborating further, given the wealth of your post.)
    – bad_coder
    Commented Mar 30, 2020 at 23:32
  • 2
    @bad_coder yes, I use contrast between the two, because I am talking exactly about that. Contrast between keywords and normal text. The background color has nothing to do with my point. I understand your point anyway. Overall, the theme contrast is fine. Commented Mar 30, 2020 at 23:36
57
votes

When reviewing suggested edits as markdown, the text is very difficult to read:

Suggested edit review

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

8
  • 2
    I fixed this at some point but honestly have no memory of doing so, hah.
    – Aaron Shekey StaffMod
    Commented May 18, 2020 at 23:54
  • I'm not sure I fully understand the meaning of the 'status-completed' tag, but this is still a problem @AaronShekey. At least on the Review Suggested Edits page on StackOverflow. Using Chrome 83.0.4103.61.
    – MeanGreen
    Commented May 22, 2020 at 9:25
  • Looks like this in both Safari and Chrome 🤔 i.sstatic.net/uqon6.png @MeanGreen
    – Aaron Shekey StaffMod
    Commented May 22, 2020 at 15:03
  • @AaronShekey I can confirm that it still looks as shown in the bug report. I'm using Google Chrome 83.0.4103.61 as well (latest version at time of writing). imgur.com/QUBm9vC Commented May 24, 2020 at 1:56
  • 2
    Got it. The markdown page, not the rendered output page. Fix is in!
    – Aaron Shekey StaffMod
    Commented May 24, 2020 at 15:17
  • Still an issue and making me skip all these.
    – m02ph3u5
    Commented Jun 6, 2020 at 19:34
  • @m02ph3u5 Can you send a link to a page where you still have this issue? The link from the post above looks fine for me. Commented Jun 6, 2020 at 20:42
  • Now that you mention it it's suddenly gone. Wtf?
    – m02ph3u5
    Commented Jun 6, 2020 at 21:08
56
votes

A little bit more contrast would be nice. I really have to focus to read tags and normal info texts that surround questions now.

Chrome also agrees with me. Please use the audit tool in chrome and run a accessibility audit to see which elements need a touch up.

low contrast audit

Also, can the links be turned into another color than blue? It blends to a strange color that makes my eyes want to turn away on the brown hue on the background. Setting it to gray(#bbc0c4) is more pleasing and easier to read(for me at least)

linksto gray

9
  • 21
    links other than blue YES PLEASE
    – Erich
    Commented Mar 30, 2020 at 21:10
  • 9
    Blue text on dark background in ALWAYS a bad idea!
    – Jaa-c
    Commented Mar 31, 2020 at 10:34
  • 4
    IMO, the diarrhea green of the blog/featured section in dark mode ought to just change to the same grey background of the question list.
    – Cᴏʀʏ
    Commented Mar 31, 2020 at 14:56
  • The .started-link only fails WCAG AAA normal text. The same with the not so great blue links. Commented Mar 31, 2020 at 19:33
  • @double-beep can be, but it's murder on my eyes. And I have pretty good sight. It's harder to focus on te text if it's blue. But that's just a personal experience. Numbers don't say everything Commented Mar 31, 2020 at 20:57
  • 3
    I can't upvote this enough. I have no idea why but my eyes can't focus on the stack overflow dark mode where as both my editors and the websites I work on all support dark mode and I have no trouble focusing.
    – user128511
    Commented Apr 2, 2020 at 4:40
  • 2
    I don't think it is 100% the "blue" that is the issue, I just think it is the saturation of the blue that is being used. My editor uses #61afef for blue text and #2c313c for the background and it looks fine (One Dark Pro). Commented Apr 3, 2020 at 18:32
  • 2
    Yeah, the blue is awful. I think I'd prefer a slightly yellow-tinged off-white. Very slightly brighter than the pale grey of the normal text, and just yellowish enough to be clearly identifiable as something different. Commented Apr 5, 2020 at 1:58
  • 1
    Extra points for the lighthouse screenshot
    – jackhowa
    Commented Apr 10, 2020 at 15:18
44
votes

Extending double-beeps answer. A lot of information of review queue summaries is either too hard or impossible to read. Notably the tabs text in the top right, the review count labels and the text in the yellow box linking to the queue.

enter image description here

1
  • Confirmed and upvoted. Commented Apr 4, 2020 at 15:39
44
votes

Loading a post in the Late Answers or First Posts queues produces:

It should maybe look like when loading an answer outside of a queue:

5
  • ..also on the Low Quality Posts queue. Commented Mar 30, 2020 at 23:42
  • 14
    For me it means that for 2-3 seconds on each review task I cannot read the post due to the animation: i.sstatic.net/VingF.gif
    – Wai Ha Lee
    Commented Mar 31, 2020 at 14:37
  • 1
    Looks like they're still using the animation for white. It's this way in all queues.
    – S.S. Anne
    Commented Apr 7, 2020 at 23:23
  • 5
    This is a major one. My eyes started hurting after skipping 3 or 4 posts.
    – 41686d6564
    Commented Apr 8, 2020 at 12:04
  • 1
    Literally going back to light theme because reviewing with dark theme is nauseating. @double-beep pls remove "(not a major one)" from the post
    – zoran404
    Commented Apr 25, 2020 at 21:02
38
votes

The contrast ratio of the decline reason is 1.25:1 (fails all WCAG text standards):

enter image description here

5
  • 3
    oh man, if we're going to get WCAG involved, I imagine there's a lot of places on the site that would fail in Dark Mode right now. Commented Mar 30, 2020 at 17:45
  • 35
    It's pretty safe to assume that this isn't an intentional choice, merely an oversight... it's... headache-inducing to know about how many manual overrides and hard coded things there are. :) No need to bring WCAG into it. :D
    – Catija Staff
    Commented Mar 30, 2020 at 17:49
  • @Catija this one (and the other I reported before) are the ones hurting more my eyes :) Commented Mar 30, 2020 at 17:52
  • @Catija You can reassure yourself by knowing that when this is done, there will be less of that (unless your programmers start hardcoding for light and dark mode).
    – S.S. Anne
    Commented Apr 7, 2020 at 23:24
  • Well, if the WCAG standards are used to begin with, many of these bug reports would not be happening; IE: what may look fine to one programmer may be hard to read for another programmer with a different monitor, etc. etc... Commented Apr 10, 2020 at 22:27
36
votes

Welcome back!

The welcome back message has low-contrast text

1
  • 11
    I hate the welcome-back message anyway. I say get rid of it.
    – S.S. Anne
    Commented Apr 7, 2020 at 23:33
34
votes

Transparent images uploaded by users can be difficult to read.

In this question there are two images. enter image description here

The top image seems to be transparent and so it looks good without dark mode:

enter image description here

Examples of this issue found by other users. The solution for this issue should should work well for these situations too.
Niyas Nazar found this post where uml arrows are hard to read in dark mode.
Rahul Wadhwani found this post where images of equations are hard to read.

15
  • 3
    You only want to swap the black/whites, not the hue of the color, as people might refer to the purple line or the green line in a line chart
    – Ferrybig
    Commented Mar 31, 2020 at 17:27
  • @Ferrybig actually, a white outline on the black text/lines is also going to fix it. But then again, that relies on the image being generated that way.
    – VLAZ
    Commented Apr 1, 2020 at 6:30
  • @Ferrybig People could also refer to a black line in a line chart though, right? I feel like it would take an AGI to figure out how the image intended for bright mode should look in dark mode... And don't forget the dark mode people who might create an image that looks good on dark mode, but looks terrible on bright mode. I suggest that every transparent pixel is replaced with white or black, depending on the uploader's preference.
    – Sweeper
    Commented Apr 2, 2020 at 8:33
  • 10
    I suggest Transparent == White. That was true before and I think that should be true even with dark mode. That way there will never be any confusion regarding the colors. People will have to live with white images in dark mode anyways. Adding the default white background behind images should ensure that images always looks like intended.
    – Alex Telon
    Commented Apr 2, 2020 at 9:36
  • 2
    Making sure the image always looks the same is probably very important for discussions about colorblindness and other topics specifically about colors. I think the images in this thread should look the same even if they would have been transparent. When the images were posted they users did not know that it would make a difference if the image was transparent or white. So it seems the safe choice is to force transparent to be white.
    – Alex Telon
    Commented Apr 2, 2020 at 9:44
  • A white background may be added for images in dark mode to look the same for all the old questions and the new ones too.
    – xTrimy
    Commented Apr 3, 2020 at 5:44
  • @AlexTelon When forcing the images to turn white, we shouldn't do that by modifying the actual images themselves, in certain cases the transparency is required or wanted, for example when you need to upload an image o you can use it in your code snippet
    – Ferrybig
    Commented Apr 3, 2020 at 8:48
  • @Ferrybig I can see that I was a bit unclear. I meant Transparent == White not as something to be done on the image, but as the effect the user should see. Transparent has looked like white before and should continue to do so. I suggested adding the default background behind images.
    – Alex Telon
    Commented Apr 3, 2020 at 14:48
  • @Alex_Telon Yes there should be a white background by default behind old posts having transparent images. There should also be a way for users who really want transparency on the dark background to override the default. Commented Apr 7, 2020 at 9:10
  • @PaulRougieux What problem would this solve? If a user wants a black background they can always edit the image not to be transparent.
    – Alex Telon
    Commented Apr 7, 2020 at 11:19
  • @AlexTelon I guess there can be cases - plots are an example - where a red curve on transparent background would be perfectly fine both with white background and dark background. In this case no need to add the white background. But in most other cases, it's better to have a white back ground under transparent images in dark mode. Commented Apr 7, 2020 at 14:51
  • Here's another one I found. Commented Apr 8, 2020 at 9:35
  • Also this
    – miszcz2137
    Commented Apr 8, 2020 at 11:07
  • 1
    At the risk of example overload I also found this stackoverflow.com/a/30566011/6472082 which led me to this post.
    – Michael S
    Commented Apr 11, 2020 at 4:04
  • On, for example, newegg.com, in the dark theme, images have a light-grey background so they remain white and readable, but at least somewhat retain the purpose of a dark theme.
    – retnikt
    Commented May 20, 2020 at 18:21
29
votes

All of the links on a given page look a little too blue. Don't get me wrong; blue is my favorite color.

But seeing it like this, kind of everywhere, does still grate the vision a little bit. A different shade for dark mode links would be ideal.

enter image description here

6
  • 5
    Disagree w/ this one; I think the links look way better against the dark background now than they ever did w/ the white background.
    – TylerH
    Commented Mar 30, 2020 at 18:44
  • 21
    a lighter blue would go a long way
    – Erich
    Commented Mar 30, 2020 at 21:11
  • 1
    I agree with this; the SO dark theme has the same problem most dark themes have; too much blue-against-black. Commented Apr 2, 2020 at 6:09
  • Agree -- the blue is very tough on the eyes. I think a light green would be easy on the eyes! Commented Apr 3, 2020 at 5:55
  • 2
    @theforestecologist: That could easily run afoul of the people who are selectively color blind. All I know is that this is a bit much, and I'd like it to change, but I don't want to prescribe a new shade that violates WCAG.
    – Makoto
    Commented Apr 3, 2020 at 15:23
  • @Makoto fair. though I was thinking very light green -- as in nearly white, but a little less starkly contrasted than white. Though, the greys/whites seen on the preferences page when I select dark mode are fine. I don't see a need to make titles stand out more from these links. Commented Apr 3, 2020 at 17:23
28
votes

Searching for dupes is broken:

Vote count is not shown and the contrast of small letters is too low.

1
  • 1
    The initial dup-close popup is not great either; light-gray small text on a medium-gray background Commented Mar 31, 2020 at 5:15
25
votes

In the "Select your next badge" modal, there is text that isn't very visible:

enter image description here

3
  • 6
    This got switched to a new component and should be looking a lot better.
    – Aaron Shekey StaffMod
    Commented Apr 7, 2020 at 18:51
  • Thank you, sir :D. It does look better, indeed. Commented Apr 7, 2020 at 21:43
  • @AaronShekey I noticed badge order has been inverted. Looking at the screen shot Bronze was at the left hand side, whereas now Gold is at the left most...Not saying I dislike it, but usual western writing is left to right, and so progression would intuitively follow that order. In a strange sort of way I find the change rather refreshing...
    – bad_coder
    Commented Apr 11, 2020 at 12:54
21
votes

This looks really awesome overall! A fantastic addition to the site :)


Job Preferences under Edit Profile and Settings still has some light-theme fields:

enter image description here


The My Logins page under Edit Profile and Settings still has some dark text and non-transparent icons:

enter image description here


The hover and selection colours of the tabs in Privileges in the Help Center still behave as in light theme:

enter image description here

The Badges page has the same issue.


The time range selector in Users still uses dark text:

enter image description here

2
  • Came here to post about the My Logins issue. Commented Apr 2, 2020 at 11:05
  • Wish I had more upvotes! It has been two weeks and none of them are fixed. Commented Apr 17, 2020 at 0:27
18
votes

The code block syntax highlighting has some contrast issues:

Contrast: 2.98

6
  • 1
    Also this is even worse with a blue light filter on :( Commented Mar 31, 2020 at 10:47
  • I don't think this is related to C# in particular. It's the code highlighting in general. It is the same in C and PowerShell.
    – LWChris
    Commented Apr 3, 2020 at 8:46
  • @LWChris oh yeah you're right, updated it Commented Apr 3, 2020 at 18:52
  • 2
    Thanks. I deleted my answer that was a duplicate of this. I somehow overlooked this when searching for the issue. I think it appeared to me as if it was about links.
    – LWChris
    Commented Apr 4, 2020 at 4:04
  • 4
    I made that color lighter in dark mode. Hopefully it's a bit more readable now.
    – Aaron Shekey StaffMod
    Commented Apr 7, 2020 at 18:52
  • 1
    Yeah it's definitively better now, thanks! Commented Apr 7, 2020 at 22:21
16
votes

The text is barely visible.

enter image description here

Text not visible (CTRL+G ) enter image description here

Image not apt to the background enter image description here

Editing Tag wiki

enter image description here

Tag Info Page

enter image description here

1
  • Please post the general bug as a separate question Commented Mar 31, 2020 at 19:45
15
votes

While I can read main site tags without much trouble, Teams tags are much harder to read because of the lack of contrast:

enter image description here

9
  • 1
    Yeah. It's going to take some finesse. Some of the theme color options for Teams work just great, others are a little hard to discern. :)
    – Catija Staff
    Commented Mar 30, 2020 at 19:32
  • Your tags look much better than ours - did you change any settings from their defaults?
    – gordy
    Commented Mar 31, 2020 at 1:37
  • @gordy might be a browser difference? I'm using Firefox on macOS. I agree your screenshot is better, I'll delete mine.
    – Glorfindel
    Commented Apr 1, 2020 at 7:14
  • turns out you can change this. it's "Theme color" in the team settings
    – gordy
    Commented Apr 1, 2020 at 17:27
  • @gordy thanks, didn't know about that since I'm not a team admin.
    – Glorfindel
    Commented Apr 1, 2020 at 17:33
  • This is by far the biggest problem for me. Maybe it's because I'm red-green colorblind and our tags are #9a3324, but the first time I logged into Teams I literally thought the tags were missing until I looked closer. Commented Apr 2, 2020 at 19:15
  • Tags have now a lighter colour - status-completed? Commented Apr 20, 2020 at 16:41
  • @double-beep nothing has changed for me (I still see the same thing as in the first revision). As mentioned above, it will depend on the Teams settings.
    – Glorfindel
    Commented Apr 22, 2020 at 4:33
  • Yeah, so these tag colors are themed based on the Team administrator's color choices. We don't have a great way of automatically adjusting someone's branded colors to something that makes sense on dark mode. Internal discussions have lead us to reconsider theming tags at all. We're looking at it 🏆
    – Aaron Shekey StaffMod
    Commented May 11, 2020 at 19:56
13
votes

I think dark mode is excellent.

Only problem I have noticed is insufficient contrast with inline code. (The difference in fonts is good, but the difference in background contrast could be more crisp.)

enter image description here enter image description here

1
  • 3
    This should be improved a little bit in the next build. I made the background color on those code blocks a little darker. I think there's a larger project of examine our font and line-height choices.
    – Aaron Shekey StaffMod
    Commented Apr 16, 2020 at 19:12
13
votes

Reputation graph still shows up with a white background. Likely due to the fact that it's a generated image; perhaps this shouldn't be the case anymore?

enter image description here

1
  • 6
    It's an svg, not an image, so it should be simple enough to style the elements of it Commented Mar 30, 2020 at 17:34
12
votes

Bold text isn't as bold anymore. I mean if I know what to look for I can see it, but that isn't the purpose of making something bold.

In the original theme bold text stands out from the rest of the text, but hard to spot the difference here:

enter image description here

For comparison, similar text in lightenter image description here

Even with the small screenshots, in the light theme, the bold text clearly stands out, while in the dark theme also a bigger image won't change much.

PS I hope it is also fine to leave positive feedback... I love that orange:

enter image description here

Please don't change it!

6
  • Could you include the bold example in white-theme underneath for "side-by-side" comparison?
    – bad_coder
    Commented Apr 1, 2020 at 19:13
  • 1
    @bad_coder it is randomly generated Lorem ipsum, but I can add something similar Commented Apr 1, 2020 at 19:19
  • I mean the exact same text, but in both themes, for exact visual comparison.
    – bad_coder
    Commented Apr 1, 2020 at 19:21
  • 2
    @bad_coder there you go Commented Apr 1, 2020 at 19:23
  • 2
    This is my frustration with dark modes in general, the contrast just isn't nearly as usable. I won't be able to fix this with color alone. Looks like font choice and line height will do it. Deferring for a larger look.
    – Aaron Shekey StaffMod
    Commented Apr 16, 2020 at 15:16
  • @AaronShekey you could love some guys just for their noirs.
    – bad_coder
    Commented Apr 17, 2020 at 17:09
12
votes

The icon color of both Stack Overflow and Meta Stack Overflow doesn't change. This can be seen when going to your profile menu when you are about to log out or switch community.

enter image description here

2
  • 2
    From the question: "Site sprites (appear in the site switcher or on profile pages) haven't been adapted to the dark theming. This means sites icons with dark colors (e.g. Super User, U&L, Salesforce, Wordpress, etc) may be difficult to see. " Commented Mar 31, 2020 at 8:47
  • 6
    I suspect this also relates to the MSO icon in the featured questions box.
    – DavidG
    Commented Mar 31, 2020 at 10:14
12
votes

The about page is a little harsh on the eyes, once they've adjusted to the Dark mode:

enter image description here


Not enough contrast between the white and the light gray in the examples on the editing help page. I then realized this is also mentioned in double-beep's answer but leaving the screenshot:

enter image description here


A double avatar option. One that goes on other users dark mode and another that goes on users light one.

4
  • 3
    Apparently ninja'd :) Commented Mar 30, 2020 at 18:23
  • @double-beep I just noticed. Feel free to edit the screenshot out into your own post :)
    – Scratte
    Commented Mar 30, 2020 at 18:26
  • 2
    The double avatar situation is actually pretty complicated. We'd need to store all those images. We'd also have to figure out how to integrate with gravatar, and split the UI to upload an image for each context? Seems gnarly.
    – Aaron Shekey StaffMod
    Commented May 11, 2020 at 19:39
  • 1
    @AaronShekey I find it absolutely awesome that I happened to find a great feature-request that seems so simple, but turns out to be unfeasible :) Thanks for looking into it :)
    – Scratte
    Commented May 11, 2020 at 19:43
1
2 3 4 5 6

You must log in to answer this question.

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