improve fallback behavior more

Author: literalpie

.node/tsconfig.json

@@ -1,6 +1,6 @@
 {
     "files": ["../Assets/ts/theme-switching.ts"],
     "compilerOptions": {
-        "outFile": "../Resources/all.js"
+        "outFile": "../Sources/swift-doc/Resources/all.js"
     }
 }

Assets/css/all.css

@@ -471,6 +471,10 @@ select {
     outline: 0;
     z-index: 9;
   }
+
+  & option {
+    color: #3c3c43;
+  }
 }
 
 input[type="file"] {

Assets/ts/theme-switching.ts

@@ -76,10 +76,15 @@ function updateDropdownLabel(systemTheme: "light" | "dark") {
 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 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);
     }
+    // If the browser does not support css properties, we do not allow theme switching.
+    const customProperty = getComputedStyle(document.body).getPropertyValue("--body");
+    if (!customProperty) {
+        (document.querySelector(".theme-select-container") as HTMLDivElement).style.display = 'none';
+    }
 }

Resources/all.js

@@ -62,18 +62,22 @@ 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 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);
     }
+    // If the browser does not support css properties, we do not allow theme switching.
+    var customProperty = getComputedStyle(document.body).getPropertyValue("--body");
+    if (!customProperty) {
+        document.querySelector(".theme-select-container").style.display = 'none';
+    }
 }

Resources/all.min.css

@@ -150,7 +150,7 @@ func fetchRemoteJS() throws -> Data {
   // When using Swift Package Manager versions that don't support bundled resources, just hide the theme select drop-down.
   let fallbackJS = """
   var hideThemeSelect = function() {
-    document.querySelector(".theme-select-container").hidden = true;
+    document.querySelector(".theme-select-container").style.display = "none";
   }
   // hiding the element in `requestAnimationFrame` causes the function to be called after the element exists, 
   // but fast enough that the element does not flash on the screen.