Namespace docs.rs theme setting

gui-tests/theme.goml

@@ -0,0 +1,18 @@
+// setting local-storage emulates how we detect rustdoc changing the theme, we
+// only run this detection on rustdoc pages so must change there before visiting
+// other pages
+
+// on rustdoc pages we only control the .nav-container and its descendants, on
+// the crate page we control the whole page
+
+go-to: |DOC_PATH| + "/sysinfo"
+set-local-storage: { "rustdoc-theme": null }
+wait-for-css: (".nav-container", { "background-color": "rgb(255, 255, 255)" })
+go-to: |DOC_PATH| + "/crate/sysinfo"
+wait-for-css: ("body", { "background-color": "rgb(255, 255, 255)" })
+
+go-to: |DOC_PATH| + "/sysinfo"
+set-local-storage: { "rustdoc-theme": "ayu" }
+wait-for-css: (".nav-container", { "background-color": "rgb(15, 20, 25)" })
+go-to: |DOC_PATH| + "/crate/sysinfo"
+wait-for-css: ("body", { "background-color": "rgb(15, 20, 25)" })

templates/rustdoc/body.html

@@ -1,4 +1,4 @@
 <script async src="/-/static/menu.js?{{ docsrs_version() | slugify }}"></script>
 <script async src="/-/static/index.js?{{ docsrs_version() | slugify }}"></script>
 {# see comment in ../storage-change-detection.html for details #}
-<iframe loading="lazy" src="/-/storage-change-detection.html" width="0" height="0" style="display: none"></iframe>
+<iframe src="/-/storage-change-detection.html" width="0" height="0" style="display: none"></iframe>

templates/style/_syntax-themes.scss

@@ -17,10 +17,10 @@ html {
   --color-syntax-string: #718c00;
 }
 
-// To add a new theme, copy the above theme into a new `html[data-theme="name"]`
+// To add a new theme, copy the above theme into a new `html[data-docs-rs-theme="name"]`
 // block below and change the colors
 
-html[data-theme="dark"] {
+html[data-docs-rs-theme="dark"] {
   --color-syntax-foreground: inherit;
   --color-syntax-attribute: #ee6868;
   --color-syntax-background: #2a2a2a;
@@ -39,7 +39,7 @@ html[data-theme="dark"] {
   --color-syntax-string: #83a300;
 }
 
-html[data-theme="ayu"] {
+html[data-docs-rs-theme="ayu"] {
   --color-syntax-foreground: #e6e1cf;
   --color-syntax-attribute: #e6e1cf;
   --color-syntax-background: #191f26;

templates/style/_themes.scss

@@ -32,10 +32,10 @@ html {
   --chart-grid: #ddd;
 }
 
-// To add a new theme, copy the above theme into a new `html[data-theme="name"]`
+// To add a new theme, copy the above theme into a new `html[data-docs-rs-theme="name"]`
 // block below and change the colors
 
-html[data-theme="dark"] {
+html[data-docs-rs-theme="dark"] {
   color-scheme: dark;
   --color-background-code: #2a2a2a;
   --color-background: #353535;
@@ -68,7 +68,7 @@ html[data-theme="dark"] {
   --chart-grid: #4e4e4e;
 }
 
-html[data-theme="ayu"] {
+html[data-docs-rs-theme="ayu"] {
   color-scheme: dark;
   --color-background-code: #191f26;
   --color-background: #0f1419;

templates/theme.js

@@ -1,18 +1,22 @@
-function applyTheme(theme) {
-  document.documentElement.dataset.theme = theme;
-}
+(function() {
+    function applyTheme(theme) {
+        if (theme) {
+            document.documentElement.dataset.docsRsTheme = theme;
+        }
+    }
 
-window.addEventListener('storage', function (ev) {
-  if (ev.key === 'rustdoc-theme') {
-    applyTheme(ev.newValue);
-  }
-});
+    window.addEventListener('storage', function (ev) {
+        if (ev.key === 'rustdoc-theme') {
+            applyTheme(ev.newValue);
+        }
+    });
 
-// see ./storage-change-detection.html for details
-window.addEventListener('message', function (ev) {
-  if (ev.data && ev.data.storage && ev.data.storage.key === 'rustdoc-theme') {
-    applyTheme(ev.data.storage.value);
-  }
-});
+    // see ./storage-change-detection.html for details
+    window.addEventListener('message', function (ev) {
+        if (ev.data && ev.data.storage && ev.data.storage.key === 'rustdoc-theme') {
+            applyTheme(ev.data.storage.value);
+        }
+    });
 
-applyTheme(window.localStorage.getItem('rustdoc-theme'));
+    applyTheme(window.localStorage.getItem('rustdoc-theme'));
+})()