diff --git a/ui/index.html b/ui/index.html
index c0dbc2fa..1570aceb 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -2,21 +2,22 @@
 <html>
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/png" href="/media/favicon-16x16.png" sizes="16x16">
-    <link rel="icon" type="image/png" href="/media/favicon-32x32.png" sizes="32x32">
-    <link rel="stylesheet" href="/media/main.css?v=25">
-    <link rel="stylesheet" href="/media/modifier-thumbnails.css?v=1">
+    <link rel="icon" type="image/png" href="/media/images/favicon-16x16.png" sizes="16x16">
+    <link rel="icon" type="image/png" href="/media/images/favicon-32x32.png" sizes="32x32">
+    <link rel="stylesheet" href="/media/css/themes.css?v=1">
+    <link rel="stylesheet" href="/media/css/main.css?v=1">
+    <link rel="stylesheet" href="/media/css/modifier-thumbnails.css?v=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
-    <link rel="stylesheet" href="/media/drawingboard.min.css">
+    <link rel="stylesheet" href="/media/css/drawingboard.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700;800&display=swap" rel="stylesheet"> 
-    <script src="/media/jquery-3.6.1.min.js"></script>
-    <script src="/media/drawingboard.min.js"></script>
+    <script src="/media/js/jquery-3.6.1.min.js"></script>
+    <script src="/media/js/drawingboard.min.js"></script>
 </head>
 <body>
 <div id="container">
     <div id="top-nav">
         <div id="logo">
-            <h1>Stable Diffusion UI <small>v2.28 <span id="updateBranchLabel"></span></small></h1>
+            <h1>Stable Diffusion UI <small>v2.29 <span id="updateBranchLabel"></span></small></h1>
         </div>
         <ul id="top-nav-items">
             <li class="dropdown">
@@ -239,7 +240,7 @@
     <div class="line-separator">&nbsp;</div>
 
     <div id="footer" class="panel-box">
-        <p>If you found this project useful and want to help keep it alive, please <a href="https://ko-fi.com/cmdr2_stablediffusion_ui" target="_blank"><img src="media/kofi.png" id="coffeeButton"></a> to help cover the cost of development and maintenance! Thank you for your support!</p>
+        <p>If you found this project useful and want to help keep it alive, please <a href="https://ko-fi.com/cmdr2_stablediffusion_ui" target="_blank"><img src="/media/images/kofi.png" id="coffeeButton"></a> to help cover the cost of development and maintenance! Thank you for your support!</p>
         <p>Please feel free to join the <a href="https://discord.com/invite/u9yhsFmEkB" target="_blank">discord community</a> or <a href="https://github.com/cmdr2/stable-diffusion-ui/issues" target="_blank">file an issue</a> if you have any problems or suggestions in using this interface.</p>
         <div id="footer-legal">
             <p><b>Disclaimer:</b> The authors of this project are not responsible for any content generated using this interface.</p>
@@ -250,8 +251,9 @@
 </div>
 </body>
 
-<script src="media/auto-save.js?v=2"></script>
-<script src="media/main.js?v=37"></script>
+<script src="media/js/auto-save.js?v=1"></script>
+<script src="media/js/main.js?v=1"></script>
+<script src="media/js/themes.js?v=1"></script>
 <script>
 async function init() {
     await loadModifiers()
diff --git a/ui/media/css/auto-save.css b/ui/media/css/auto-save.css
new file mode 100644
index 00000000..a302dc5d
--- /dev/null
+++ b/ui/media/css/auto-save.css
@@ -0,0 +1,49 @@
+/* Auto-Settings Styling */
+#auto_save_settings:not(:checked) ~ button {
+    display: none;
+}
+
+#save-settings-config {
+    position: fixed;
+    background: rgba(32, 33, 36, 50%);
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1000;
+}
+
+#save-settings-config > div {
+    background: var(--background-color2);
+    max-width: 600px;
+    margin: auto;
+    margin-top: 100px;
+    border-radius: 6px;
+    padding: 30px;
+    text-align: center;
+}
+
+#save-settings-config-table {
+    margin: auto;
+}
+
+#save-settings-config-table td:first-child,
+#save-settings-config-table th:first-child {
+    float: right;
+}
+
+#save-settings-config-table td:last-child,
+#save-settings-config-table th:last-child {
+    float: left;
+}
+
+#save-settings-config-table td small {
+    color: rgb(153, 153, 153);
+}
+
+#save-settings-config-close-btn {
+    float: right;
+    cursor: pointer;
+    padding: 10px;
+    transform: translate(50%, -50%) scaleX(130%);
+}
diff --git a/ui/media/drawingboard.min.css b/ui/media/css/drawingboard.min.css
similarity index 100%
rename from ui/media/drawingboard.min.css
rename to ui/media/css/drawingboard.min.css
diff --git a/ui/media/main.css b/ui/media/css/main.css
similarity index 62%
rename from ui/media/main.css
rename to ui/media/css/main.css
index 64705931..ebc48be2 100644
--- a/ui/media/main.css
+++ b/ui/media/css/main.css
@@ -1,151 +1,3 @@
-:root {
-    --background-color1: rgb(32, 33, 36); /* main parts of the page */
-    --background-color2: rgb(44, 45, 48); /* main panels */
-    --background-color3: rgb(47, 49, 53);
-    --background-color4: rgb(18, 18, 19); /* settings dropdowns */
-
-    --accent-hue: 266;
-    --accent-lightness: 36%;
-    --accent-lightness-hover: 40%;
-
-    --text-color: #eee;
-
-    --input-text-color: black;
-    --input-background-color: #e9e9ed; 
-    --input-border-color: #8f8f9d; 
-
-    --button-text-color: var(--input-text-color);
-    --button-color: #e9e9ed;
-    --button-border: 1px solid #8f8f9d;
-
-    /* other */
-    --input-border-radius: 4px;
-    --input-border-size: 1px; 
-    --accent-color: hsl(var(--accent-hue), 100%, var(--accent-lightness));
-    --accent-color-hover: hsl(var(--accent-hue), 100%, var(--accent-lightness-hover));
-    --make-image-border: 2px solid hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) - 21%));
-}
-
-.theme-light {
-    --background-color1: white; 
-    --background-color2: #dddddd;
-    --background-color3: #e7e9eb;
-    --background-color4: #cccccc;
-
-    --text-color: black;
-
-    --input-text-color: black;
-    --input-background-color: #f8f9fa; 
-    --input-border-color: grey; 
-}
-
-.theme-discord {
-    --background-color1: #36393f;
-    --background-color2: #2f3136;
-    --background-color3: #292b2f;
-    --background-color4: #202225;
-    
-    --accent-hue: 235;
-    --accent-lightness: 65%;
-    --make-image-border: none;
-    
-    --button-color: var(--accent-color);
-    --button-border: none;
-
-    --input-text-color: #ccc;
-    --input-border-size: 2px; 
-    --input-background-color: #202225; 
-    --input-border-color: var(--input-background-color); 
-}
-
-.theme-cool-blue {
-    --main-hue: 222;
-	--main-saturation: 18%;
-	--value-base: 19%;
-	--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: 212;
-    --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-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))));
-    
-    --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))));
-    
-    --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;
@@ -681,24 +533,6 @@ input::file-selector-button {
     height: 19px;
 }
 
-/* input[type="range"] {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0px;
-    padding: 0px;
-    cursor: pointer;
-    line-height: 29px;
-}
-
-input[type="range"]::-webkit-slider-thumb,
-input[type="range"]::-moz-range-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 24px;
-    height: 24px;
-    border-radius: 12px;
-} */
-
 @media screen and (max-width: 700px) {
     body {
         margin: 0px;
@@ -736,56 +570,6 @@ input[type="range"]::-moz-range-thumb {
     }
 }
 
-/* Auto-Settings Styling */
-#auto_save_settings:not(:checked) ~ button {
-    display: none;
-}
-
-#save-settings-config {
-    position: fixed;
-    background: rgba(32, 33, 36, 50%);
-    top: 0px;
-    left: 0px;
-    width: 100vw;
-    height: 100vh;
-    z-index: 1000;
-}
-
-#save-settings-config > div {
-    background: var(--background-color2);
-    max-width: 600px;
-    margin: auto;
-    margin-top: 100px;
-    border-radius: 6px;
-    padding: 30px;
-    text-align: center;
-}
-
-#save-settings-config-table {
-    margin: auto;
-}
-
-#save-settings-config-table td:first-child,
-#save-settings-config-table th:first-child {
-    float: right;
-}
-
-#save-settings-config-table td:last-child,
-#save-settings-config-table th:last-child {
-    float: left;
-}
-
-#save-settings-config-table td small {
-    color: rgb(153, 153, 153);
-}
-
-#save-settings-config-close-btn {
-    float: right;
-    cursor: pointer;
-    padding: 10px;
-    transform: translate(50%, -50%) scaleX(130%);
-}
-
 #promptsFromFileBtn {
     font-size: 9pt;
-}
\ No newline at end of file
+}
diff --git a/ui/media/modifier-thumbnails.css b/ui/media/css/modifier-thumbnails.css
similarity index 100%
rename from ui/media/modifier-thumbnails.css
rename to ui/media/css/modifier-thumbnails.css
diff --git a/ui/media/css/themes.css b/ui/media/css/themes.css
new file mode 100644
index 00000000..8a3d6591
--- /dev/null
+++ b/ui/media/css/themes.css
@@ -0,0 +1,146 @@
+:root {
+    --background-color1: rgb(32, 33, 36); /* main parts of the page */
+    --background-color2: rgb(44, 45, 48); /* main panels */
+    --background-color3: rgb(47, 49, 53);
+    --background-color4: rgb(18, 18, 19); /* settings dropdowns */
+
+    --accent-hue: 266;
+    --accent-lightness: 36%;
+    --accent-lightness-hover: 40%;
+
+    --text-color: #eee;
+
+    --input-text-color: black;
+    --input-background-color: #e9e9ed; 
+    --input-border-color: #8f8f9d; 
+
+    --button-text-color: var(--input-text-color);
+    --button-color: #e9e9ed;
+    --button-border: 1px solid #8f8f9d;
+
+    /* other */
+    --input-border-radius: 4px;
+    --input-border-size: 1px; 
+    --accent-color: hsl(var(--accent-hue), 100%, var(--accent-lightness));
+    --accent-color-hover: hsl(var(--accent-hue), 100%, var(--accent-lightness-hover));
+    --make-image-border: 2px solid hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) - 21%));
+}
+
+.theme-light {
+    --background-color1: white; 
+    --background-color2: #dddddd;
+    --background-color3: #e7e9eb;
+    --background-color4: #cccccc;
+
+    --text-color: black;
+
+    --input-text-color: black;
+    --input-background-color: #f8f9fa; 
+    --input-border-color: grey; 
+}
+
+.theme-discord {
+    --background-color1: #36393f;
+    --background-color2: #2f3136;
+    --background-color3: #292b2f;
+    --background-color4: #202225;
+    
+    --accent-hue: 235;
+    --accent-lightness: 65%;
+    --make-image-border: none;
+    
+    --button-color: var(--accent-color);
+    --button-border: none;
+
+    --input-text-color: #ccc;
+    --input-border-size: 2px; 
+    --input-background-color: #202225; 
+    --input-border-color: var(--input-background-color); 
+}
+
+.theme-cool-blue {
+    --main-hue: 222;
+	--main-saturation: 18%;
+	--value-base: 19%;
+	--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: 212;
+    --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-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))));
+    
+    --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))));
+    
+    --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;
+}
diff --git a/ui/media/favicon-16x16.png b/ui/media/images/favicon-16x16.png
similarity index 100%
rename from ui/media/favicon-16x16.png
rename to ui/media/images/favicon-16x16.png
diff --git a/ui/media/favicon-32x32.png b/ui/media/images/favicon-32x32.png
similarity index 100%
rename from ui/media/favicon-32x32.png
rename to ui/media/images/favicon-32x32.png
diff --git a/ui/media/kofi.png b/ui/media/images/kofi.png
similarity index 100%
rename from ui/media/kofi.png
rename to ui/media/images/kofi.png
diff --git a/ui/media/auto-save.js b/ui/media/js/auto-save.js
similarity index 100%
rename from ui/media/auto-save.js
rename to ui/media/js/auto-save.js
diff --git a/ui/media/drawingboard.min.js b/ui/media/js/drawingboard.min.js
similarity index 100%
rename from ui/media/drawingboard.min.js
rename to ui/media/js/drawingboard.min.js
diff --git a/ui/media/jquery-3.6.1.min.js b/ui/media/js/jquery-3.6.1.min.js
similarity index 100%
rename from ui/media/jquery-3.6.1.min.js
rename to ui/media/js/jquery-3.6.1.min.js
diff --git a/ui/media/main.js b/ui/media/js/main.js
similarity index 96%
rename from ui/media/main.js
rename to ui/media/js/main.js
index b7fc33c5..6afd5a29 100644
--- a/ui/media/main.js
+++ b/ui/media/js/main.js
@@ -1750,65 +1750,3 @@ async function loadModifiers() {
         console.log('error fetching modifiers', e)
     }
 }
-
-var DEFAULT_THEME = {};
-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-")) {
-                var theme_key = selector.substring(1);
-                THEMES.push({
-                    key: theme_key,
-                    name: getThemeName(theme_key),
-                    rule: rule
-                })
-            }
-            if (selector && selector == ":root") {
-                DEFAULT_THEME = {
-                    key: "theme-default",
-                    name: "Default",
-                    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_key = themeField.value;
-
-    var body = document.querySelector("body");
-    body.classList.remove(...THEMES.map(theme => theme.key));
-    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);
diff --git a/ui/media/js/themes.js b/ui/media/js/themes.js
new file mode 100644
index 00000000..1b960a2e
--- /dev/null
+++ b/ui/media/js/themes.js
@@ -0,0 +1,61 @@
+var DEFAULT_THEME = {};
+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-")) {
+                var theme_key = selector.substring(1);
+                THEMES.push({
+                    key: theme_key,
+                    name: getThemeName(theme_key),
+                    rule: rule
+                })
+            }
+            if (selector && selector == ":root") {
+                DEFAULT_THEME = {
+                    key: "theme-default",
+                    name: "Default",
+                    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_key = themeField.value;
+
+    var body = document.querySelector("body");
+    body.classList.remove(...THEMES.map(theme => theme.key));
+    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);
