From d72f55e4c7096d772c3f45a9332b926392c080a3 Mon Sep 17 00:00:00 2001 From: Erik Demaine Date: Fri, 24 Nov 2023 19:32:52 -0500 Subject: [PATCH] Light/dark mode initialize to prefers-color-scheme --- CHANGELOG.md | 5 +++++ client/tools/settings.coffee | 3 ++- doc/README.md | 5 ++++- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1cd7688..0ba55fd 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/client/tools/settings.coffee b/client/tools/settings.coffee index 6ba0a45..7b90bee 100644 --- a/client/tools/settings.coffee +++ b/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() diff --git a/doc/README.md b/doc/README.md index abd6d81..8ebe0cc 100644 --- a/doc/README.md +++ b/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. ### Square Grid Icon Square Grid Toggle