From 0700f2d833622e29218b98200a86950cb8485285 Mon Sep 17 00:00:00 2001
From: Simon Legner <Simon.Legner@gmail.com>
Date: Wed, 11 Sep 2019 21:50:21 +0200
Subject: [PATCH 1/4] Add support for prefers-color-scheme media query

---
 assets/javascripts/app/settings.coffee         | 18 ++++++++++++------
 .../templates/pages/settings_tmpl.coffee       | 16 +++++++++++++---
 .../views/content/settings_page.coffee         | 10 +++++-----
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/assets/javascripts/app/settings.coffee b/assets/javascripts/app/settings.coffee
index 350a08c0..bfe8ae73 100644
--- a/assets/javascripts/app/settings.coffee
+++ b/assets/javascripts/app/settings.coffee
@@ -7,7 +7,8 @@ class app.Settings
     'arrowScroll'
     'analyticsConsent'
     'docs'
-    'dark'
+    'dark' # legacy
+    'theme'
     'layout'
     'size'
     'tips'
@@ -43,7 +44,7 @@ class app.Settings
   set: (key, value) ->
     @store.set(key, value)
     delete @cache[key]
-    @toggleDark(value) if key == 'dark'
+    @setTheme(value) if key == 'theme'
     return
 
   del: (key) ->
@@ -114,15 +115,20 @@ class app.Settings
     return
 
   initLayout: ->
-    @toggleDark(@get('dark') is 1)
+    if @get('dark') is 1
+      @set('theme', 'dark')
+      @del 'dark'
+    @setTheme(@get('theme'))
     @toggleLayout(layout, @hasLayout(layout)) for layout in @LAYOUTS
     @initSidebarWidth()
     return
 
-  toggleDark: (enable) ->
+  setTheme: (theme) ->
+    if not theme
+      theme = if window.matchMedia('(prefers-color-scheme: dark)').matches then 'dark' else 'default'
     classList = document.documentElement.classList
-    classList.toggle('_theme-default', !enable)
-    classList.toggle('_theme-dark', enable)
+    classList.remove('_theme-default', '_theme-dark')
+    classList.add('_theme-' + theme)
     color = getComputedStyle(document.documentElement).getPropertyValue('--headerBackground').trim()
     $('meta[name=theme-color]').setAttribute('content', color)
     return
diff --git a/assets/javascripts/templates/pages/settings_tmpl.coffee b/assets/javascripts/templates/pages/settings_tmpl.coffee
index d5cb0985..07bfc65a 100644
--- a/assets/javascripts/templates/pages/settings_tmpl.coffee
+++ b/assets/javascripts/templates/pages/settings_tmpl.coffee
@@ -2,12 +2,22 @@ app.templates.settingsPage = (settings) -> """
   <h1 class="_lined-heading">Preferences</h1>
 
   <div class="_settings-fieldset">
-    <h2 class="_settings-legend">General:</h2>
-
+    <h2 class="_settings-legend">Theme:</h2>
     <div class="_settings-inputs">
       <label class="_settings-label">
-        <input type="checkbox" form="settings" name="dark" value="1"#{if settings.dark then ' checked' else ''}>Enable dark theme
+        <select form="settings" name="theme">
+          <option value=""#{if not settings.theme then ' selected' else ''}>automatic</option>
+          <option value="default"#{if settings.theme == 'default' then ' selected' else ''}>light</option>
+          <option value="dark"#{if settings.theme == 'dark' then ' selected' else ''}>dark</option>
+        </select>
       </label>
+    </div>
+  </div>
+
+  <div class="_settings-fieldset">
+    <h2 class="_settings-legend">General:</h2>
+
+    <div class="_settings-inputs">
       <label class="_settings-label _setting-max-width">
         <input type="checkbox" form="settings" name="layout" value="_max-width"#{if settings['_max-width'] then ' checked' else ''}>Enable fixed-width layout
       </label>
diff --git a/assets/javascripts/views/content/settings_page.coffee b/assets/javascripts/views/content/settings_page.coffee
index 9ca606c6..fd747438 100644
--- a/assets/javascripts/views/content/settings_page.coffee
+++ b/assets/javascripts/views/content/settings_page.coffee
@@ -11,7 +11,7 @@ class app.views.SettingsPage extends app.View
 
   currentSettings: ->
     settings = {}
-    settings.dark = app.settings.get('dark')
+    settings.theme = app.settings.get('theme')
     settings.smoothScroll = !app.settings.get('fastScroll')
     settings.arrowScroll = app.settings.get('arrowScroll')
     settings.autoInstall = app.settings.get('autoInstall')
@@ -22,8 +22,8 @@ class app.views.SettingsPage extends app.View
   getTitle: ->
     'Preferences'
 
-  toggleDark: (enable) ->
-    app.settings.set('dark', !!enable)
+  setTheme: (value) ->
+    app.settings.set('theme', value)
     return
 
   toggleLayout: (layout, enable) ->
@@ -74,8 +74,8 @@ class app.views.SettingsPage extends app.View
   onChange: (event) =>
     input = event.target
     switch input.name
-      when 'dark'
-        @toggleDark input.checked
+      when 'theme'
+        @setTheme input.value
       when 'layout'
         @toggleLayout input.value, input.checked
       when 'smoothScroll'

From 6d8a44369c32bd999647ac1f4f4c46c67a10e6c7 Mon Sep 17 00:00:00 2001
From: Jed Fox <git@twopointzero.us>
Date: Mon, 13 Jan 2020 16:17:23 -0500
Subject: [PATCH 2/4] Use dark-mode native UI elements in dark mode where
 supported

---
 assets/stylesheets/global/_base.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/assets/stylesheets/global/_base.scss b/assets/stylesheets/global/_base.scss
index b81d5a93..ec7be4f2 100644
--- a/assets/stylesheets/global/_base.scss
+++ b/assets/stylesheets/global/_base.scss
@@ -10,6 +10,13 @@ html {
   @import 'global/print';
 }
 
+html._theme-default {
+  color-scheme: light only;
+}
+html._theme-dark {
+  color-scheme: dark only;
+}
+
 body {
   height: 100%;
   margin: 0;

From e8b13596651100ebf5c016fd95687aa90d7fe0dc Mon Sep 17 00:00:00 2001
From: Jed Fox <git@twopointzero.us>
Date: Mon, 13 Jan 2020 16:20:11 -0500
Subject: [PATCH 3/4] Switch to radio buttons for theme picker, only allow auto
 setting where supported

---
 assets/javascripts/app/settings.coffee        | 14 +++++++++++--
 .../templates/pages/settings_tmpl.coffee      | 20 ++++++++++++-------
 .../views/content/settings_page.coffee        |  1 +
 assets/stylesheets/components/_settings.scss  | 10 ++++++++--
 4 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/assets/javascripts/app/settings.coffee b/assets/javascripts/app/settings.coffee
index bfe8ae73..99fd5d13 100644
--- a/assets/javascripts/app/settings.coffee
+++ b/assets/javascripts/app/settings.coffee
@@ -32,10 +32,16 @@ class app.Settings
     manualUpdate: false
     schema: 1
     analyticsConsent: false
+    theme: 'auto'
 
   constructor: ->
     @store = new CookiesStore
     @cache = {}
+    @autoSupported = window.matchMedia('(prefers-color-scheme)').media != 'not all'
+    if @autoSupported
+      @darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)')
+      @darkModeQuery.onchange = -> @setTheme(@get('theme'))
+
 
   get: (key) ->
     return @cache[key] if @cache.hasOwnProperty(key)
@@ -124,11 +130,15 @@ class app.Settings
     return
 
   setTheme: (theme) ->
-    if not theme
-      theme = if window.matchMedia('(prefers-color-scheme: dark)').matches then 'dark' else 'default'
+    if theme is 'auto'
+      theme = if @darkModeQuery.matches then 'dark' else 'default'
     classList = document.documentElement.classList
     classList.remove('_theme-default', '_theme-dark')
     classList.add('_theme-' + theme)
+    @updateColorMeta()
+    return
+
+  updateColorMeta: ->
     color = getComputedStyle(document.documentElement).getPropertyValue('--headerBackground').trim()
     $('meta[name=theme-color]').setAttribute('content', color)
     return
diff --git a/assets/javascripts/templates/pages/settings_tmpl.coffee b/assets/javascripts/templates/pages/settings_tmpl.coffee
index 07bfc65a..6d227069 100644
--- a/assets/javascripts/templates/pages/settings_tmpl.coffee
+++ b/assets/javascripts/templates/pages/settings_tmpl.coffee
@@ -1,16 +1,22 @@
+themeOption = ({ label, value }, settings) -> """
+  <label class="_settings-label _theme-label">
+    <input type="radio" name="theme" value="#{value}"#{if settings.theme == value then ' checked' else ''}>
+    #{label}
+  </label>
+"""
+
 app.templates.settingsPage = (settings) -> """
   <h1 class="_lined-heading">Preferences</h1>
 
   <div class="_settings-fieldset">
     <h2 class="_settings-legend">Theme:</h2>
     <div class="_settings-inputs">
-      <label class="_settings-label">
-        <select form="settings" name="theme">
-          <option value=""#{if not settings.theme then ' selected' else ''}>automatic</option>
-          <option value="default"#{if settings.theme == 'default' then ' selected' else ''}>light</option>
-          <option value="dark"#{if settings.theme == 'dark' then ' selected' else ''}>dark</option>
-        </select>
-      </label>
+      #{if settings.autoSupported
+          themeOption label: "Automatic <small>Matches system setting</small>", value: "auto", settings
+        else
+          ""}
+      #{themeOption label: "Light", value: "default", settings}
+      #{themeOption label: "Dark", value: "dark", settings}
     </div>
   </div>
 
diff --git a/assets/javascripts/views/content/settings_page.coffee b/assets/javascripts/views/content/settings_page.coffee
index fd747438..2db7c6bc 100644
--- a/assets/javascripts/views/content/settings_page.coffee
+++ b/assets/javascripts/views/content/settings_page.coffee
@@ -16,6 +16,7 @@ class app.views.SettingsPage extends app.View
     settings.arrowScroll = app.settings.get('arrowScroll')
     settings.autoInstall = app.settings.get('autoInstall')
     settings.analyticsConsent = app.settings.get('analyticsConsent')
+    settings.autoSupported = app.settings.autoSupported
     settings[layout] = app.settings.hasLayout(layout) for layout in app.settings.LAYOUTS
     settings
 
diff --git a/assets/stylesheets/components/_settings.scss b/assets/stylesheets/components/_settings.scss
index 86bbf005..807f5500 100644
--- a/assets/stylesheets/components/_settings.scss
+++ b/assets/stylesheets/components/_settings.scss
@@ -48,15 +48,21 @@
 }
 
 ._settings-label {
-  margin: 0 0 .375rem;
+  &:not(._theme-label) {
+    margin: 0 0 .375rem;
+  }
 
   > small {
     display: block;
     color: var(--textColorLight);
     margin-left: 1.75rem;
   }
+  &._theme-label > small {
+    display: inline-block;
+    margin-left: 0.75rem;
+  }
 
-  input[type=checkbox] {
+  input[type=checkbox], input[type=radio] {
     vertical-align: top;
     margin: .25rem .375rem;
   }

From cc406a8ea9fd27c49ae3646f1165134ace016b7b Mon Sep 17 00:00:00 2001
From: Jed Fox <git@twopointzero.us>
Date: Mon, 13 Jan 2020 16:26:26 -0500
Subject: [PATCH 4/4] Fix watching for theme change

---
 assets/javascripts/app/settings.coffee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/javascripts/app/settings.coffee b/assets/javascripts/app/settings.coffee
index 99fd5d13..90e1e951 100644
--- a/assets/javascripts/app/settings.coffee
+++ b/assets/javascripts/app/settings.coffee
@@ -40,7 +40,7 @@ class app.Settings
     @autoSupported = window.matchMedia('(prefers-color-scheme)').media != 'not all'
     if @autoSupported
       @darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)')
-      @darkModeQuery.onchange = -> @setTheme(@get('theme'))
+      @darkModeQuery.addListener => @setTheme(@get('theme'))
 
 
   get: (key) ->