Add support for prefers-color-scheme media query

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.remove('_theme-default', '_theme-dark')
-    classList.toggle('_theme-dark', enable)
+    classList.add('_theme-' + theme)
     color = getComputedStyle(document.documentElement).getPropertyValue('--headerBackground').trim()
     $('meta[name=theme-color]').setAttribute('content', color)
     return

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>

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) ->
+  setTheme: (value) ->
-    app.settings.set('dark', !!enable)
+    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'
+      when 'theme'
-        @toggleDark input.checked
+        @setTheme input.value
       when 'layout'
         @toggleLayout input.value, input.checked
       when 'smoothScroll'