From 351b17d1d9391887ca316902d4809c19044c29bb Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Mon, 17 Oct 2022 22:22:27 -0700
Subject: [PATCH 1/4] added a theme dropdown box

---
 ui/index.html     |  1 +
 ui/media/main.css | 18 +++++++-----------
 ui/media/main.js  | 48 ++++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 599abb8e..454a8355 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -34,6 +34,7 @@
                     <ul id="system-settings-entries">
                         <li><b class="settings-subheader">System Settings</b></li>
                         <br/>
+                        <li><label for="theme">Theme: </label><select id="theme" name="theme"><option value="theme-default">Default</option></select></li>
                         <li><input id="save_to_disk" name="save_to_disk" type="checkbox"> <label for="save_to_disk">Automatically save to <input id="diskPath" name="diskPath" size="40" disabled></label></li>
                         <li><input id="sound_toggle" name="sound_toggle" type="checkbox" checked> <label for="sound_toggle">Play sound on task completion</label></li>
                         <li><input id="turbo" name="turbo" type="checkbox" checked> <label for="turbo">Turbo mode <small>(generates images faster, but uses an additional 1 GB of GPU memory)</small></label></li>
diff --git a/ui/media/main.css b/ui/media/main.css
index e92de109..77a53ac0 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -26,9 +26,7 @@
     --make-image-border: 2px solid hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) - 21%));
 }
 
-
-/* Light Theme */
-/* :root {
+.theme-light {
     --background-color1: white; 
     --background-color2: #dddddd;
     --background-color3: #e7e9eb;
@@ -39,11 +37,9 @@
     --input-text-color: black;
     --input-background-color: #f8f9fa; 
     --input-border-color: grey; 
-} */
+}
 
-
-/* Discord Theme */
-/* :root {
+.theme-discord {
     --background-color1: #36393f;
     --background-color2: #2f3136;
     --background-color3: #292b2f;
@@ -60,10 +56,9 @@
     --input-border-size: 2px; 
     --input-background-color: #202225; 
     --input-border-color: var(--input-background-color); 
-} */
+}
 
-/* Example "Custom" Theme */
-/* :root {
+.theme-fancy {
     --main-hue: 222;
 	--main-saturation: 18%;
 	--value-base: 19%;
@@ -83,12 +78,13 @@
     --input-background-color: var(--background-color3);
 	--input-text-color: #ccc;
 	--input-border-color: var(--background-color4);
-} */
+}
 
 
 * {
     font-family: Work Sans, Verdana, Geneva, sans-serif;
     box-sizing: border-box;
+    transition: background 0.5s, color 0.5s, background-color 0.5s;
 }
 
 body {
diff --git a/ui/media/main.js b/ui/media/main.js
index 176c1c39..050156b4 100644
--- a/ui/media/main.js
+++ b/ui/media/main.js
@@ -46,6 +46,7 @@ let useFullPrecisionField = document.querySelector('#use_full_precision')
 let saveToDiskField = document.querySelector('#save_to_disk')
 let diskPathField = document.querySelector('#diskPath')
 let autoSaveSettingsField = document.querySelector('#auto_save_settings')
+let themeField = document.querySelector('#theme')
 // let allowNSFWField = document.querySelector("#allow_nsfw")
 let useBetaChannelField = document.querySelector("#use_beta_channel")
 let promptStrengthSlider = document.querySelector('#prompt_strength_slider')
@@ -1743,4 +1744,49 @@ async function loadModifiers() {
     } catch (e) {
         console.log('error fetching modifiers', e)
     }
-}
\ No newline at end of file
+}
+
+var THEMES = []; // initialized in initTheme from data in css
+
+function getThemeName(theme) {
+    theme = theme.replace("theme-", "");
+    theme = theme.split("-").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+    return theme;
+}
+// init themefield
+function initTheme() {
+    Array.from(document.styleSheets)
+        .filter(sheet => sheet.href.startsWith(window.location.origin))
+        .flatMap(sheet => Array.from(sheet.cssRules))
+        .forEach(rule => {
+            var selector = rule.selectorText; // TODO: also do selector == ":root", re-run un-set props
+            if (selector && selector.startsWith(".theme-")) {
+                console.dir(theme_key, rule.style.length);
+                var theme_key = selector.substring(1);
+                THEMES.push({
+                    key: theme_key,
+                    name: getThemeName(theme_key),
+                    rule: rule
+                })
+            }
+    });
+    
+    THEMES.forEach(theme => {
+        var new_option = document.createElement("option");
+        new_option.setAttribute("value", theme.key);
+        new_option.innerText = theme.name;
+        themeField.appendChild(new_option);
+    });
+}
+initTheme();
+
+function themeFieldChanged() {
+    var theme = themeField.value;
+    console.log("Theme: ", theme);
+
+    var body = document.querySelector("body");
+    body.classList.remove(...THEMES.map(theme => theme.key));
+    body.classList.add(theme);
+}
+
+themeField.addEventListener('change', themeFieldChanged);

From da8835bc7702b3eb6df39fc8528dd439ea0b5902 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Mon, 17 Oct 2022 23:00:08 -0700
Subject: [PATCH 2/4] updated to behave better and apply variables that are
 dependant

---
 ui/index.html         |  1 +
 ui/media/auto-save.js |  3 ++-
 ui/media/main.css     |  3 ++-
 ui/media/main.js      | 25 +++++++++++++++++++++----
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 454a8355..4044a8d2 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -43,6 +43,7 @@
                         <li>
                             <input id="auto_save_settings" name="auto_save_settings" type="checkbox">
                             <label for="auto_save_settings">Automatically save settings <small>(settings restored on browser load)</small></label>
+                            <br/>
                             <button id="configureSettingsSaveBtn">Configure</button>
                             <button id="restoreDefaultSettingsBtn">Restore Defaults</button>
                         </li>
diff --git a/ui/media/auto-save.js b/ui/media/auto-save.js
index bb807c08..64cd4330 100644
--- a/ui/media/auto-save.js
+++ b/ui/media/auto-save.js
@@ -28,7 +28,8 @@ var SETTINGS_IDS_LIST = [
     "show_only_filtered_image",
     "upscale_model",
     "preview-image",
-    "modifier-card-size-slider"
+    "modifier-card-size-slider",
+    "theme"
 ]
 
 async function initSettings() {
diff --git a/ui/media/main.css b/ui/media/main.css
index 77a53ac0..d97ff29f 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -560,7 +560,8 @@ img {
 button,
 input[type="file"],
 input[type="checkbox"],
-select {
+select,
+option {
     cursor: pointer;
 }
 
diff --git a/ui/media/main.js b/ui/media/main.js
index 050156b4..31f17b0f 100644
--- a/ui/media/main.js
+++ b/ui/media/main.js
@@ -1746,6 +1746,7 @@ async function loadModifiers() {
     }
 }
 
+var DEFAULT_THEME = {};
 var THEMES = []; // initialized in initTheme from data in css
 
 function getThemeName(theme) {
@@ -1761,7 +1762,6 @@ function initTheme() {
         .forEach(rule => {
             var selector = rule.selectorText; // TODO: also do selector == ":root", re-run un-set props
             if (selector && selector.startsWith(".theme-")) {
-                console.dir(theme_key, rule.style.length);
                 var theme_key = selector.substring(1);
                 THEMES.push({
                     key: theme_key,
@@ -1769,6 +1769,13 @@ function initTheme() {
                     rule: rule
                 })
             }
+            if (selector && selector == ":root") {
+                DEFAULT_THEME = {
+                    key: "theme-default",
+                    name: "Default",
+                    rule: rule
+                };
+            }
     });
     
     THEMES.forEach(theme => {
@@ -1781,12 +1788,22 @@ function initTheme() {
 initTheme();
 
 function themeFieldChanged() {
-    var theme = themeField.value;
-    console.log("Theme: ", theme);
+    var theme_key = themeField.value;
 
     var body = document.querySelector("body");
     body.classList.remove(...THEMES.map(theme => theme.key));
-    body.classList.add(theme);
+    body.classList.add(theme_key);
+
+    body.style = "";
+    var theme = THEMES.find(t => t.key == theme_key);
+    if (theme) {
+        // refresh variables incase they are back referencing
+        Array.from(DEFAULT_THEME.rule.style)
+            .filter(cssVariable => !Array.from(theme.rule.style).includes(cssVariable))
+            .forEach(cssVariable => {
+            body.style.setProperty(cssVariable, DEFAULT_THEME.rule.style.getPropertyValue(cssVariable));
+        });
+    }
 }
 
 themeField.addEventListener('change', themeFieldChanged);

From e476d688480bea2ecd862d5ae5f5c5ab4da31655 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Mon, 17 Oct 2022 23:19:22 -0700
Subject: [PATCH 3/4] fixed a couple things and added some more themes

---
 ui/media/main.css | 71 +++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 69 insertions(+), 2 deletions(-)

diff --git a/ui/media/main.css b/ui/media/main.css
index d97ff29f..20a5f4b2 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -58,7 +58,7 @@
     --input-border-color: var(--input-background-color); 
 }
 
-.theme-fancy {
+.theme-cool-blue {
     --main-hue: 222;
 	--main-saturation: 18%;
 	--value-base: 19%;
@@ -81,6 +81,73 @@
 }
 
 
+.theme-blurple {
+    --main-hue: 235;
+	--main-saturation: 18%;
+	--value-base: 16%;
+	--value-step: 3%;
+	--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
+	--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step))));
+	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
+	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
+    
+    --accent-hue: 266;
+    --make-image-border: none;
+
+    --button-color: var(--accent-color);
+    --button-border: none;
+    
+    --input-border-size: 1px; 
+    --input-background-color: var(--background-color3);
+	--input-text-color: #ccc;
+	--input-border-color: var(--background-color4);
+}
+
+.theme-super-dark {
+    --main-hue: 222;
+	--main-saturation: 18%;
+	--value-base: 5%;
+	--value-step: 5%;
+	--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
+	--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1 * var(--value-step))));
+	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (2 * var(--value-step))));
+	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (3 * var(--value-step))));
+    
+    --accent-hue: 266;
+    --make-image-border: none;
+
+    --button-color: var(--accent-color);
+    --button-border: none;
+    
+    --input-border-size: 0px; 
+    --input-background-color: var(--background-color3);
+	--input-text-color: #ccc;
+	--input-border-color: var(--background-color4);
+}
+
+.theme-wild {
+    --main-hue: 128;
+	--main-saturation: 18%;
+	--value-base: 20%;
+	--value-step: 5%;
+	--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
+	--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step))));
+	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
+	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
+    
+    --accent-hue: 212;
+    --make-image-border: none;
+
+    --button-color: var(--accent-color);
+    --button-border: none;
+    
+    --input-border-size: 1px; 
+    --input-background-color: hsl(222, var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
+	--input-text-color: red;
+	--input-border-color: green;
+}
+
+
 * {
     font-family: Work Sans, Verdana, Geneva, sans-serif;
     box-sizing: border-box;
@@ -687,7 +754,7 @@ input[type="range"]::-moz-range-thumb {
 }
 
 #save-settings-config > div {
-    background: rgb(44, 45, 48);
+    background: var(--background-color2);
     max-width: 600px;
     margin: auto;
     margin-top: 100px;

From d2215c2ba92662cff6691af18e1f68e97f828af2 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Mon, 17 Oct 2022 23:36:05 -0700
Subject: [PATCH 4/4] removed accent hue in a couple places where it didnt need
 to be specified

---
 ui/media/main.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/ui/media/main.css b/ui/media/main.css
index 20a5f4b2..53d6d01c 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -91,7 +91,6 @@
 	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
 	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
     
-    --accent-hue: 266;
     --make-image-border: none;
 
     --button-color: var(--accent-color);
@@ -113,7 +112,6 @@
 	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (2 * var(--value-step))));
 	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (3 * var(--value-step))));
     
-    --accent-hue: 266;
     --make-image-border: none;
 
     --button-color: var(--accent-color);