simplify theme selection using data attributes

2 files changed, 29 insertions, 46 deletions

diff --git a/data/style.scss b/data/style.scss
index 10c258d..36793e3 100644
--- a/data/style.scss
+++ b/data/style.scss
@@ -215,16 +215,16 @@ nav .theme li a:hover {
     color: var(--switch_theme_active);
 }
 
+body:not([data-theme]) nav .theme li[data-theme="default"] a {
+    @extend %active_theme_link;
+}
+
 @each $theme in $themes {
-    body.theme_#{$theme} nav .theme li.theme_#{$theme} a {
+    body[data-theme="#{$theme}"] nav .theme li[data-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;
@@ -779,39 +779,23 @@ th span.active span {
     }
 }
 
+body:not([data-theme]) {
+    @include theme_squirrel();
+}
+
+@media (prefers-color-scheme: dark) {
+    body:not([data-theme]) {
+        @include theme_monokai();
+    }
+}
+
 // 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} {
+    body[data-theme="#{$theme}"] {
         @include theme($theme);
     }
-
-    body.theme_#{$theme} {
-        @extend %theme_#{$theme};
-    }
-
-    #{body_not_themed()}.default_theme_#{$theme} {
-        @extend %theme_#{$theme};
-    }
-}
-
-// 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);
-        }
-    }
-
-    // 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};
-    }
-}
+}
\ No newline at end of file
diff --git a/src/renderer.rs b/src/renderer.rs
index 1257a67..2e1ff2e 100644
--- a/src/renderer.rs
+++ b/src/renderer.rs
@@ -56,26 +56,24 @@ 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)) {
+                // .(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);
@@ -377,7 +375,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 +584,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 +666,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>
                     "#))