Improve theme support when JS is disabled

GuillaumeGomez · GuillaumeGomez · commit d93fbc0f6b17 · 2024-10-29T16:20:41.000+01:00
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">

Original file line number	Diff line number	Diff line change
`@@ -40,9 +40,9 @@ a > .hljs {`
`40`	`40`	`border-block-end-style: solid;`
`41`	`41`	`}`
`42`	`42`	`#menu-bar.sticky,`
`43`		`-.js #menu-bar-hover-placeholder:hover + #menu-bar,`
`44`		`-.js #menu-bar:hover,`
`45`		`-.js.sidebar-visible #menu-bar {`
	`43`	`+#menu-bar-hover-placeholder:hover + #menu-bar,`
	`44`	`+#menu-bar:hover,`
	`45`	`+html.sidebar-visible #menu-bar {`
`46`	`46`	`position: -webkit-sticky;`
`47`	`47`	`position: sticky;`
`48`	`48`	`top: 0 !important;`
`@@ -91,7 +91,7 @@ a > .hljs {`
`91`	`91`	`display: flex;`
`92`	`92`	`margin: 0 5px;`
`93`	`93`	`}`
`94`		`-.no-js .left-buttons button {`
	`94`	`+html:not(.js) .left-buttons button {`
`95`	`95`	`display: none;`
`96`	`96`	`}`
`97`	`97`
`@@ -107,7 +107,7 @@ a > .hljs {`
`107`	`107`	`overflow: hidden;`
`108`	`108`	`text-overflow: ellipsis;`
`109`	`109`	`}`
`110`		`-.js .menu-title {`
	`110`	`+.menu-title {`
`111`	`111`	`cursor: pointer;`
`112`	`112`	`}`
`113`	`113`
`@@ -427,8 +427,7 @@ ul#searchresults span.teaser em {`
`427`	`427`	`-ms-user-select: none;`
`428`	`428`	`user-select: none;`
`429`	`429`	`}`
`430`		`-.no-js .sidebar,`
`431`		`-.js:not(.sidebar-resizing) .sidebar {`
	`430`	`+html:not(.sidebar-resizing) .sidebar {`
`432`	`431`	`transition: transform 0.3s; /* Animation: slide away */`
`433`	`432`	`}`
`434`	`433`	`.sidebar code {`