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] 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);