Merge theme selector into the settings page.

ui/components/Settings.vue

@@ -9,13 +9,32 @@
           </span>
         </header>
         <div class="card-content">
+          <div class="field">
+            <label class="label" for="random_bg">Color scheme</label>
+            <div class="control">
+              <label for="auto" class="radio">
+                <input id="auto" type="radio" v-model="selectedTheme" value="auto">
+                System Default
+              </label>
+              <label for="light" class="radio">
+                <input id="light" type="radio" v-model="selectedTheme" value="light">
+                Light
+              </label>
+              <label for="dark" class="radio">
+                <input id="dark" type="radio" v-model="selectedTheme" value="dark">
+                Dark
+              </label>
+            </div>
+            <p class="help">Select the color scheme for the WebUI.</p>
+          </div>
+
           <div class="field">
             <label class="label" for="random_bg">Backgrounds</label>
             <div class="control">
               <input id="random_bg" type="checkbox" class="switch is-success" v-model="bg_enable">
               <label for="random_bg" class="is-unselectable">&nbsp;Enable</label>
-              <p class="help">Use random background image from your media backends.</p>
             </div>
+            <p class="help">Use random background image from your media backends.</p>
           </div>
 
           <div class="field">
@@ -25,8 +44,8 @@
             <div class="control">
               <input id="random_bg_opacity" style="width: 100%" type="range" v-model="bg_opacity" min="0.50" max="1.00"
                 step="0.05">
-              <p class="help">How visible the background image should be.</p>
             </div>
+            <p class="help">How visible the background image should be.</p>
           </div>
 
           <div class="field" v-if="bg_enable">
@@ -41,10 +60,9 @@
                   <span>Reload</span>
                 </span>
               </button>
-              <p class="help">Change the displayed picture.</p>
             </div>
+            <p class="help">Change the displayed picture.</p>
           </div>
-
         </div>
       </div>
     </div>
@@ -65,5 +83,6 @@ defineProps({
 
 const bg_enable = useStorage('random_bg', true)
 const bg_opacity = useStorage('random_bg_opacity', 0.85)
+const selectedTheme = useStorage('theme', 'auto')
 
 </script>

ui/layouts/default.vue

@@ -59,21 +59,6 @@
           </NuxtLink>
         </div>
 
-        <div class="navbar-item">
-          <button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to Light theme'"
-            v-if="'auto' == selectedTheme" @click="selectTheme('light')">
-            <span class="icon has-text-warning"><i class="fas fa-sun" /></span>
-          </button>
-          <button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to Dark theme'"
-            v-if="'light' == selectedTheme" @click="selectTheme('dark')">
-            <span class="icon"><i class="fas fa-moon" /></span>
-          </button>
-          <button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to auto theme'"
-            v-if="'dark' == selectedTheme" @click="selectTheme('auto')">
-            <span class="icon"><i class="fas fa-microchip" /></span>
-          </button>
-        </div>
-
         <div class="navbar-item is-hidden-mobile">
           <button class="button is-dark" @click="reloadPage">
             <span class="icon"><i class="fas fa-refresh"></i></span>
@@ -191,6 +176,10 @@ watch(() => config.app.sentry_dsn, dsn => {
 onMounted(async () => {
   try {
     await handleImage(bg_enable.value)
+  } catch (e) {
+  }
+
+  try {
     applyPreferredColorScheme(selectedTheme.value)
   } catch (e) {
   }
@@ -204,13 +193,6 @@ watch(selectedTheme, value => {
 
 const reloadPage = () => window.location.reload()
 
-const selectTheme = theme => {
-  selectedTheme.value = theme
-  if ('auto' === theme) {
-    return reloadPage()
-  }
-}
-
 watch(bg_enable, async v => await handleImage(v))
 watch(bg_opacity, v => {
   if (false === bg_enable.value) {