Allow for saving of theme custom CSS when changing a palette or advanced theme element in the UI

aiserver.py

@@ -8102,6 +8102,10 @@ def UI_2_theme_change(data):
         for key, value in data['theme'].items():
             f.write("\t{}: {};\n".format(key, value.replace(";", "").replace("--", "-")))
         f.write("}")
+        f.write("--------Special Rules from Original Theme---------")
+        for rule in data['special_rules']:
+            f.write(rule)
+            f.write("\n")
     if koboldai_vars.debug:
         print("Theme Saved")
 

static/koboldai.js

@@ -2002,7 +2002,7 @@ function unload_userscripts() {
 }
 
 function save_theme() {
-	var cssVars = getAllCSSVariableNames();
+	var [cssVars, rules] = getAllCSSVariableNames();
 	for (const [key, value] of Object.entries(cssVars)) {
 		if (document.getElementById(key)) {
 			if (document.getElementById(key+"_select").value == "") {
@@ -2016,7 +2016,7 @@ function save_theme() {
 	for (item of document.getElementsByClassName("Theme_Input")) {
 		cssVars["--"+item.id] = item.value;
 	}
-	socket.emit("theme_change", {"name": document.getElementById("save_theme_name").value, "theme": cssVars});
+	socket.emit("theme_change", {"name": document.getElementById("save_theme_name").value, "theme": cssVars, 'special_rules': rules});
 	document.getElementById("save_theme_name").value = "";
 	socket.emit('theme_list_refresh', '');
 }
@@ -2328,39 +2328,46 @@ function Change_Theme(theme) {
 function palette_color(item) {
 	var r = document.querySelector(':root');
 	r.style.setProperty("--"+item.id, item.value);
-	//socket.emit("theme_change", getAllCSSVariableNames());
 }
 
 function getAllCSSVariableNames(styleSheets = document.styleSheets){
-   var cssVars = {};
+	let cssVars = {};
-   // loop each stylesheet
+	let rules = [];
-   //console.log(styleSheets);
+	// loop each stylesheet
-   for(var i = 0; i < styleSheets.length; i++){
+	for(let i = 0; i < styleSheets.length; i++){
-      // loop stylesheet's cssRules
+		// loop stylesheet's cssRules
-      try{ // try/catch used because 'hasOwnProperty' doesn't work
+		if ((styleSheets[i].href != null) && (styleSheets[i].href.includes("/themes/"))) {
-         for( var j = 0; j < styleSheets[i].cssRules.length; j++){
+		  //if we're in the theme css, grab all the non root variables in case there are som
-            try{
+		  for( let j = 0; j < styleSheets[i].cssRules.length; j++){
-               // loop stylesheet's cssRules' style (property names)
+				if (styleSheets[i].cssRules[j].selectorText != ":root") {
-               for(var k = 0; k < styleSheets[i].cssRules[j].style.length; k++){
+					rules.push(styleSheets[i].cssRules[j].cssText);
-                  let name = styleSheets[i].cssRules[j].style[k];
+				}
-                  // test name for css variable signiture and uniqueness
+			}
-                  if(name.startsWith('--') && (styleSheets[i].ownerNode.id == "CSSTheme")){
+		}
-					let value = styleSheets[i].cssRules[j].style.getPropertyValue(name);
+		try{ // try/catch used because 'hasOwnProperty' doesn't work
-					value.replace(/(\r\n|\r|\n){2,}/g, '$1\n');
+			for( let j = 0; j < styleSheets[i].cssRules.length; j++){
-					value = value.replaceAll("\t", "").trim();
+				try{
-                    cssVars[name] = value;
+					// loop stylesheet's cssRules' style (property names)
-                  }
+					for(let k = 0; k < styleSheets[i].cssRules[j].style.length; k++){
-               }
+						let name = styleSheets[i].cssRules[j].style[k];
-            } catch (error) {}
+						// test name for css variable signiture and uniqueness
-         }
+						if(name.startsWith('--') && (styleSheets[i].ownerNode.id == "CSSTheme")){
-      } catch (error) {}
+							let value = styleSheets[i].cssRules[j].style.getPropertyValue(name);
-   }
+							value.replace(/(\r\n|\r|\n){2,}/g, '$1\n');
-   return cssVars;
+							value = value.replaceAll("\t", "").trim();
+							cssVars[name] = value;
+						}
+					}
+				} catch (error) {}
+			}
+		} catch (error) {}
+	}
+	return [cssVars, rules];
 }
 
 function create_theming_elements() {
 	//console.log("Running theme editor");
-	var cssVars = getAllCSSVariableNames();
+	var [cssVars, rules] = getAllCSSVariableNames();
 	palette_table = document.createElement("table");
 	advanced_table = document.getElementById("advanced_theme_editor_table");
 	theme_area = document.getElementById("Palette");