From f6453245edd4bb6a3bd5bd0374044ec689629241 Mon Sep 17 00:00:00 2001
From: Bao Trinh <qubidt@gmail.com>
Date: Tue, 11 Jul 2023 14:37:58 -0500
Subject: simplify theme selection using data attributes

---
 src/renderer.rs | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

(limited to 'src/renderer.rs')

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>
                     "#))
-- 
cgit v1.2.3


From b369a1a9ff3c60b67a7598d4486253c428e3a4da Mon Sep 17 00:00:00 2001
From: Bao Trinh <qubidt@gmail.com>
Date: Wed, 12 Jul 2023 12:46:51 -0500
Subject: Separate color schemes into separate files

---
 src/renderer.rs | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

(limited to 'src/renderer.rs')

diff --git a/src/renderer.rs b/src/renderer.rs
index 2e1ff2e..2de95c8 100644
--- a/src/renderer.rs
+++ b/src/renderer.rs
@@ -346,6 +346,21 @@ pub enum ThemeSlug {
     Monokai,
 }
 
+impl ThemeSlug {
+    pub fn css(&self) -> &str {
+        match self {
+            ThemeSlug::Squirrel => include_str!(concat!(env!("OUT_DIR"), "/theme-squirrel.css")),
+            ThemeSlug::Archlinux => include_str!(concat!(env!("OUT_DIR"), "/theme-archlinux.css")),
+            ThemeSlug::Zenburn => include_str!(concat!(env!("OUT_DIR"), "/theme-zenburn.css")),
+            ThemeSlug::Monokai => include_str!(concat!(env!("OUT_DIR"), "/theme-monokai.css")),
+        }
+    }
+
+    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! {
-- 
cgit v1.2.3


From 142cd6e26011fcdb208e24dce7c4781ad5e812d4 Mon Sep 17 00:00:00 2001
From: Bao Trinh <qubidt@gmail.com>
Date: Thu, 20 Jul 2023 08:52:25 -0500
Subject: remove commented code

---
 src/renderer.rs | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src/renderer.rs')

diff --git a/src/renderer.rs b/src/renderer.rs
index 2de95c8..29418da 100644
--- a/src/renderer.rs
+++ b/src/renderer.rs
@@ -56,8 +56,6 @@ 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#"
-- 
cgit v1.2.3


From e84ca11eab6636904a42636455ea2cbe239fd1f4 Mon Sep 17 00:00:00 2001
From: Bao Trinh <qubidt@gmail.com>
Date: Thu, 20 Jul 2023 19:14:15 -0500
Subject: use grass include macro; remove build.rs

---
 src/renderer.rs | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/renderer.rs')

diff --git a/src/renderer.rs b/src/renderer.rs
index 29418da..946089d 100644
--- a/src/renderer.rs
+++ b/src/renderer.rs
@@ -347,10 +347,10 @@ pub enum ThemeSlug {
 impl ThemeSlug {
     pub fn css(&self) -> &str {
         match self {
-            ThemeSlug::Squirrel => include_str!(concat!(env!("OUT_DIR"), "/theme-squirrel.css")),
-            ThemeSlug::Archlinux => include_str!(concat!(env!("OUT_DIR"), "/theme-archlinux.css")),
-            ThemeSlug::Zenburn => include_str!(concat!(env!("OUT_DIR"), "/theme-zenburn.css")),
-            ThemeSlug::Monokai => include_str!(concat!(env!("OUT_DIR"), "/theme-monokai.css")),
+            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"),
         }
     }
 
-- 
cgit v1.2.3


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

---
 src/renderer.rs | 64 ++++++++++++++++++++++++++-------------------------------
 1 file changed, 29 insertions(+), 35 deletions(-)

(limited to 'src/renderer.rs')

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