Hide auto theming option in unsupported browsers

Author: literalpie

Assets/ts/theme-switching.ts

@@ -15,7 +15,7 @@ window.addEventListener("load", () => {
         setPickedTheme(newValue as ThemeChoice);
     });
 
-    themeQuery.addEventListener("change", (systemThemeChangeEvent) => {
+    themeQuery.addEventListener?.("change", (systemThemeChangeEvent) => {
         const systemTheme = systemThemeChangeEvent.matches ? "dark" : "light";
         updateDropdownLabel(systemTheme);
         if (autoTheme) {
@@ -24,6 +24,7 @@ window.addEventListener("load", () => {
     })
 
     setInitialTheme(themeSwitcher);
+    checkThemingSupport();
 })
 
 /**
@@ -67,3 +68,18 @@ function setPickedTheme(newTheme: ThemeChoice) {
 function updateDropdownLabel(systemTheme: "light" | "dark") {
     window.document.getElementById('theme-option-auto').innerText = `Auto (${systemTheme})`;
 }
+
+/**
+ * Checks whether color-scheme is a supported feature of the browser. 
+ * If it is not, removes the auto option from the dropdown.
+ */
+function checkThemingSupport() {
+    const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const lightQuery = window.matchMedia('(prefers-color-scheme: light)');
+    // If neither query matches, we know that the browser doesn't support theming
+    if (!darkQuery.matches && !lightQuery.matches) {
+        const themeOptionAuto = window.document.getElementById('theme-option-auto');
+        // IE doesn't support element.remove()
+        themeOptionAuto.parentNode.removeChild(themeOptionAuto);
+    }
+}

Resources/all.js

@@ -1,24 +1,26 @@
 var _a;
 var themeQuery = window.matchMedia('(prefers-color-scheme: dark)');
 var localStorageKey = "picked-theme";
-var autoTheme = false; // hello
+var autoTheme = false;
 // load initial theme before load event to prevent flashing of background color on navigation
 var initialTheme = (_a = window.localStorage.getItem(localStorageKey)) !== null && _a !== void 0 ? _a : "auto";
 setPickedTheme(initialTheme);
 window.addEventListener("load", function () {
+    var _a;
     var themeSwitcher = window.document.getElementById("theme-switcher");
     themeSwitcher.addEventListener("change", function (themePickedEvent) {
         var newValue = themePickedEvent.target.value;
         setPickedTheme(newValue);
     });
-    themeQuery.addEventListener("change", function (systemThemeChangeEvent) {
+    (_a = themeQuery.addEventListener) === null || _a === void 0 ? void 0 : _a.call(themeQuery, "change", function (systemThemeChangeEvent) {
         var systemTheme = systemThemeChangeEvent.matches ? "dark" : "light";
         updateDropdownLabel(systemTheme);
         if (autoTheme) {
             applyTheme(systemTheme);
         }
     });
     setInitialTheme(themeSwitcher);
+    checkThemingSupport();
 });
 /**
  * Sets the correct theme based on what's in storage, and updates the theme switcher dropdown with the correct initial value.
@@ -60,3 +62,18 @@ function setPickedTheme(newTheme) {
 function updateDropdownLabel(systemTheme) {
     window.document.getElementById('theme-option-auto').innerText = "Auto (" + systemTheme + ")";
 }
+
+/**
+ * Checks whether color-scheme is a supported feature of the browser.
+ * If it is not, removes the auto option from the dropdown.
+ */
+function checkThemingSupport() {
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    var lightQuery = window.matchMedia('(prefers-color-scheme: light)');
+    // If neither query matches, we know that the browser doesn't support theming
+    if (!darkQuery.matches && !lightQuery.matches) {
+        var themeOptionAuto = window.document.getElementById('theme-option-auto');
+        // IE doesn't support element.remove()
+        themeOptionAuto.parentNode.removeChild(themeOptionAuto);
+    }
+}