Switch to radio buttons for theme picker, only allow auto setting where supported

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

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>
 

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
 

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;
   }