address feedback

3 files changed, 31 insertions, 12 deletions

diff --git a/build.rs b/build.rs
index 3ac300a..a386b41 100644
--- a/build.rs
+++ b/build.rs
@@ -3,16 +3,15 @@ use std::fs;
 use std::path::Path;
 
 fn main() {
-    let out_dir = env::var_os("OUT_DIR").unwrap();
+    let out_dir = env::var_os("OUT_DIR").expect("out dir env var missing");
     let dest_path = Path::new(&out_dir).join("style.css");
     fs::write(
         &dest_path,
         grass::from_string(
             include_str!("data/style.scss").to_string(),
             &grass::Options::default(),
-        )
-        .unwrap(),
-    )
-    .unwrap();
+        ).expect("scss failed to compile"),
+    ).expect("failed to write css file");
+
     println!("cargo:rerun-if-changed=data/style.scss");
 }
diff --git a/data/style.scss b/data/style.scss
index 0871632..95bc56f 100644
--- a/data/style.scss
+++ b/data/style.scss
@@ -1,8 +1,12 @@
 @use "sass:selector";
 
-/* theme colors can be found at the bottom */
+// theme colors can be found at the bottom
 $themes: squirrel, archlinux, monokai, zenburn;
 
+// This returns a selector that matches body when no theme class is set,
+// in which case the default light/dark mode themes should be used.
+// The result of this function can be used with #{...} interpolation
+// in a selector list.
 @function body_not_themed() {
     $s: unquote("body");
     @each $t in $themes {
@@ -517,6 +521,7 @@ th span.active span {
 }
 
 
+
 @mixin theme_squirrel {
     --background: #ffffff;
     --text_color: #323232;
@@ -694,6 +699,12 @@ th span.active span {
 }
 
 
+
+// For each of the themes, define a placeholder selector containing
+// the themes variables. Then add selectors for body when the theme:
+// - has explicitly been activated by .theme_*
+// - is set as default theme by .default_theme_* and no other theme is active
+// to the placeholder selector list by means of @extend.
 @each $theme in $themes {
     %theme_#{$theme} { @include theme_#{$theme}; }
 
@@ -704,10 +715,10 @@ th span.active span {
     }
 }
 
-// this needs to be in a separate loop below the first,
-// because dark mode doesn't add to specificity, so
-// the dark defaults need to come after the light defaults
-// to override them
+// Do the same thing again for the dark mode default.
+// Since the media query doesn't affect specificity, all dark mode
+// defaults need to come after all light mode defaults to override
+// them when dark mode is enabled.
 @each $theme in $themes {
     @media (prefers-color-scheme: dark) {
         %theme_dark_#{$theme} { @include theme_#{$theme}; }
diff --git a/src/renderer.rs b/src/renderer.rs
index 61e382e..8b3f922 100644
--- a/src/renderer.rs
+++ b/src/renderer.rs
@@ -39,7 +39,12 @@ pub fn page(
         (DOCTYPE)
         html {
             (page_header(&title_path, file_upload, favicon_route, css_route))
-            body#drop-container.(format!("default_theme_{}", default_color_scheme)).(format!("default_theme_dark_{}", default_color_scheme_dark)) {
+
+            body#drop-container
+                // Add classes to body selecting default light and dark theme
+                .(format!("default_theme_{}", default_color_scheme))
+                .(format!("default_theme_dark_{}", default_color_scheme_dark)) {
+
                 (PreEscaped(r#"
                     <script>
                         const body = document.body;
@@ -469,7 +474,11 @@ pub fn render_error(
         (DOCTYPE)
         html {
             (page_header(&error_code.to_string(), false, favicon_route, css_route))
-            body.(format!("default_theme_{}", default_color_scheme)).(format!("default_theme_dark_{}", default_color_scheme_dark)) {
+
+            // Add classes to body selecting default light and dark theme
+            body.(format!("default_theme_{}", default_color_scheme))
+                .(format!("default_theme_dark_{}", default_color_scheme_dark)) {
+
                 div.error {
                     p { (error_code.to_string()) }
                     @for error in error_description.lines() {