With the release of macOS Mojave and it’s dark mode color scheme, I wanted to get a dark mode set up for A Lazy Sequence. There is currently no support for this in browser CSS, but it has made it into the editors draft of the Media Queries Level 5 CSS spec under the prefers-color-scheme media query.

I’ve written about the simplest pair of Less mixins to abstract it away and build a stylesheet without concern for future changes. The only slightly tricky thing is it leverages the detached rulesets feature of less, but its a textbook example of one:

.darkmode(@rules) {
    @media screen and (prefers-color-scheme: dark) { @rules(); }
    html.dark & { @rules(); }
}

.modeColor(@light, @dark) {
    color: @light;
    .darkmode({color: @dark});
}

The mixin includes an html class so that it’s easy to test the style without waiting for the future to arrive. I found I was overriding only color in 95% of the cases so I made a quick special case for that.