Improve theme support when JS is disabled

GuillaumeGomez · GuillaumeGomez · commit 4b5480e78bf8 · 2024-10-28T17:03:08.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,
+body.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 {
@@ -465,7 +464,7 @@ ul#searchresults span.teaser em {
     left: calc(var(--sidebar-resize-indicator-width) * -1);
     right: unset;
 }
-.js .sidebar .sidebar-resize-handle {
+.sidebar .sidebar-resize-handle {
     cursor: col-resize;
     width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
 }
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
@@ -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 class="sidebar-visible">
     <div id="body-container">
         <!-- Provide site root to javascript -->
         <script>
@@ -85,9 +85,7 @@
             var html = document.querySelector('html');
             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">

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`	`+body.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 {`
`@@ -465,7 +464,7 @@ ul#searchresults span.teaser em {`
`465`	`464`	`left: calc(var(--sidebar-resize-indicator-width) * -1);`
`466`	`465`	`right: unset;`
`467`	`466`	`}`
`468`		`-.js .sidebar .sidebar-resize-handle {`
	`467`	`+.sidebar .sidebar-resize-handle {`
`469`	`468`	`cursor: col-resize;`
`470`	`469`	`width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));`
`471`	`470`	`}`