Auto theme selection via prefers-color-scheme (fix #411)

edemaine · Jul 26, 2019 · 581a274 · 581a274
1 parent 4c9aef0
commit 581a274
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 26 deletions.
diff --git a/client/layout.jade b/client/layout.jade
@@ -1,5 +1,5 @@
 head
-  link(rel="stylesheet", href="/bootstrap/light.min.css", id="themeLink")
+  //-link(rel="stylesheet", href="/bootstrap/light.min.css", id="themeLink")
   meteor-bundled-css
   link(href="https://fonts.googleapis.com/css?family=Merriweather:400,400i,700&subset=latin-ext", rel="stylesheet", crossorigin="anonymous")
   link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.7.2/css/all.css", integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr", crossorigin="anonymous")

diff --git a/client/message.coffee b/client/message.coffee
@@ -1,3 +1,5 @@
+import { resolveTheme } from './theme.coffee'
+
 sharejsEditor = 'cm'  ## 'ace' or 'cm'; also change template used in message.jade
 
 switch sharejsEditor
@@ -702,14 +704,15 @@ Template.submessage.helpers
             'CodeMirror-linenumbers'
             'CodeMirror-foldgutter'
           ]
+          theme = resolveTheme themeEditor()
           editor.setOption 'theme',
-            switch themeEditor()
+            switch theme
               when 'dark'
                 'blackboard'
               when 'light'
                 'eclipse'
               else
-                themeEditor()
+                theme
           pasteHTML = false
           editor.setOption 'extraKeys',
             Enter: 'xnewlineAndIndentContinueMarkdownList'

diff --git a/client/settings.coffee b/client/settings.coffee
@@ -7,6 +7,17 @@ Template.settings.onCreated ->
   @autorun ->
     setTitle 'Settings'
 
+rotateTheme = (theme) ->
+  switch theme
+    when 'auto'
+      'dark'
+    when 'dark'
+      'light'
+    when 'light'
+      'auto'
+    else
+      'auto'
+
 myAfter = (user) -> user.notifications?.after ? defaultNotificationDelays.after
 
 Template.settings.helpers
@@ -99,21 +110,13 @@ Template.settings.events
     e.preventDefault()
     e.stopPropagation()
     Meteor.users.update Meteor.userId(),
-      $set: "profile.theme.global":
-        if themeGlobal() == 'dark'
-          'light'
-        else
-          'dark'
+      $set: "profile.theme.global": rotateTheme themeGlobal()
 
   'click .themeEditorButton': (e, t) ->
     e.preventDefault()
     e.stopPropagation()
     Meteor.users.update Meteor.userId(),
-      $set: "profile.theme.editor":
-        if themeEditor() == 'dark'
-          'light'
-        else
-          'dark'
+      $set: "profile.theme.editor": rotateTheme themeEditor()
 
   'click .previewButton': (e, t) ->
     e.preventDefault()

diff --git a/client/settings.jade b/client/settings.jade
@@ -21,13 +21,13 @@ template(name="settings")
           tr
             th
               label Global theme:
-              .description Throughout Coauthor (except editor): Black text on white background (Light) or white text on black background (Dark).
+              .description Throughout Coauthor (except editor): Black text on white background (Light) or white text on black background (Dark). Auto attempts to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">detect</a> based on operating system theme.
             td
               button.btn.btn-default.themeGlobalButton(type="button", data-toggle="button", autocomplete="off")= themeGlobal
           tr
             th
               label Editor theme:
-              .description When editing messages: Black text on white background (Light) or white text on black background (Dark).
+              .description When editing messages: Black text on white background (Light) or white text on black background (Dark). Auto attempts to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">detect</a> based on operating system theme.
             td
               button.btn.btn-default.themeEditorButton(type="button", data-toggle="button", autocomplete="off")= themeEditor
           tr

diff --git a/client/theme.coffee b/client/theme.coffee
@@ -1,10 +1,26 @@
-Meteor.startup ->
-  lastTheme = 'light' ## initial value from link in layout.jade
-  $('body').addClass lastTheme
-  Tracker.autorun ->
-    if themeGlobal() != lastTheme
-      $('body').removeClass lastTheme
-      lastTheme = themeGlobal()
-      $('body').addClass lastTheme
-      $('#themeLink').remove()
-      $('head').prepend """<link rel="stylesheet" href="/bootstrap/#{lastTheme}.min.css" id="themeLink"/>"""
+prefersDark = window.matchMedia '(prefers-color-scheme: dark)'
+
+export resolveTheme = (theme) ->
+  if theme == 'auto'
+    if prefersDark.matches
+      'dark'
+    else
+      'light'
+  else
+    theme
+
+lastTheme = null  ## initial value from link in layout.jade
+
+## This used to be wrapped in Meteor.startup, but it seems unnecessary as
+## <head> is always loaded, and we want theme to load ASAP.
+Tracker.autorun updateTheme = ->
+  newTheme = resolveTheme themeGlobal()
+  if newTheme != lastTheme
+    $('body').removeClass lastTheme
+    $('body').addClass newTheme
+    $('#themeLink').remove()
+    $('head').prepend """<link rel="stylesheet" href="/bootstrap/#{newTheme}.min.css" id="themeLink"/>"""
+    lastTheme = newTheme
+
+## To implement 'auto' theme, listen to changes to browser's preference.
+prefersDark.addEventListener 'change', updateTheme
diff --git a/lib/settings.coffee b/lib/settings.coffee
@@ -5,7 +5,7 @@
 
 export defaultFormat = 'markdown'
 
-@defaultThemeEditor = @defaultThemeGlobal = 'light'
+@defaultThemeEditor = @defaultThemeGlobal = 'auto'
 @themeEditor = ->
   Meteor.user()?.profile?.theme?.editor ? defaultThemeEditor
 @themeGlobal = ->