Posted 2019-03-26
Last year Apple introduced dark mode in MacOS. This is really nice at night because your eyeballs aren't blasted with tons of white backgrounds in pretty much all windows. Unfortunately, most web pages still use a white background. Obviously you can redesign your website to conform to dark mode, but this looks rather stark on computers in light mode.
The solution would be to have your website render dark on a system in dark mode and light on a system in light mode. As of the new version of Safari included in MacOS 10.14.4 Mojave that was released just now, you can actually do that, as you can see here. Just switch your system between light and dark mode and you'll see this webpage switch over accordingly.
I like to use this terminal command to switch between light and dark mode:
sleep 2; osascript -e 'tell application "System Events" to tell appearance preferences to set dark mode to not dark mode'
(Change the last "not dark mode" to "true" or "false" to enable or disable dark mode. The line above toggles back and forth.)
On your website you need to set up conditional CSS with media queries. This is what I use:
<style type="text/css" media="screen, print">
body { background-color: #f0f0f0; }
A { color: #c00000; text-decoration: underline; }
A:visited { color: #700000; text-decoration: underline; }
H1 { font-family: futura, arial, sans-serif; font-size: 14pt; }
</style>
<style type="text/css" media="screen and (prefers-color-scheme: dark)">
body { background-color: #202020; color: #d0d0d0; }
A { color: #ff6734; }
A:visited { color: #d82000; }
</style>
The first part between sets everything up for light mode, with a very light gray background.
Then the second style section (in bold) with (prefers-color-scheme: dark) overrides those earlier color settings. Note that all the font settings from the first style section are inherited by the second style section; no need to restate all of those.
That's it! Pretty cool, right?
Update: have a look here for more information, including how to use dark mode with javascript.