Add automated detection of the current rustdoc theme

Nemo157 · Nemo157 · commit 1e8e96904bbb · 2020-10-15T20:14:04.000+02:00
diff --git a/static/storage-change-detection.html b/static/storage-change-detection.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <script type="text/javascript">
+            onstorage = function(ev) {
+                parent.postMessage({
+                    storage: {
+                        key: ev.key,
+                        value: ev.newValue,
+                    }
+                })
+            }
+        </script>
+    </head>
+</html>
diff --git a/templates/base.html b/templates/base.html
@@ -21,6 +21,8 @@
         <link rel="search" href="/-/static/opensearch.xml" type="application/opensearchdescription+xml" title="Docs.rs" />
 
         <title>{%- block title -%} Docs.rs {%- endblock title -%}</title>
+
+        <script type="text/javascript">{%- include "theme.js" -%}</script>
     </head>
 
     <body>
diff --git a/templates/rustdoc/body.html b/templates/rustdoc/body.html
@@ -29,4 +29,16 @@
       window.addEventListener("scroll", maybeFixupViewPortPosition, {"once": true});
     }
   }
+
+  window.addEventListener('message', function (ev) {
+    if (ev.data && ev.data.storage && ev.data.storage.key === 'rustdoc-theme') {
+      applyTheme(ev.data.storage.value);
+    }
+  });
 </script>
+<!--
+    Only other windows get notified when we change local storage, so we have an
+    invisible iframe that sends us a message when local storage changes so we
+    can detect rustdoc changing the theme
+-->
+<iframe src="/-/static/storage-change-detection.html" width="0" height="0" style="display: none"></iframe>
diff --git a/templates/rustdoc/head.html b/templates/rustdoc/head.html
@@ -2,3 +2,5 @@
         <link rel="stylesheet" href="/-/static/style.css?{{ docsrs_version() | slugify }}" type="text/css" media="all" />
 
         <link rel="search" href="/-/static/opensearch.xml" type="application/opensearchdescription+xml" title="Docs.rs" />
+
+        <script type="text/javascript">{%- include "theme.js" -%}</script>
diff --git a/templates/style/_themes.scss b/templates/style/_themes.scss
@@ -1,5 +1,5 @@
 // Standard white theme
-body {
+html {
   --color-background-code: #f5f5f5;
   --color-background: #fff;
   --color-border-light: lighten(#ddd, 5%);
@@ -20,3 +20,6 @@ body {
   --color-warn-hover: darken(#e57300, 10%);
   --color-warn: #e57300;
 }
+
+// To add a new theme, copy the above theme into a new `html[data-theme="name"]`
+// block below and change the colors
diff --git a/templates/theme.js b/templates/theme.js
@@ -0,0 +1,7 @@
+// This is a global function also called from a script in ./rustdoc/body.html
+// which detects when the rustdoc theme is changed
+function applyTheme(theme) {
+  document.documentElement.dataset.theme = theme;
+}
+
+applyTheme(window.localStorage.getItem('rustdoc-theme'));
