Rollup merge of #61236 - GuillaumeGomez:system-theme, r=Mark-Simulacrum

take into account the system theme

Fixes #61079.

The CSS can now take into account the system theme. I used it to generate some content on the document and from there, if no theme has already been selected, it'll look at the system level theme.

r? @QuietMisdreavus
cc @fenhl

Author: Centril

src/librustdoc/html/render.rs

@@ -914,7 +914,7 @@ themePicker.onblur = handleThemeButtonsBlur;
     var but = document.createElement('button');
     but.innerHTML = item;
     but.onclick = function(el) {{
-        switchTheme(currentTheme, mainTheme, item);
+        switchTheme(currentTheme, mainTheme, item, true);
     }};
     but.onblur = handleThemeButtonsBlur;
     themes.appendChild(but);

src/librustdoc/html/static/rustdoc.css

@@ -54,6 +54,21 @@
 		  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 {

src/librustdoc/html/static/storage.js

@@ -86,7 +86,7 @@ function getCurrentValue(name) {
     return null;
 }
 
-function switchTheme(styleElem, mainStyleElem, newTheme) {
+function switchTheme(styleElem, mainStyleElem, newTheme, saveTheme) {
     var fullBasicCss = "rustdoc" + resourcesSuffix + ".css";
     var fullNewTheme = newTheme + resourcesSuffix + ".css";
     var newHref = mainStyleElem.href.replace(fullBasicCss, fullNewTheme);
@@ -109,8 +109,18 @@ function switchTheme(styleElem, mainStyleElem, newTheme) {
     });
     if (found === true) {
         styleElem.href = newHref;
-        updateLocalStorage("rustdoc-theme", newTheme);
+        // If this new value comes from a system setting or from the previously saved theme, no
+        // need to save it.
+        if (saveTheme === true) {
+            updateLocalStorage("rustdoc-theme", newTheme);
+        }
     }
 }
 
-switchTheme(currentTheme, mainTheme, getCurrentValue("rustdoc-theme") || "light");
+function getSystemValue() {
+    return getComputedStyle(document.documentElement).getPropertyValue('content');
+}
+
+switchTheme(currentTheme, mainTheme,
+            getCurrentValue("rustdoc-theme") || getSystemValue() || "light",
+            false);