From a2211fa4726336ab480cf0af7d32853edc40daa6 Mon Sep 17 00:00:00 2001
From: Bao Trinh <qubidt@gmail.com>
Date: Tue, 25 Jul 2023 19:03:05 -0500
Subject: Consolidate javascript and add comments

---
 data/style.scss | 21 +++++++++++--------
 src/renderer.rs | 64 ++++++++++++++++++++++++++-------------------------------
 2 files changed, 41 insertions(+), 44 deletions(-)

diff --git a/data/style.scss b/data/style.scss
index 909dc6f..6c0d284 100644
--- a/data/style.scss
+++ b/data/style.scss
@@ -199,15 +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);
-}
-
-body:not([data-theme]) nav .theme li[data-theme="default"] a {
-    @extend %active_theme_link;
-}
-
 p {
     margin: 0;
     padding: 0;
@@ -572,9 +563,21 @@ th span.active span {
     }
 }
 
+%active_theme_link {
+    font-weight: bold;
+    color: var(--switch_theme_active);
+}
+
+// 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;
+}
+
 @each $theme in $themes {
     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;
         }
diff --git a/src/renderer.rs b/src/renderer.rs
index 946089d..699a01f 100644
--- a/src/renderer.rs
+++ b/src/renderer.rs
@@ -57,28 +57,6 @@ pub fn page(
 
             body #drop-container
             {
-
-                (PreEscaped(r#"
-                    <script>
-                        // read theme from local storage and apply it to body
-                        const body = document.body;
-                        var theme = localStorage.getItem('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) {
-                            if (name && name != "default") {
-                                body.setAttribute("data-theme", name)
-                            } else {
-                                body.removeAttribute("data-theme")
-                            }
-
-                            localStorage.setItem('theme', name);
-                        }
-                    </script>
-                    "#))
-
                 div.toolbar_box_group {
                     @if conf.file_upload {
                         div.form {
@@ -604,6 +582,33 @@ fn page_header(title: &str, file_upload: bool, favicon_route: &str, 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>
@@ -672,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 && theme != "default") {
-                            body.setAttribute("data-theme", name)
-                        }
-                    </script>
-                    "#))
-
+            body
+            {
                 div.error {
                     p { (error_code.to_string()) }
                     @for error in error_description.lines() {
-- 
cgit v1.2.3