Dark Mode for Stack Exchange sites

Came here after I asked the same question seven months earlier, when there is still no dark mode, and the question was marked as duplicate.

I just want to add that an official dark theme is not a subjective preference about font size, layout or a gimmick. All programmers would understand that the eye health problem which associates with inevitable long term staring of the bright white screen when you are reading or programming every day.

That is why more and more programmers would choose a dark IDE. Reddit, YouTube, Twitter, and more sites are adding official dark theme support. It's not some gimmick or fashion trend. It's a everyday health issue.

Fortunately, there is an ongoing GitHub discussion here

Currently, Dark Mode is available as a beta test on Stack Overflow only. More details can be found in this Meta Stack Overflow question. At the moment, it isn't clear if, how, or when it will be rolled out to other sites in the network:

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 [styles] 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.

November 2020, this was rolled out to the international versions of Stack Overflow.

The January 2021 updates about the editor and the review queues contained screenshots of Meta Stack Overflow and Meta Stack Exchange hinting at resp. in Dark Mode – presumably, staff is alpha-testing the feature on more sites.

May 2022 saw the announcement of custom designs for half a dozen sites, including a hint at Dark Mode for other sites:

we also have some ideas around increasing accessibility and customization by bringing dark mode and other more accessible-centric designs beyond Stack Overflow

I've been using a popular¹, open source Chrome extension called Dark Reader (also available for Firefox and Safari).

It works pretty well right out of the box for most sites, in my experience, but you can adjust brightness, contrast, sepia, grayscale, etc through a little slider panel. You can also manually adjust the underlying CSS it generates. The extension further allows you to preserve settings and enable/disable behavior on a per-site basis.

Here's a sample of what meta.SE looks like, given my configuration:

_{¹ As of 2020-10-14 12:18, the Dark Reader Chrome extension has over 2 million users and is rated 4.7 out of 5 stars, based on 7,466 reviews.}

I also support a dark theme. Until then, you have these options:

• you can use stylish which is available for Firefox and Chrome and look into userstyles
• if you're using Gnu/Linux
  • and have compiz installed, you can always invert the colors of your active window (look for "Negative" in the CompizConfig Settings Manager).
  • without compiz there is an alternative solution via xcalib -invert -alter.

It's how I circumvent white-background-dogma that's cursing the Internet.

Currently the "dark mode" option is added to the Stacks (Stack Overflow design site).

I hope, in near future it may implement into all the Stack Exchange sites too.

GIF from Stacks:

Update on February 06, 2020:

The "dark mode" option is added to Stack Overflow Blog too.

I see a couple problems with doing this.

First, there currently is no way to change to any different theme on a per-user basis. So that's something that would have to be implemented. I don't think it would be all that difficult, really, but still that's an non-trivial amount of work.

Second, the themes would have to be populated. Who will create these themes? Will they be user submitted? If so who would approve them? Would there be safety potential concerns? (I'm not a front end guy, so I don't know, could someone put 'bad things' in a css?) If it's internal would this the next intern's project or something?

Third, the themes would have to be maintained. When there's a formatting problem, we'll have to ask "What browser, what SE build, oh and what theme?" It's another piece of the puzzle that would just complicate things.

Now, who doesn't like the idea of customization? I think it's great when there's multiple themes. Stack Overflow has so much orange I feel like it's Halloween all year round!! But honestly, I think the costs far far FAR outweigh be benefits we would receive from a feature like this.

For anyone using Google Chrome, there is now an experimental setting in the latest version of Chrome (78.0.3904.70) which forces dark mode on websites even if they don't have a dark mode.

The instructions to enable this feature can be found here: https://www.techradar.com/news/chrome-78-arrives-on-all-platforms-with-forced-dark-mode

This is an experimental option at the moment, so you will find no reference to it in the Settings menu; instead you'll have to enable the relevant flag within Chrome. Just pay a visit to chrome://flags/#enable-force-dark and choose an option.

You can opt for simply Enabled, or you can experiment with different method of dark mode implementation such as RGB-based color inversion, or CIELAB-based inversion. You may need to spend a little time with each to see which one works best for you.

Unfortunately this setting affects all websites and there doesn't appear to be a way to only target specific websites (i.e. SE). Also this is an experimental feature so it may be pulled at some point. But it seems like a good option while it's there.

Here is how this site looks like with the setting enabled:

It's finally here on Stack Overflow, https://stackoverflow.com/users/preferences/

You can change it from the preferences.

Came here and realised that this still isn't a thing! You can use Stylish to either create your own dark theme or there are a number of dark themes available (I don't think they're that great but I prefer a slightly broken dark theme to the current white theme).

Would definitely prefer it to be officially supported, but this is a workaround if you're desperate!

It's possible to have alternate CSS themes for sites — it's even common to have alternate themes designed specifically to support printing — and browsers often (always? I dunno) have an built-in mechanism for selecting between the themes at the user's request. I certainly remember using this with Firefox on a number of sites, but haven't tried for a while to be honest. However, that doesn't mean that it is necessarily a wise thing to do. In particular, the alternate theme would need to be developed and maintained; surely that developer effort would be better spent elsewhere?

If you really want your own style, force your own stylesheet that overrides key things like colors (you probably want to leave the layout the same though). I'm sure that's possible, and it puts the cost of maintenance squarely on those who really care (i.e., you).

You can also use Stylus. It is available for chrome but also available for firefox and opera. I'm not sure about other browsers.

Screenshot:

On Android phones, one can use Opera's built-in dark mode or Firefox + some dark theme extension such as Dark Reader:

Objective things

Note that IDE is not a webserver, IDE supports customization of colors initially.

Some time ago I've made a custom CSS for SO site for use with Stylish/Stylus plugin (not dark, but you can find dark themes). So I know that the SO's CSS is (or was at that time) really complex and that makes things hard. (It's main CSS file is ~5000 lines (400kb file), i.e. 10 times bigger than a CSS should be).
Specifically with a dark theme, it would be hard to adjust all corners of this site, there are many images and colored backgrounds. Too many elements would require manual adjustment.

If speak about feature requests towards themes, I'd wish first that the CSS reduces it's complexity radically. This would allow easy customization via plugins and solve the issue once for all and for everybody.

Subjective things & opinions

Some people want a dark theme, some people want e.g. better fonts, layout, ans so on. "Dark theme" does not mean anything specific, there can be many different dark themes, why you think the one you like would be better than some other "dark theme"?

And finally, I just think all these dark themes is just a gimmick (or exceptionally a technical requirement e.g. for improving battery life or working in dark environment). Moreover as someone who understands things from UX and readability issues, I'd just recommend to always stay with black text on light background when you have textual content. In other words, making dark theme for an informational site is initially a bad idea. It might be ok for Youtube or online cinema interface, but not for text-centric media.

Note: I have been working around this with the following shoddy userscript that just inverts brightness:

// ==UserScript==
// @name         Simple Dark Mode
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  my eyes
// @author       starball
// @match        *://*.stackexchange.com/*
// @match        *://meta.stackoverflow.com/*
// @match        *://chat.stackoverflow.com/*
// @match        *://*.askubuntu.com/*
// @match        *://*.superuser.com/*
// @match        *://*.serverfault.com/*
// @match        *://*.stackapps.com/*
// @match        *://metasmoke.erwaysoftware.com/*
// @match        *://rodgort.sobotics.org/*
// @run-at       document-body
// @grant        GM_addStyle
// ==/UserScript==

(function() {
  'use strict';
  // note: I originally wanted to just filter on the body, but sites all have
  // their own layout things that are just not worth trying to work around.
  // This might be a bit more perf intensive, but at least it doesn't mess up
  // layout expectations.
  const filter = document.createElement("div");
  Object.assign(filter.style, {
    position: "fixed",
    inset: "0",
    contain: "strict",
    zIndex: "999999",
    pointerEvents: "none",
    backdropFilter: "invert(1.00) hue-rotate(180deg) brightness(1.3)",
  });
  document.body.prepend(filter);
  GM_addStyle(`
    body {z-index:0;}
    img, video { filter: invert(1.00) hue-rotate(180deg); }
  `);
})();

I've been too lazy to add @match headers for sites I don't frequent.