2 files changed, 39 insertions, 16 deletions

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..946089d 100644
--- a/src/renderer.rs
+++ b/src/renderer.rs
@@ -56,26 +56,22 @@ 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);
-                        }
+                        updateColorScheme(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);
+                            if (name && name != "default") {
+                                body.setAttribute("data-theme", name)
+                            } else {
+                                body.removeAttribute("data-theme")
                             }
 
                             localStorage.setItem('theme', name);
@@ -348,6 +344,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 +388,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,6 +597,7 @@ 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) };
@@ -667,8 +679,8 @@ pub fn render_error(
                     <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);
+                        if (theme && theme != "default") {
+                            body.setAttribute("data-theme", name)
                         }
                     </script>
                     "#))