Improve theme support when JS is disabled

rust-lang · Oct 26, 2024 · 31cae14 · 31cae14
1 parent 684bb78
commit 31cae14
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 14 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,
+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 {
+body: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 {
+body: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/general.css b/src/theme/css/general.css
@@ -14,6 +14,10 @@ html {
     -webkit-text-size-adjust: none;
 }
 
+* {
+    color: var(--fg);
+}
+
 body {
     margin: 0;
     font-size: 1.6rem;

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, body:not(.js) {
     --bg: hsl(0, 0%, 100%);
     --fg: hsl(0, 0%, 0%);
 
@@ -258,7 +258,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-    .light.no-js {
+    body: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');
+            document.body.classList.add("js");
         </script>
 
         <input type="checkbox" id="sidebar-toggle-anchor" class="hidden">