Matt Langford

Follow @Mtt on Micro.blog.

Dark Mode for the Marfa Theme on Micro.blog

With iOS 13 and macOS Catalina, you can enable Dark Mode on your devices. This works pretty well across system apps, and we’ve already seen third party apps begin to take advantage of this as well. The biggest fallback of a system wide Dark Mode; however, is on the web. It can be quite a shock to the system when you open a bright white site when Dark Mode is enabled.

While there is no easy way (without a Reader Mode type of hack) to make the entire web Dark, you can enable Dark Mode on your own site. It’s suprisingly simple.

As an example, the following is all the CSS needed to do this with the Marfa theme on Micro.blog (it can be very easily modified for any theme or any site on any platform):

@media (prefers-color-scheme: dark) {
  body {
        color: white;
        background: black;
        }
  nav.main-nav {
        background: black;
        }
  a, nav.main-nav a, #footer a, #post-nav a, p a, ul a, ol a, h1, h2, h3 {
        color: white;
        }
}

All the code is doing is turning the background black and the text white. Of course, you can customize as much as you’d like. As of now, this is only supported by Safari on Catalina and iOS 13 (and Safari Technology Preview).

You can view it on this site in Safari by switching to Dark Mode on your device (you shouldn’t even need to refresh).

Matt Langford @Mtt