From 4c490bea16df7a1bb40c13b8b9e9b280b8f34dbb Mon Sep 17 00:00:00 2001
From: ebolam <ebolam@gmail.com>
Date: Sun, 21 Aug 2022 17:36:32 -0400
Subject: [PATCH] Palette System Functional

---
 static/koboldai.js             | 11 +++++++----
 templates/settings flyout.html | 36 +++++++++++++++++-----------------
 themes/Monochrome.css          |  3 ++-
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/static/koboldai.js b/static/koboldai.js
index 8669a263..0eebef23 100644
--- a/static/koboldai.js
+++ b/static/koboldai.js
@@ -1584,7 +1584,9 @@ function Change_Theme(theme) {
 	//console.log(theme);
 	var css = document.getElementById("CSSTheme");
     css.setAttribute("href", "/themes/"+theme+".css");
-	create_theming_elements();
+	setTimeout(() => {
+		create_theming_elements();
+	}, "1000")
 }
 
 function palette_color(item) {
@@ -1598,8 +1600,6 @@ function getAllCSSVariableNames(styleSheets = document.styleSheets){
    // loop each stylesheet
    //console.log(styleSheets);
    for(var i = 0; i < styleSheets.length; i++){
-	   //console.log(styleSheets[i]);
-	   //console.log(styleSheets[i].ownerNode.attributes.id);
       // loop stylesheet's cssRules
       try{ // try/catch used because 'hasOwnProperty' doesn't work
          for( var j = 0; j < styleSheets[i].cssRules.length; j++){
@@ -1629,7 +1629,7 @@ function create_theming_elements() {
 	advanced_table = document.createElement("table");
 	theme_area = document.getElementById("Palette");
 	theme_area.append(palette_table);
-	//console.log(cssVars);
+	console.log(cssVars);
 	//theme_area.append(advanced_table);
 	for (css_item of cssVars) {
 		if (css_item[0].includes("_palette")) {
@@ -1637,6 +1637,9 @@ function create_theming_elements() {
 				input = document.getElementById(css_item[0].replace("--", ""));
 				input.setAttribute("title", css_item[0].replace("--", "").replace("_palette", ""));
 				input.value = css_item[1];
+				console.log("Set "+css_item[0].replace("--", "")+" to "+css_item[1]);
+				console.log(input);
+				
 			}
 		} else {
 			tr = document.createElement("tr");
diff --git a/templates/settings flyout.html b/templates/settings flyout.html
index a5c21314..3c1523b2 100644
--- a/templates/settings flyout.html	
+++ b/templates/settings flyout.html	
@@ -169,7 +169,7 @@
 					<!---Bottom Row---->
 					<span class="setting_item">
 						<!---<span class="material-icons-outlined cursor" onclick="socket.emit('load_softprompt_list', '');">folder_open</span> <span class="var_sync_system_spname"></span>--->
-						<select id="sp" class="var_sync_system_splist var_sync_system_spfilename" style="width: 150px;color:black;" onclick="socket.emit('load_softprompt', this.value);">
+						<select autocomplete="off" id="sp" class="var_sync_system_splist var_sync_system_spfilename" style="width: 150px;color:black;" onclick="socket.emit('load_softprompt', this.value);">
 						</select>
 					</span>
 					<!---Slider Labels--->
@@ -227,7 +227,7 @@
 			<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Theme</h4>
 		</div>
 		<div class="setting_tile_area" id="Theme">
-			<select style="color: black;" onchange="Change_Theme(this.value);">
+			<select autocomplete="off" style="color: black;" onchange="Change_Theme(this.value);">
 				<option selected>Monochrome</option>
 				<option>Material You</option>
 				<option>Darkness</option>
@@ -252,31 +252,31 @@
 					</tr>
 					<tr>
 						<td>Primary</td>
-						<td><input type=color id="primary_palette" onchange="palette_color(this)"></td>
-						<td><input type=color id="on_primary_palette" onchange="palette_color(this)"></td>
-						<td><input type=color id="primary_containter_palette" onchange="palette_color(this)"></td>
-						<td><input type=color id="on_primary_containter_palette" onchange="palette_color(this)"></td>
+						<td><input autocomplete="off" type=color id="primary_palette" onchange="palette_color(this)"></td>
+						<td><input autocomplete="off" type=color id="on_primary_palette" onchange="palette_color(this)"></td>
+						<td><input autocomplete="off" type=color id="primary_containter_palette" onchange="palette_color(this)"></td>
+						<td><input autocomplete="off" type=color id="on_primary_containter_palette" onchange="palette_color(this)"></td>
 					</tr>
 					<tr>
 						<td>Secondary</td>
-						<td><input type=color id="secondary_palette" onchange="palette_color(this)"></td>
-						<td><input type=color id="on_secondary_palette" onchange="palette_color(this)"></td>
-						<td><input type=color id="secondary_containter_palette" onchange="palette_color(this)"></td>
-						<td><input type=color id="on_secondary_containter_palette" onchange="palette_color(this)"></td>
+						<td><input autocomplete="off" type=color id="secondary_palette" onchange="palette_color(this)"></td>
+						<td><input autocomplete="off" type=color id="on_secondary_palette" onchange="palette_color(this)"></td>
+						<td><input autocomplete="off" type=color id="secondary_containter_palette" onchange="palette_color(this)"></td>
+						<td><input autocomplete="off" type=color id="on_secondary_containter_palette" onchange="palette_color(this)"></td>
 					</tr>
 					<tr>
 						<td>Tertiary</td>
-						<td><input type=color id="tertiary_palette" onchange="palette_color(this)"></td>
-						<td><input type=color id="on_tertiary_palette" onchange="palette_color(this)"></td>
-						<td><input type=color id="tertiary_containter_palette" onchange="palette_color(this)"></td>
-						<td><input type=color id="on_tertiary_containter_palette" onchange="palette_color(this)"></td>
+						<td><input autocomplete="off" type=color id="tertiary_palette" onchange="palette_color(this)"></td>
+						<td><input autocomplete="off" type=color id="on_tertiary_palette" onchange="palette_color(this)"></td>
+						<td><input autocomplete="off" type=color id="tertiary_containter_palette" onchange="palette_color(this)"></td>
+						<td><input autocomplete="off" type=color id="on_tertiary_containter_palette" onchange="palette_color(this)"></td>
 					</tr>
 					<tr>
 						<td>Error</td>
-						<td><input type=color id="error_palette" onchange="palette_color(this)"></td>
-						<td><input type=color id="on_error_palette" onchange="palette_color(this)"></td>
-						<td><input type=color id="error_containter_palette" onchange="palette_color(this)"></td>
-						<td><input type=color id="on_error_containter_palette" onchange="palette_color(this)"></td>
+						<td><input autocomplete="off" type=color id="error_palette" onchange="palette_color(this)"></td>
+						<td><input autocomplete="off" type=color id="on_error_palette" onchange="palette_color(this)"></td>
+						<td><input autocomplete="off" type=color id="error_containter_palette" onchange="palette_color(this)"></td>
+						<td><input autocomplete="off" type=color id="on_error_containter_palette" onchange="palette_color(this)"></td>
 					</tr>
 				</table>
 				
diff --git a/themes/Monochrome.css b/themes/Monochrome.css
index 76c491ab..77430ae5 100644
--- a/themes/Monochrome.css
+++ b/themes/Monochrome.css
@@ -1,5 +1,6 @@
 :root {
-/*----------------Palette Theme--------------------*/--primary_palette: #afc6ff;
+/*----------------Palette Theme--------------------*/
+	--primary_palette: #afc6ff;
 	--on_primary_palette: #002d6c;
 	--primary_containter_palette: #004397;
 	--on_primary_containter_palette: #d9e2ff;