2019-08-30 Dark Mode

If you’re a regular reader of this site, and you prefer “dark mode” in your browser, you you should be getting a “dark” theme, now. I hope it works. Let me know if anything looks weird.

The current CSS file uses the prefers-color-scheme media feature to change colours:

@media (prefers-color-scheme: dark) {
    body, rss {	color: #eeeee8; background-color: #333333; }
    a { color: #1e90ff }
    a:hover { color: #63b8ff }
    a:visited { color: #7a67ee }
    input, input[type="text"], textarea {
	color: #eeeee8; background-color: #555;
	padding: 0.5ex;
	font-size: 80%;
	line-height: 125%;
    }
    img { opacity: .75; transition: opacity .5s ease-in-out; }
    img:hover { opacity: 1; }
    /* ... some stuff removed ... */
}

How to change your theme preferences depends on your operating system. Yes, it’s not a browser setting! For Windows: Settings → Preferences → Colors. For macOS: System Preferences → General → Appearance → Dark. For Android: Quick Settings → Dark Theme. For Gnome: use Tweaks (a separate app!) to change to a theme with “dark” in the name (e.g. “adwaita-dark”). The See Also section on the MDN page for prefers-color-scheme has more information.

If you’re a Firefox user, this requires Firefox 67, not ESR.

This is what it looks like:

Dark ModeLight Mode

Tags:

Comments

In about:config, for Reader Mode:

SettingValue
reader.color_schemedark

– Alex Schroeder 2019-10-01 10:59 UTC


Please make sure you contribute only your own work, or work licensed under the GNU Free Documentation License. Note: in order to facilitate peer review and fight vandalism, we will store your IP number for a number of days. See Privacy Policy for more information. See Info for text formatting rules. You can edit the comment page if you need to fix typos. You can subscribe to new comments by email without leaving a comment.

To save this page you must answer this question:

Please say HELLO.