Dark mode: fix initial state and set default to sync with computer

app/assets/javascripts/app/controllers/_plugin/theme.coffee

@@ -5,6 +5,10 @@ class App.Theme extends App.Controller
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', @onMediaQueryChange)
     @controllerBind('ui:theme:set', @set)
     @controllerBind('ui:theme:toggle-dark-mode', @toggleDarkMode)
+    @set(
+      theme: App.Session.get('preferences').theme
+      source: 'self'
+    )
 
   onMediaQueryChange: (event) =>
     if App.Session.get('preferences').theme == 'auto'
@@ -15,17 +19,19 @@ class App.Theme extends App.Controller
       theme: if document.documentElement.dataset.theme == 'dark' then 'light' else 'dark'
 
   set: (data) ->
-    localStorage.setItem('theme', data.theme)
-    App.Ajax.request(
-      id:          'preferences'
-      type:        'PUT'
-      url:         "#{App.Config.get('api_path')}/users/preferences"
-      data:        JSON.stringify(theme: data.theme)
-      processData: true
-    )
     detectedTheme = data.theme
     if data.theme == 'auto'
       detectedTheme = if window.matchMedia('(prefers-color-scheme: dark)').matches then 'dark' else 'light'
+    return if data.theme == App.Session.get('preferences').theme && detectedTheme == document.documentElement.dataset.theme
+    localStorage.setItem('theme', data.theme)
+    if data.source != 'self'
+      App.Ajax.request(
+        id:          'preferences'
+        type:        'PUT'
+        url:         "#{App.Config.get('api_path')}/users/preferences"
+        data:        JSON.stringify(theme: data.theme)
+        processData: true
+      )
     document.documentElement.dataset.theme = detectedTheme
     App.Event.trigger('ui:theme:changed', { theme: data.theme, detectedTheme: detectedTheme, source: data.source })
 

app/assets/javascripts/app/controllers/_profile/appearance.coffee

@@ -9,14 +9,14 @@ class ProfileAppearance extends App.ControllerSubContent
     @render()
     @controllerBind('ui:theme:changed', @onUpdate)
 
-  render: ->
+  render: (theme) ->
     @html App.view('profile/appearance')(
-      theme: localStorage.getItem('theme') || App.Session.get('preferences').theme || 'light'
+      theme: theme || App.Session.get('preferences').theme || 'auto'
     )
 
   onUpdate: (event) =>
     if event.source != 'profile_appearance'
-      @render()
+      @render event.detectedTheme
 
   updateTheme: (event) ->
     App.Event.trigger('ui:theme:set', { theme: event.target.value, source: 'profile_appearance' })