Tuesday, April 14, 2026

It was long overdue, but I’ve finally taken the time to implement dark mode for this website. Is dark mode better for the eyes? NO, and stories about blue light affecting sleep are mostly untrue, in the sense that it’s not blue light exposure that’s keeping you awake. Dark mode can feel easier on the eyes in a dark room, but it’s better to switch on the lights anyway.

When you ask your favorite search engine AI how to implement dark mode, it will give some pointers to old-fashioned solutions, simply because there is a lot of outdated information out there. For DevCry I went with the more modern solution; you should always keep your browser updated anyway.

HTML, CSS, JavaScript

Web pages consist of HTML and CSS. The CSS defines the styling, and hence has all the colors. When enabling dark mode we are not loading a different stylesheet; instead the stylesheet contains color definitions for both light and dark mode. For neatness, the colors are defined as variables.

In principle:

/* stylesheet.css */

:root {
    color-scheme: light dark;

    --bg: light-dark(#fff, #222);
    --fg: light-dark(#000, #ccc);
}

article {
    background-color: var(--bg);
    color: var(--fg);

    ...
}

DevCry uses a syntax highlighter module (prism.js) to display code blocks. So, I adapted the prism.css to use color variables too. For the dark mode code examples I use a colorscheme stolen from heavily inspired by a well-known pro game designer/programmer who frequently streams on Twitch. Note that it’s heavy on seagreens rather than just white on black.

Now we can enable Developer Mode in the browser and switch between light/dark mode there. However, we’d like to let the user switch if they want to, so therefore we have the “moon” button in the top right of the page.

The crescent moon is made by unicode character U+9789. The button is stylized in CSS to have a rounded border and when you click it, the CSS will slightly nudge the button position by using translate(). The actual click runs a tiny JavaScript code to toggle dark mode.

var toggle_dark_mode = function() {
    const current_theme = document.documentElement.style.colorScheme ||
        (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");

    const new_theme = current_theme === "dark" ? "light" : "dark";
    document.documentElement.style.colorScheme = new_theme;
    localStorage.setItem("theme", new_theme);
}

Easy peasy

Dark mode for a website looks incredibly “nothing out of the ordinary” when it just works. The thing about computers is though that basically nothing “just works”; all this stuff needs to be programmed in and every minute detail needs to be correct, otherwise you get weird unexpected behavior. The HTML, CSS, and JavaScript are three distinct domains just to define some scroll of text on the screen. I guess my bewilderment is telling that web development is not really my thing.