Merge pull request #2007 from 0xh3xa/bugfix/invalid-theme-option

Load the user's preferred color scheme if the URL contains an invalid theme

Author: a3957273

src/web/waiters/OptionsWaiter.mjs

@@ -160,18 +160,33 @@ class OptionsWaiter {
 
         // Update theme selection
         const themeSelect = document.getElementById("theme");
-        themeSelect.selectedIndex = themeSelect.querySelector(`option[value="${theme}"`).index;
+        let themeOption = themeSelect.querySelector(`option[value="${theme}"]`);
+
+        if (!themeOption) {
+            const preferredColorScheme = this.getPreferredColorScheme();
+            document.querySelector(":root").className = preferredColorScheme;
+            themeOption = themeSelect.querySelector(`option[value="${preferredColorScheme}"]`);
+        }
+
+        themeSelect.selectedIndex = themeOption.index;
     }
 
     /**
      * Applies the user's preferred color scheme using the `prefers-color-scheme` media query.
      */
     applyPreferredColorScheme() {
-        const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
-        const theme = prefersDarkScheme ? "dark" : "classic";
+        const theme = this.getPreferredColorScheme();
         this.changeTheme(theme);
     }
 
+    /**
+     * Get the user's preferred color scheme using the `prefers-color-scheme` media query.
+     */
+    getPreferredColorScheme() {
+        const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        return prefersDarkScheme ? "dark" : "classic";
+    }
+
     /**
      * Changes the console logging level.
      *