added a theme dropdown box

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>

ui/media/main.css

@@ -26,9 +26,7 @@
     --make-image-border: 2px solid hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) - 21%));
 }
 
-
+.theme-light {
-/* Light Theme */
-/* :root {
     --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; 
-} */
+}
 
-
+.theme-discord {
-/* Discord Theme */
-/* :root {
     --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 */
+.theme-fancy {
-/* :root {
     --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 {

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')
@@ -1744,3 +1745,48 @@ async function loadModifiers() {
         console.log('error fetching modifiers', e)
     }
 }
+
+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);