From 95ef91c573c7c49d620688e81ffe1c97fd22501c Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Thu, 23 Mar 2023 14:25:43 -0700
Subject: [PATCH] rustdoc: remove old `content` hack for theme switching

This is based on the compatibility data for `window.matchMedia` and
`MediaQueryList`'s `EventTarget` implementation.

https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#browser_compatibility

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia#browser_compatibility

  * EventTarget would require us to drop support for all Chrome
    versions before 39. However, we already require Chrome 49,
    because rustdoc requires [CSS variables].
  * EventTarget would also limit us to Firefox 55, but since #106502
    rustdoc only supports Firefox > 68.
  * EventTarget limits us to Mobile Safari version 14, but #102404
    shows that our CSS is broken in Safari versions before 15.5.

[CSS variables]: https://developer.mozilla.org/en-US/docs/Web/CSS/--*#browser_compatibility
---
 src/librustdoc/html/static/css/rustdoc.css | 15 ---------
 src/librustdoc/html/static/js/storage.js   | 37 +++-------------------
 2 files changed, 5 insertions(+), 47 deletions(-)

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 7e036626efc..933a44c5aa7 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -87,21 +87,6 @@
 	box-sizing: border-box;
 }
 
-/* This part handles the "default" theme being used depending on the system one. */
-html {
-	content: "";
-}
-@media (prefers-color-scheme: light) {
-	html {
-		content: "light";
-	}
-}
-@media (prefers-color-scheme: dark) {
-	html {
-		content: "dark";
-	}
-}
-
 /* General structure and fonts */
 
 body {
diff --git a/src/librustdoc/html/static/js/storage.js b/src/librustdoc/html/static/js/storage.js
index aa90d9f6be9..8d82b5b78ed 100644
--- a/src/librustdoc/html/static/js/storage.js
+++ b/src/librustdoc/html/static/js/storage.js
@@ -137,6 +137,9 @@ function switchTheme(newThemeName, saveTheme) {
 }
 
 const updateTheme = (function() {
+    // only listen to (prefers-color-scheme: dark) because light is the default
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+
     /**
      * Update the current theme to match whatever the current combination of
      * * the preference for using the system theme
@@ -156,7 +159,7 @@ const updateTheme = (function() {
             const lightTheme = getSettingValue("preferred-light-theme") || "light";
             const darkTheme = getSettingValue("preferred-dark-theme") || "dark";
 
-            if (isDarkMode()) {
+            if (mql.matches) {
                 use(darkTheme, true);
             } else {
                 // prefers a light theme, or has no preference
@@ -170,37 +173,7 @@ const updateTheme = (function() {
         }
     }
 
-    // This is always updated below to a function () => bool.
-    let isDarkMode;
-
-    // Determine the function for isDarkMode, and if we have
-    // `window.matchMedia`, set up an event listener on the preferred color
-    // scheme.
-    //
-    // Otherwise, fall back to the prefers-color-scheme value CSS captured in
-    // the "content" property.
-    if (window.matchMedia) {
-        // only listen to (prefers-color-scheme: dark) because light is the default
-        const mql = window.matchMedia("(prefers-color-scheme: dark)");
-
-        isDarkMode = () => mql.matches;
-
-        if (mql.addEventListener) {
-            mql.addEventListener("change", updateTheme);
-        } else {
-            // This is deprecated, see:
-            // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
-            mql.addListener(updateTheme);
-        }
-    } else {
-        // fallback to the CSS computed value
-        const cssContent = getComputedStyle(document.documentElement)
-            .getPropertyValue("content");
-        // (Note: the double-quotes come from that this is a CSS value, which
-        // might be a length, string, etc.)
-        const cssColorScheme = cssContent || "\"light\"";
-        isDarkMode = () => (cssColorScheme === "\"dark\"");
-    }
+    mql.addEventListener("change", updateTheme);
 
     return updateTheme;
 })();