Light/dark mode initialize to prefers-color-scheme

CHANGELOG.md

@@ -7,6 +7,11 @@ To see every change with descriptions aimed at developers, see
 As a continuously updated web app, Cocreate uses dates
 instead of version numbers.
 
+## 2023-11-24
+
+* Light/dark mode now initializes to the user's preference according to the
+  browser/OS.  (Previously it defaulted to light.)
+
 ## 2023-11-13
 
 * Fix zero-length arrows, in particular fixing crash on Firefox

client/tools/settings.coffee

@@ -11,7 +11,8 @@ export fancyCursor = new storage.Variable 'fancyCursor', #true
   ## Chromium 86 has a bug with SVG cursors causing an annoying offset.
   ## See https://bugs.chromium.org/p/chromium/issues/detail?id=1138488
   not /Chrom(e|ium)\/86\./.test navigator.userAgent
-export dark = new storage.Variable 'dark', false
+export dark = new storage.Variable 'dark',
+  window.matchMedia?('(prefers-color-scheme: dark)')?.matches
 
 Tracker.autorun ->
   dom.classSet document.body, 'dark', dark.get()

doc/README.md

@@ -574,7 +574,10 @@ This toggle affects only your view, not others' views, so one user can be in
 and they see roughly the same diagram.
 Dark mode approximately preserves the hue of colors, but the brightness is
 inverted, so one user's "bright blue" is another user's "dark blue".
-As a warning, reds and purples currently look somewhat similar in dark mode.
+
+Cocreate initially chooses light or dark mode according to your browser or
+operating system's theme/setting.  Once you click button, Cocreate remembers
+and uses your light/dark mode preference.
 
 ### <img src="icons/grid.svg" width="18" alt="Square Grid Icon"> Square Grid Toggle