Hugo Future Imperfect Slim

Tracey Jaquith 路 PoohBot Pictures

Technophile 路 Optimist 路 CyclistArchivist 路 Design 路 Video 路 TV 路 Kubernetes 路 Docker

2 minutes read

dark -v- light mode

things turning me on this week
鈽昬njoy with a hot cupa java/script
‘Dark Mode’ is new - and a great relief to our eyes at night. Thankfully it’s also not that hard to setup very effectively.


If you ideally use either minimal css/style color: and background-color: or neutral colors (eg: middle grays for accents like #888) then your work is a lot simpler because you have less overrides to setup.

Effectively, one easy pass through is to find your darker and lighter colors and invert them for when it is dark mode.

You can then set those overrides into a CSS ‘media query’ eg:

@media (prefers-color-scheme: dark) {
  body {
    color: #ddd;
    background-color: #111;

That might override normal defaults (implicit or explict) for your site like:

  body {
    color: #111;
    background-color: #ddd;

The less places that use specific colors - the less you have setup overrides for.


At the time of this writing:

  • macosx is Mojave and Catalina comes later this month
    • Mojave has only either everything is dark mode (always) or not
  • iOS latest is v13
    • which has the same ^^ ability to always be light/default, always be dark, or be time-based

So for non-mobile, if you want time-based dark mode, you can use javascript to additionally use the browser’s localtime to do dark mode when it’s evening hours and dark mode is enabled (and otherwise do default/light/day mode).

if (window.matchMedia  &&  window.matchMedia('(prefers-color-scheme: dark)').matches) {
  log('bring on the darkness!')
  const hour = new Date().getHours()
  if (7 <= hour  &&  hour < 19) { // override [7am .. 7pm] localtime
    log('.. but its vampire sleep time - back to day mode')

and you can assign some ‘overrides to the overrides’ in your css rules like:

body.lite {
  color: #333;
  background-color: #f4f4f4;

which will basically disable/revert dark mode during the local daylight hours.

Once Catalina macosx hits, I will likely drop the JS and body.lite stuff above.

Feel free to see the ‘dark mode’ CSS and JS I’m using here: CSS JS (presently at the bottom of the files).

Say something


Jamie's Gravatar


Hello nice to find your site. :)

Recent posts

See more



#spottheshuttle 1940s 1st-person 3d accident aids-lifecycle airplane animals appeltart apple-pie apple-watch architecture arkit art ascii-art asia augmented-reality baking bali bay-area biking birthday cafe-racer camaro camera-video cars cat-pee cat-psychology cats coding college colorspaces computer-vision cornell crictl css dark-mode decaf deinterlace desert design diy docker documentary ducting emacs endeavour family ffmpeg food games geek gitlab golden-gate-bridge google-cardboard green-magic-man h.264 hack highway-1 home https hugo hyperlapse internet-archive ios iphone javascript k3s kubernetes landscapes linux lisp luke-battling-darth mac macosx mashup metal montclair motion-jpeg motorcycle mplayer nasa new-bay-bridge news ninja oakland partioning php php-htm-mode politics protest rancher recording remaster remix remodel shuttle small-town star-wars swift technical time-lapse time-machine timing-belt-adjustment top-end-rebuild tracey traefik training-ride vacation valve-job video virtual-reality vlog vscode weekend-mechanic work x264 xcode yuvj420p zx6


tracey is a nonstop dance party. so you dont have to. dont ask me about k8s. thanks for dropping by today. you look nice.