Merge pull request #2454 from GuillaumeGomez/theme-noscript

Improve theme support when JS is disabled
rust-lang · Nov 2, 2024 · 5ec4f65 · 5ec4f65
2 parents 684bb78 + d93fbc0
commit 5ec4f65
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 18 deletions.
diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css
@@ -40,9 +40,9 @@ a > .hljs {
     border-block-end-style: solid;
 }
 #menu-bar.sticky,
-.js #menu-bar-hover-placeholder:hover + #menu-bar,
-.js #menu-bar:hover,
-.js.sidebar-visible #menu-bar {
+#menu-bar-hover-placeholder:hover + #menu-bar,
+#menu-bar:hover,
+html.sidebar-visible #menu-bar {
     position: -webkit-sticky;
     position: sticky;
     top: 0 !important;
@@ -91,7 +91,7 @@ a > .hljs {
     display: flex;
     margin: 0 5px;
 }
-.no-js .left-buttons button {
+html:not(.js) .left-buttons button {
     display: none;
 }
 
@@ -107,7 +107,7 @@ a > .hljs {
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.js .menu-title {
+.menu-title {
     cursor: pointer;
 }
 
@@ -427,8 +427,7 @@ ul#searchresults span.teaser em {
     -ms-user-select: none;
     user-select: none;
 }
-.no-js .sidebar,
-.js:not(.sidebar-resizing) .sidebar {
+html:not(.sidebar-resizing) .sidebar {
     transition: transform 0.3s; /* Animation: slide away */
 }
 .sidebar code {

diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css
@@ -112,7 +112,7 @@
     --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%);
 }
 
-.light {
+.light, html:not(.js) {
     --bg: hsl(0, 0%, 100%);
     --fg: hsl(0, 0%, 0%);
 
@@ -258,7 +258,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-    .light.no-js {
+    html:not(.js) {
         --bg: hsl(200, 7%, 8%);
         --fg: #98a3ad;
 
@@ -299,6 +299,8 @@
         --searchresults-li-bg: #2b2b2f;
         --search-mark-bg: #355c7d;
 
+        --color-scheme: dark;
+
         /* Same as `--icons` */
         --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%);
         /* Same as `--sidebar-active` */

diff --git a/src/theme/index.hbs b/src/theme/index.hbs
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html lang="{{ language }}" class="{{ default_theme }}" dir="{{ text_direction }}">
+<html lang="{{ language }}" class="{{ default_theme }} sidebar-visible" dir="{{ text_direction }}">
     <head>
         <!-- Book generated using mdBook -->
         <meta charset="UTF-8">
@@ -53,7 +53,7 @@
         <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
         {{/if}}
     </head>
-    <body class="sidebar-visible no-js">
+    <body>
     <div id="body-container">
         <!-- Provide site root to javascript -->
         <script>
@@ -82,19 +82,16 @@
             var theme;
             try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
             if (theme === null || theme === undefined) { theme = default_theme; }
-            var html = document.querySelector('html');
+            const html = document.documentElement;
             html.classList.remove('{{ default_theme }}')
             html.classList.add(theme);
-            var body = document.querySelector('body');
-            body.classList.remove('no-js')
-            body.classList.add('js');
+            html.classList.add("js");
         </script>
 
         <input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
 
         <!-- Hide / unhide sidebar before it is displayed -->
         <script>
-            var body = document.querySelector('body');
             var sidebar = null;
             var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
             if (document.body.clientWidth >= 1080) {
@@ -104,8 +101,8 @@
                 sidebar = 'hidden';
             }
             sidebar_toggle.checked = sidebar === 'visible';
-            body.classList.remove('sidebar-visible');
-            body.classList.add("sidebar-" + sidebar);
+            html.classList.remove('sidebar-visible');
+            html.classList.add("sidebar-" + sidebar);
         </script>
 
         <nav id="sidebar" class="sidebar" aria-label="Table of contents">