Merge pull request #1169 from baod-rate/css

simplify theme selection using data attributes

11 files changed, 323 insertions, 321 deletions

diff --git a/Cargo.lock b/Cargo.lock
index a7620fb..6ebf6ce 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1099,7 +1099,9 @@ version = "0.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7746cd9bf09f9bb7d98638774a70642000356f543898d9a352cd043f82744528"
 dependencies = [
+ "clap",
  "grass_compiler",
+ "include_sass",
 ]
 
 [[package]]
@@ -1113,6 +1115,7 @@ dependencies = [
  "lasso",
  "once_cell",
  "phf",
+ "rand",
 ]
 
 [[package]]
@@ -1329,6 +1332,17 @@ dependencies = [
 ]
 
 [[package]]
+name = "include_sass"
+version = "0.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a09c0170cacc99c494307c6482e81653a8fb767c605ee7cf8febd53d9e72ed6"
+dependencies = [
+ "grass_compiler",
+ "quote",
+ "syn 1.0.109",
+]
+
+[[package]]
 name = "indexmap"
 version = "1.9.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
diff --git a/Cargo.toml b/Cargo.toml
index ecc5583..8f89ed5 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -35,6 +35,7 @@ colored = "2"
 comrak = { version = "0.18", default-features = false }
 fast_qr = { version = "0.9", features = ["svg"] }
 futures = "0.3"
+grass = { version = "0.13", features = ["macro"] }
 hex = "0.4"
 http = "0.2"
 httparse = "1"
@@ -80,6 +81,3 @@ url = "2"
 [target.'cfg(not(windows))'.dev-dependencies]
 # fake_tty does not support Windows for now
 fake-tty = "0.3.1"
-
-[build-dependencies]
-grass = { version = "0.13", default-features = false }
diff --git a/build.rs b/build.rs
deleted file mode 100644
index e65b294..0000000
--- a/build.rs
+++ /dev/null
@@ -1,19 +0,0 @@
-use std::env;
-use std::fs;
-use std::path::Path;
-
-fn main() {
-    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(),
-        )
-        .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 10c258d..6c0d284 100644
--- a/data/style.scss
+++ b/data/style.scss
@@ -1,22 +1,11 @@
-@use "sass:selector";
+@use "themes/archlinux" with ($generate_default: false);
+@use "themes/monokai" with ($generate_default: false);
+@use "themes/squirrel" with ($generate_default: false);
+@use "themes/zenburn" with ($generate_default: false);
 
 // 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 {
-        $s: selector.append($s, unquote(":not(.theme_#{$t})"));
-    }
-
-    @return $s;
-}
-
 html {
     font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
@@ -210,21 +199,6 @@ nav .theme li a:hover {
     color: var(--change_theme_link_color_hover);
 }
 
-%active_theme_link {
-    font-weight: bold;
-    color: var(--switch_theme_active);
-}
-
-@each $theme in $themes {
-    body.theme_#{$theme} nav .theme li.theme_#{$theme} a {
-        @extend %active_theme_link;
-    }
-}
-
-#{body_not_themed()} nav .theme li.theme_default a {
-    @extend %active_theme_link;
-}
-
 p {
     margin: 0;
     padding: 0;
@@ -567,211 +541,21 @@ th span.active span {
     }
 }
 
-
-
-@mixin theme_squirrel {
-    --background: #ffffff;
-    --text_color: #323232;
-    --directory_link_color: #d02474;
-    --directory_link_color_visited: #9b1985;
-    --file_link_color: #0086b3;
-    --file_link_color_visited: #974ec2;
-    --symlink_color: #ADD8E6;
-    --table_background: #ffffff;
-    --table_text_color: #323232;
-    --table_header_background: #323232;
-    --table_header_text_color: #f5f5f5;
-    --table_header_active_color: #ffffff;
-    --active_row_color: #f6f8fa;
-    --odd_row_background: #fbfbfb;
-    --even_row_background: #f2f2f2;
-    --root_link_color: #323232;
-    --download_button_background: #d02474;
-    --download_button_background_hover: #f52d8a;
-    --download_button_link_color: #ffffff;
-    --download_button_link_color_hover: #ffffff;
-    --back_button_background: #d02474;
-    --back_button_background_hover: #d02474;
-    --back_button_link_color: #ffffff;
-    --back_button_link_color_hover: #ffffff;
-    --date_text_color: #797979;
-    --at_color: #797979;
-    --switch_theme_background: #323232;
-    --switch_theme_link_color: #f5f5f5;
-    --switch_theme_active: #d02474;
-    --switch_theme_border: #49483e;
-    --change_theme_link_color: #f5f5f5;
-    --change_theme_link_color_hover: #f5f5f5;
-    --upload_text_color: #323232;
-    --upload_form_border_color: #d2d2d2;
-    --upload_form_background: #f2f2f2;
-    --upload_button_background: #d02474;
-    --upload_button_text_color: #ffffff;
-    --drag_background: #3333338f;
-    --drag_border_color: #ffffff;
-    --drag_text_color: #ffffff;
-    --size_background_color: #323232;
-    --size_text_color: #ffffff;
-    --error_color: #d02424;
-    --footer_color: #898989;
-}
-
-@mixin theme_archlinux {
-    --background: #383c4a;
-    --text_color: #fefefe;
-    --directory_link_color: #03a9f4;
-    --directory_link_color_visited: #0388f4;
-    --file_link_color: #ea95ff;
-    --file_link_color_visited: #a595ff;
-    --symlink_color: #66d9ef;
-    --table_background: #353946;
-    --table_text_color: #eeeeee;
-    --table_header_background: #5294e2;
-    --table_header_text_color: #eeeeee;
-    --table_header_active_color: #ffffff;
-    --active_row_color: #5194e259;
-    --odd_row_background: #404552;
-    --even_row_background: #4b5162;
-    --root_link_color: #abb2bb;
-    --download_button_background: #ea95ff;
-    --download_button_background_hover: #eea7ff;
-    --download_button_link_color: #ffffff;
-    --download_button_link_color_hover: #ffffff;
-    --back_button_background: #ea95ff;
-    --back_button_background_hover: #ea95ff;
-    --back_button_link_color: #ffffff;
-    --back_button_link_color_hover: #ffffff;
-    --date_text_color: #9ebbdc;
-    --at_color: #9ebbdc;
-    --switch_theme_background: #4b5162;
-    --switch_theme_link_color: #fefefe;
-    --switch_theme_active: #ea95ff;
-    --switch_theme_border: #6a728a;
-    --change_theme_link_color: #fefefe;
-    --change_theme_link_color_hover: #fefefe;
-    --upload_text_color: #fefefe;
-    --upload_form_border_color: #353946;
-    --upload_form_background: #4b5162;
-    --upload_button_background: #ea95ff;
-    --upload_button_text_color: #ffffff;
-    --drag_background: #3333338f;
-    --drag_border_color: #fefefe;
-    --drag_text_color: #fefefe;
-    --size_background_color: #5294e2;
-    --size_text_color: #fefefe;
-    --error_color: #e44b4b;
-    --footer_color: #8eabcc;
-}
-
-@mixin theme_zenburn {
-    --background: #3f3f3f;
-    --text_color: #efefef;
-    --directory_link_color: #f0dfaf;
-    --directory_link_color_visited: #ebc390;
-    --file_link_color: #87d6d5;
-    --file_link_color_visited: #a7b9ec;
-    --symlink_color: #11a8cd;
-    --table_background: #4a4949;
-    --table_text_color: #efefef;
-    --table_header_background: #7f9f7f;
-    --table_header_text_color: #efefef;
-    --table_header_active_color: #efef8f;
-    --active_row_color: #7e9f7f9c;
-    --odd_row_background: #777777;
-    --even_row_background: #5a5a5a;
-    --root_link_color: #dca3a3;
-    --download_button_background: #cc9393;
-    --download_button_background_hover: #dca3a3;
-    --download_button_link_color: #efefef;
-    --download_button_link_color_hover: #efefef;
-    --back_button_background: #cc9393;
-    --back_button_background_hover: #cc9393;
-    --back_button_link_color: #efefef;
-    --back_button_link_color_hover: #efefef;
-    --date_text_color: #cfbfaf;
-    --at_color: #cfbfaf;
-    --switch_theme_background: #4a4949;
-    --switch_theme_link_color: #efefef;
-    --switch_theme_active: #efef8f;
-    --switch_theme_border: #5a5a5a;
-    --change_theme_link_color: #efefef;
-    --change_theme_link_color_hover: #efefef;
-    --upload_text_color: #efefef;
-    --upload_form_border_color: #4a4949;
-    --upload_form_background: #777777;
-    --upload_button_background: #cc9393;
-    --upload_button_text_color: #efefef;
-    --drag_background: #3333338f;
-    --drag_border_color: #efefef;
-    --drag_text_color: #efefef;
-    --size_background_color: #7f9f7f;
-    --size_text_color: #efefef;
-    --error_color: #d06565;
-    --footer_color: #bfaf9f;
-}
-
-@mixin theme_monokai {
-    --background: #272822;
-    --text_color: #f8f8f2;
-    --directory_link_color: #f92672;
-    --directory_link_color_visited: #bc39a7;
-    --file_link_color: #a6e22e;
-    --file_link_color_visited: #4cb936;
-    --symlink_color: #29b8db;
-    --table_background: #3b3a32;
-    --table_text_color: #f8f8f0;
-    --table_header_background: #75715e;
-    --table_header_text_color: #f8f8f2;
-    --table_header_active_color: #e6db74;
-    --active_row_color: #ae81fe3d;
-    --odd_row_background: #3e3d32;
-    --even_row_background: #49483e;
-    --root_link_color: #66d9ef;
-    --download_button_background: #ae81ff;
-    --download_button_background_hover: #c6a6ff;
-    --download_button_link_color: #f8f8f0;
-    --download_button_link_color_hover: #f8f8f0;
-    --back_button_background: #ae81ff;
-    --back_button_background_hover: #ae81ff;
-    --back_button_link_color: #f8f8f0;
-    --back_button_link_color_hover: #f8f8f0;
-    --date_text_color: #66d9ef;
-    --at_color: #66d9ef;
-    --switch_theme_background: #3b3a32;
-    --switch_theme_link_color: #f8f8f2;
-    --switch_theme_active: #a6e22e;
-    --switch_theme_border: #49483e;
-    --change_theme_link_color: #f8f8f2;
-    --change_theme_link_color_hover: #f8f8f2;
-    --upload_text_color: #f8f8f2;
-    --upload_form_border_color: #3b3a32;
-    --upload_form_background: #49483e;
-    --upload_button_background: #ae81ff;
-    --upload_button_text_color: #f8f8f0;
-    --drag_background: #3333338f;
-    --drag_border_color: #f8f8f2;
-    --drag_text_color: #f8f8f2;
-    --size_background_color: #75715e;
-    --size_text_color: #f8f8f2;
-    --error_color: #d02929;
-    --footer_color: #56c9df;
-}
-
 @mixin theme($name) {
     @if $name == squirrel {
-        @include theme_squirrel();
+        @include squirrel.theme();
     }
 
     @else if $name == archlinux {
-        @include theme_archlinux();
+        @include archlinux.theme();
     }
 
     @else if $name == monokai {
-        @include theme_monokai();
+        @include monokai.theme();
     }
 
     @else if $name == zenburn {
-        @include theme_zenburn();
+        @include zenburn.theme();
     }
 
     @else {
@@ -779,39 +563,23 @@ 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);
-    }
-
-    body.theme_#{$theme} {
-        @extend %theme_#{$theme};
-    }
+%active_theme_link {
+    font-weight: bold;
+    color: var(--switch_theme_active);
+}
 
-    #{body_not_themed()}.default_theme_#{$theme} {
-        @extend %theme_#{$theme};
-    }
+// when no specific theme is applied, highlight the `default` theme button in
+// the theme menu
+body:not([data-theme]) nav .theme li[data-theme="default"] a {
+    @extend %active_theme_link;
 }
 
-// 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);
+    body[data-theme="#{$theme}"] {
+        @include theme($theme);
+        // highlight the currently active theme in the theme selection menu
+        nav .theme li[data-theme="#{$theme}"] a {
+            @extend %active_theme_link;
         }
     }
-
-    // this extension will still end up inside the media query,
-    // because that is where %theme_dark_* was defined
-    #{body_not_themed()}.default_theme_dark_#{$theme} {
-        @extend %theme_dark_#{$theme};
-    }
 }
diff --git a/data/themes/archlinux.scss b/data/themes/archlinux.scss
new file mode 100644
index 0000000..f95b8bb
--- /dev/null
+++ b/data/themes/archlinux.scss
@@ -0,0 +1,54 @@
+$generate_default: true !default;
+
+@mixin theme {
+  --background: #383c4a;
+  --text_color: #fefefe;
+  --directory_link_color: #03a9f4;
+  --directory_link_color_visited: #0388f4;
+  --file_link_color: #ea95ff;
+  --file_link_color_visited: #a595ff;
+  --symlink_color: #66d9ef;
+  --table_background: #353946;
+  --table_text_color: #eeeeee;
+  --table_header_background: #5294e2;
+  --table_header_text_color: #eeeeee;
+  --table_header_active_color: #ffffff;
+  --active_row_color: #5194e259;
+  --odd_row_background: #404552;
+  --even_row_background: #4b5162;
+  --root_link_color: #abb2bb;
+  --download_button_background: #ea95ff;
+  --download_button_background_hover: #eea7ff;
+  --download_button_link_color: #ffffff;
+  --download_button_link_color_hover: #ffffff;
+  --back_button_background: #ea95ff;
+  --back_button_background_hover: #ea95ff;
+  --back_button_link_color: #ffffff;
+  --back_button_link_color_hover: #ffffff;
+  --date_text_color: #9ebbdc;
+  --at_color: #9ebbdc;
+  --switch_theme_background: #4b5162;
+  --switch_theme_link_color: #fefefe;
+  --switch_theme_active: #ea95ff;
+  --switch_theme_border: #6a728a;
+  --change_theme_link_color: #fefefe;
+  --change_theme_link_color_hover: #fefefe;
+  --upload_text_color: #fefefe;
+  --upload_form_border_color: #353946;
+  --upload_form_background: #4b5162;
+  --upload_button_background: #ea95ff;
+  --upload_button_text_color: #ffffff;
+  --drag_background: #3333338f;
+  --drag_border_color: #fefefe;
+  --drag_text_color: #fefefe;
+  --size_background_color: #5294e2;
+  --size_text_color: #fefefe;
+  --error_color: #e44b4b;
+  --footer_color: #8eabcc;
+};
+
+@if $generate_default {
+  body {
+    @include theme;
+  }
+}
diff --git a/data/themes/monokai.scss b/data/themes/monokai.scss
new file mode 100644
index 0000000..4a47794
--- /dev/null
+++ b/data/themes/monokai.scss
@@ -0,0 +1,54 @@
+$generate_default: true !default;
+
+@mixin theme {
+  --background: #272822;
+  --text_color: #f8f8f2;
+  --directory_link_color: #f92672;
+  --directory_link_color_visited: #bc39a7;
+  --file_link_color: #a6e22e;
+  --file_link_color_visited: #4cb936;
+  --symlink_color: #29b8db;
+  --table_background: #3b3a32;
+  --table_text_color: #f8f8f0;
+  --table_header_background: #75715e;
+  --table_header_text_color: #f8f8f2;
+  --table_header_active_color: #e6db74;
+  --active_row_color: #ae81fe3d;
+  --odd_row_background: #3e3d32;
+  --even_row_background: #49483e;
+  --root_link_color: #66d9ef;
+  --download_button_background: #ae81ff;
+  --download_button_background_hover: #c6a6ff;
+  --download_button_link_color: #f8f8f0;
+  --download_button_link_color_hover: #f8f8f0;
+  --back_button_background: #ae81ff;
+  --back_button_background_hover: #ae81ff;
+  --back_button_link_color: #f8f8f0;
+  --back_button_link_color_hover: #f8f8f0;
+  --date_text_color: #66d9ef;
+  --at_color: #66d9ef;
+  --switch_theme_background: #3b3a32;
+  --switch_theme_link_color: #f8f8f2;
+  --switch_theme_active: #a6e22e;
+  --switch_theme_border: #49483e;
+  --change_theme_link_color: #f8f8f2;
+  --change_theme_link_color_hover: #f8f8f2;
+  --upload_text_color: #f8f8f2;
+  --upload_form_border_color: #3b3a32;
+  --upload_form_background: #49483e;
+  --upload_button_background: #ae81ff;
+  --upload_button_text_color: #f8f8f0;
+  --drag_background: #3333338f;
+  --drag_border_color: #f8f8f2;
+  --drag_text_color: #f8f8f2;
+  --size_background_color: #75715e;
+  --size_text_color: #f8f8f2;
+  --error_color: #d02929;
+  --footer_color: #56c9df;
+};
+
+@if $generate_default {
+  body {
+    @include theme;
+  }
+}
diff --git a/data/themes/squirrel.scss b/data/themes/squirrel.scss
new file mode 100644
index 0000000..9eb572e
--- /dev/null
+++ b/data/themes/squirrel.scss
@@ -0,0 +1,54 @@
+$generate_default: true !default;
+
+@mixin theme {
+  --background: #ffffff;
+  --text_color: #323232;
+  --directory_link_color: #d02474;
+  --directory_link_color_visited: #9b1985;
+  --file_link_color: #0086b3;
+  --file_link_color_visited: #974ec2;
+  --symlink_color: #ADD8E6;
+  --table_background: #ffffff;
+  --table_text_color: #323232;
+  --table_header_background: #323232;
+  --table_header_text_color: #f5f5f5;
+  --table_header_active_color: #ffffff;
+  --active_row_color: #f6f8fa;
+  --odd_row_background: #fbfbfb;
+  --even_row_background: #f2f2f2;
+  --root_link_color: #323232;
+  --download_button_background: #d02474;
+  --download_button_background_hover: #f52d8a;
+  --download_button_link_color: #ffffff;
+  --download_button_link_color_hover: #ffffff;
+  --back_button_background: #d02474;
+  --back_button_background_hover: #d02474;
+  --back_button_link_color: #ffffff;
+  --back_button_link_color_hover: #ffffff;
+  --date_text_color: #797979;
+  --at_color: #797979;
+  --switch_theme_background: #323232;
+  --switch_theme_link_color: #f5f5f5;
+  --switch_theme_active: #d02474;
+  --switch_theme_border: #49483e;
+  --change_theme_link_color: #f5f5f5;
+  --change_theme_link_color_hover: #f5f5f5;
+  --upload_text_color: #323232;
+  --upload_form_border_color: #d2d2d2;
+  --upload_form_background: #f2f2f2;
+  --upload_button_background: #d02474;
+  --upload_button_text_color: #ffffff;
+  --drag_background: #3333338f;
+  --drag_border_color: #ffffff;
+  --drag_text_color: #ffffff;
+  --size_background_color: #323232;
+  --size_text_color: #ffffff;
+  --error_color: #d02424;
+  --footer_color: #898989;
+};
+
+@if $generate_default {
+  body {
+    @include theme;
+  }
+}
diff --git a/data/themes/zenburn.scss b/data/themes/zenburn.scss
new file mode 100644
index 0000000..9eb4d11
--- /dev/null
+++ b/data/themes/zenburn.scss
@@ -0,0 +1,54 @@
+$generate_default: true !default;
+
+@mixin theme {
+  --background: #3f3f3f;
+  --text_color: #efefef;
+  --directory_link_color: #f0dfaf;
+  --directory_link_color_visited: #ebc390;
+  --file_link_color: #87d6d5;
+  --file_link_color_visited: #a7b9ec;
+  --symlink_color: #11a8cd;
+  --table_background: #4a4949;
+  --table_text_color: #efefef;
+  --table_header_background: #7f9f7f;
+  --table_header_text_color: #efefef;
+  --table_header_active_color: #efef8f;
+  --active_row_color: #7e9f7f9c;
+  --odd_row_background: #777777;
+  --even_row_background: #5a5a5a;
+  --root_link_color: #dca3a3;
+  --download_button_background: #cc9393;
+  --download_button_background_hover: #dca3a3;
+  --download_button_link_color: #efefef;
+  --download_button_link_color_hover: #efefef;
+  --back_button_background: #cc9393;
+  --back_button_background_hover: #cc9393;
+  --back_button_link_color: #efefef;
+  --back_button_link_color_hover: #efefef;
+  --date_text_color: #cfbfaf;
+  --at_color: #cfbfaf;
+  --switch_theme_background: #4a4949;
+  --switch_theme_link_color: #efefef;
+  --switch_theme_active: #efef8f;
+  --switch_theme_border: #5a5a5a;
+  --change_theme_link_color: #efefef;
+  --change_theme_link_color_hover: #efefef;
+  --upload_text_color: #efefef;
+  --upload_form_border_color: #4a4949;
+  --upload_form_background: #777777;
+  --upload_button_background: #cc9393;
+  --upload_button_text_color: #efefef;
+  --drag_background: #3333338f;
+  --drag_border_color: #efefef;
+  --drag_text_color: #efefef;
+  --size_background_color: #7f9f7f;
+  --size_text_color: #efefef;
+  --error_color: #d06565;
+  --footer_color: #bfaf9f;
+};
+
+@if $generate_default {
+  body {
+    @include theme;
+  }
+}
diff --git a/src/errors.rs b/src/errors.rs
index e502634..6875b90 100644
--- a/src/errors.rs
+++ b/src/errors.rs
@@ -5,6 +5,7 @@ use actix_web::{
     HttpRequest, HttpResponse, ResponseError,
 };
 use futures::prelude::*;
+use std::str::FromStr;
 use thiserror::Error;
 
 use crate::{renderer::render_error, MiniserveConfig};
@@ -131,8 +132,15 @@ where
         let res = fut.await?.map_into_boxed_body();
 
         if (res.status().is_client_error() || res.status().is_server_error())
-            && res.headers().get(header::CONTENT_TYPE).map(AsRef::as_ref)
-                == Some(mime::TEXT_PLAIN_UTF_8.essence_str().as_bytes())
+            && res
+                .headers()
+                .get(header::CONTENT_TYPE)
+                .map(AsRef::as_ref)
+                .and_then(|s| std::str::from_utf8(s).ok())
+                .and_then(|s| mime::Mime::from_str(s).ok())
+                .as_ref()
+                .map(mime::Mime::essence_str)
+                == Some(mime::TEXT_PLAIN.as_ref())
         {
             let req = res.request().clone();
             Ok(res.map_body(|head, body| map_error_page(&req, head, body)))
diff --git a/src/main.rs b/src/main.rs
index 2f81baa..851f9ab 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -28,6 +28,8 @@ mod renderer;
 use crate::config::MiniserveConfig;
 use crate::errors::ContextualError;
 
+static STYLESHEET: &str = grass::include!("data/style.scss");
+
 fn main() -> Result<()> {
     let args = args::CliArgs::parse();
 
@@ -181,10 +183,20 @@ async fn run(miniserve_config: MiniserveConfig) -> Result<(), ContextualError> {
         .map(|sock| sock.to_string().green().bold().to_string())
         .collect::<Vec<_>>();
 
+    let stylesheet = web::Data::new(
+        [
+            STYLESHEET,
+            inside_config.default_color_scheme.css(),
+            inside_config.default_color_scheme_dark.css_dark().as_str(),
+        ]
+        .join("\n"),
+    );
+
     let srv = actix_web::HttpServer::new(move || {
         App::new()
             .wrap(configure_header(&inside_config.clone()))
             .app_data(inside_config.clone())
+            .app_data(stylesheet.clone())
             .wrap_fn(errors::error_page_middleware)
             .wrap(middleware::Logger::default())
             .route(&inside_config.favicon_route, web::get().to(favicon))
@@ -345,9 +357,8 @@ async fn favicon() -> impl Responder {
         .body(logo)
 }
 
-async fn css() -> impl Responder {
-    let css = include_str!(concat!(env!("OUT_DIR"), "/style.css"));
+async fn css(stylesheet: web::Data<String>) -> impl Responder {
     HttpResponse::Ok()
         .insert_header(ContentType(mime::TEXT_CSS))
-        .body(css)
+        .body(stylesheet.to_string())
 }
diff --git a/src/renderer.rs b/src/renderer.rs
index 1257a67..699a01f 100644
--- a/src/renderer.rs
+++ b/src/renderer.rs
@@ -56,33 +56,7 @@ pub fn page(
             (page_header(&title_path, conf.file_upload, &conf.favicon_route, &conf.css_route))
 
             body #drop-container
-                .(format!("default_theme_{}", conf.default_color_scheme))
-                .(format!("default_theme_dark_{}", conf.default_color_scheme_dark)) {
-
-                (PreEscaped(r#"
-                    <script>
-                        // read theme from local storage and apply it to body
-                        const body = document.body;
-                        var theme = localStorage.getItem('theme');
-
-                        if (theme != null && theme != 'default') {
-                            body.classList.add('theme_' + theme);
-                        }
-
-                        // updates the color scheme by replacing the appropriate class
-                        // on body and saving the new theme to local storage
-                        function updateColorScheme(name) {
-                            body.classList.remove.apply(body.classList, Array.from(body.classList).filter(v=>v.startsWith("theme_")));
-
-                            if (name != "default") {
-                                body.classList.add('theme_' + name);
-                            }
-
-                            localStorage.setItem('theme', name);
-                        }
-                    </script>
-                    "#))
-
+            {
                 div.toolbar_box_group {
                     @if conf.file_upload {
                         div.form {
@@ -348,6 +322,21 @@ pub enum ThemeSlug {
     Monokai,
 }
 
+impl ThemeSlug {
+    pub fn css(&self) -> &str {
+        match self {
+            ThemeSlug::Squirrel => grass::include!("data/themes/squirrel.scss"),
+            ThemeSlug::Archlinux => grass::include!("data/themes/archlinux.scss"),
+            ThemeSlug::Zenburn => grass::include!("data/themes/zenburn.scss"),
+            ThemeSlug::Monokai => grass::include!("data/themes/monokai.scss"),
+        }
+    }
+
+    pub fn css_dark(&self) -> String {
+        format!("@media (prefers-color-scheme: dark) {{\n{}}}", self.css())
+    }
+}
+
 /// Partial: qr code spoiler
 fn qr_spoiler(show_qrcode: bool, content: &Uri) -> Markup {
     html! {
@@ -377,7 +366,7 @@ fn color_scheme_selector(hide_theme_selector: bool) -> Markup {
                 }
                 ul.theme {
                     @for color_scheme in THEME_PICKER_CHOICES {
-                        li.(format!("theme_{}", color_scheme.1)) {
+                        li data-theme=(color_scheme.1) {
                             (color_scheme_link(color_scheme))
                         }
                     }
@@ -586,12 +575,40 @@ fn page_header(title: &str, file_upload: bool, favicon_route: &str, css_route: &
             meta charset="utf-8";
             meta http-equiv="X-UA-Compatible" content="IE=edge";
             meta name="viewport" content="width=device-width, initial-scale=1";
+            meta name="color-scheme" content="dark light";
 
             link rel="icon" type="image/svg+xml" href={ (favicon_route) };
             link rel="stylesheet" href={ (css_route) };
 
             title { (title) }
 
+            (PreEscaped(r#"
+                <script>
+                    // updates the color scheme by setting the theme data attribute
+                    // on body and saving the new theme to local storage
+                    function updateColorScheme(name) {
+                        if (name && name != "default") {
+                            localStorage.setItem('theme', name);
+                            document.body.setAttribute("data-theme", name)
+                        } else {
+                            localStorage.removeItem('theme');
+                            document.body.removeAttribute("data-theme")
+                        }
+                    }
+
+                    // read theme from local storage and apply it to body
+                    function loadColorScheme() {
+                        var name = localStorage.getItem('theme');
+                        updateColorScheme(name);
+                    }
+
+                    // load saved theme on page load
+                    addEventListener("load", loadColorScheme);
+                    // load saved theme when local storage is changed (synchronize between tabs)
+                    addEventListener("storage", loadColorScheme);
+                </script>
+            "#))
+
             @if file_upload {
                 (PreEscaped(r#"
                 <script>
@@ -660,19 +677,8 @@ pub fn render_error(
         html {
             (page_header(&error_code.to_string(), false, &conf.favicon_route, &conf.css_route))
 
-            body.(format!("default_theme_{}", conf.default_color_scheme))
-                .(format!("default_theme_dark_{}", conf.default_color_scheme_dark)) {
-
-                (PreEscaped(r#"
-                    <script>
-                        // read theme from local storage and apply it to body
-                        var theme = localStorage.getItem('theme');
-                        if (theme != null && theme != 'default') {
-                            document.body.classList.add('theme_' + theme);
-                        }
-                    </script>
-                    "#))
-
+            body
+            {
                 div.error {
                     p { (error_code.to_string()) }
                     @for error in error_description.lines() {