Improve theme support when JS is disabled

GuillaumeGomez · GuillaumeGomez · commit edcf05e4cbe9 · 2024-10-23T21:59:13.000+02:00
diff --git a/src/book/init.rs b/src/book/init.rs
@@ -136,6 +136,9 @@ impl BookBuilder {
         let mut chrome_css = File::create(cssdir.join("chrome.css"))?;
         chrome_css.write_all(theme::CHROME_CSS)?;
 
+        let mut noscript_css = File::create(cssdir.join("noscript.css"))?;
+        noscript_css.write_all(theme::NOSCRIPT_CSS)?;
+
         if html_config.print.enable {
             let mut print_css = File::create(cssdir.join("print.css"))?;
             print_css.write_all(theme::PRINT_CSS)?;
diff --git a/src/renderer/html_handlebars/hbs_renderer.rs b/src/renderer/html_handlebars/hbs_renderer.rs
@@ -243,6 +243,7 @@ impl HtmlHandlebars {
         write_file(destination, "book.js", &theme.js)?;
         write_file(destination, "css/general.css", &theme.general_css)?;
         write_file(destination, "css/chrome.css", &theme.chrome_css)?;
+        write_file(destination, "css/noscript.css", &theme.noscript_css)?;
         if html_config.print.enable {
             write_file(destination, "css/print.css", &theme.print_css)?;
         }
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,9 +91,6 @@ a > .hljs {
     display: flex;
     margin: 0 5px;
 }
-.no-js .left-buttons button {
-    display: none;
-}
 
 .menu-title {
     display: inline-block;
@@ -107,7 +104,7 @@ a > .hljs {
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.js .menu-title {
+.menu-title {
     cursor: pointer;
 }
 
@@ -427,8 +424,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 +461,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/noscript.css b/src/theme/css/noscript.css
@@ -0,0 +1,7 @@
+.left-buttons button {
+    display: none;
+}
+
+.sidebar {
+    transition: transform 0.3s; /* Animation: slide away */
+}
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
@@ -52,8 +52,11 @@
         <!-- MathJax -->
         <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
         {{/if}}
+        <noscript>
+            <link rel="stylesheet" href="{{ path_to_root }}css/noscript.css">
+        </noscript>
     </head>
-    <body class="sidebar-visible no-js">
+    <body class="sidebar-visible">
     <div id="body-container">
         <!-- Provide site root to javascript -->
         <script>
@@ -85,9 +88,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">
diff --git a/src/theme/mod.rs b/src/theme/mod.rs
@@ -18,6 +18,7 @@ pub static HEAD: &[u8] = include_bytes!("head.hbs");
 pub static REDIRECT: &[u8] = include_bytes!("redirect.hbs");
 pub static HEADER: &[u8] = include_bytes!("header.hbs");
 pub static CHROME_CSS: &[u8] = include_bytes!("css/chrome.css");
+pub static NOSCRIPT_CSS: &[u8] = include_bytes!("css/noscript.css");
 pub static GENERAL_CSS: &[u8] = include_bytes!("css/general.css");
 pub static PRINT_CSS: &[u8] = include_bytes!("css/print.css");
 pub static VARIABLES_CSS: &[u8] = include_bytes!("css/variables.css");
@@ -51,6 +52,7 @@ pub struct Theme {
     pub redirect: Vec<u8>,
     pub header: Vec<u8>,
     pub chrome_css: Vec<u8>,
+    pub noscript_css: Vec<u8>,
     pub general_css: Vec<u8>,
     pub print_css: Vec<u8>,
     pub variables_css: Vec<u8>,
@@ -87,6 +89,7 @@ impl Theme {
                 (theme_dir.join("header.hbs"), &mut theme.header),
                 (theme_dir.join("book.js"), &mut theme.js),
                 (theme_dir.join("css/chrome.css"), &mut theme.chrome_css),
+                (theme_dir.join("css/noscript.css"), &mut theme.noscript_css),
                 (theme_dir.join("css/general.css"), &mut theme.general_css),
                 (theme_dir.join("css/print.css"), &mut theme.print_css),
                 (
@@ -175,6 +178,7 @@ impl Default for Theme {
             redirect: REDIRECT.to_owned(),
             header: HEADER.to_owned(),
             chrome_css: CHROME_CSS.to_owned(),
+            noscript_css: NOSCRIPT_CSS.to_owned(),
             general_css: GENERAL_CSS.to_owned(),
             print_css: PRINT_CSS.to_owned(),
             variables_css: VARIABLES_CSS.to_owned(),
@@ -235,6 +239,7 @@ mod tests {
             "favicon.png",
             "favicon.svg",
             "css/chrome.css",
+            "css/noscript.css",
             "css/general.css",
             "css/print.css",
             "css/variables.css",
@@ -264,6 +269,7 @@ mod tests {
             redirect: Vec::new(),
             header: Vec::new(),
             chrome_css: Vec::new(),
+            noscript_css: Vec::new(),
             general_css: Vec::new(),
             print_css: Vec::new(),
             variables_css: Vec::new(),
diff --git a/tests/init.rs b/tests/init.rs
@@ -116,6 +116,7 @@ fn copy_theme() {
         "book.js",
         "css/chrome.css",
         "css/general.css",
+        "css/noscript.css",
         "css/print.css",
         "css/variables.css",
         "favicon.png",

Original file line number	Diff line number	Diff line change
`@@ -243,6 +243,7 @@ impl HtmlHandlebars {`
`243`	`243`	`write_file(destination, "book.js", &theme.js)?;`
`244`	`244`	`write_file(destination, "css/general.css", &theme.general_css)?;`
`245`	`245`	`write_file(destination, "css/chrome.css", &theme.chrome_css)?;`
	`246`	`+ write_file(destination, "css/noscript.css", &theme.noscript_css)?;`
`246`	`247`	`if html_config.print.enable {`
`247`	`248`	`write_file(destination, "css/print.css", &theme.print_css)?;`
`248`	`249`	`}`