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.
Permalink - posted 2019-03-26
Van 2007 tot 2016 postte ik regelmatig foto's hier op muada.com. Een deel van die foto's zijn verloren gegaan bij de overgang naar een nieuwe server. Ik heb nu een groot aantal weer terug kunnen zetten en ook de foto-upload-functionaliteit verbeterd, zodat ik vanaf nu weer makkelijk snel een foto op deze site kan plaatsen.
Nog een tip: ik heb de foto's de volgende CSS-stijl gegeven:
max-width: 100vw; max-height: 92vh;
Door de units (honderdsten van) viewport width (vw) en viewport hight (vh) te gebruiken gebruiken de foto's maximaal de volle breedte en 92% van de hoogte van het scherm.
Hier is het foto-archief van 2019 met links naar de archieven van eerdere jaren. 2015 en 2016 missen alleen nog foto's, en in 2017 en 2018 heb ik helemaal geen losse foto's op de site gezet.
Permalink - posted 2019-09-30