rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-06-05 21:59:24 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ebolam
2022-09-21 08:25:28 -04:00
parent d000aa7dc3
commit 2debbc0cc8
2 changed files with 39 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
aiserver.py
View File

@@ -8102,6 +8102,10 @@ def UI_2_theme_change(data):
for key, value in data['theme'].items(): for key, value in data['theme'].items():
f.write("\t{}: {};\n".format(key, value.replace(";", "").replace("--", "-"))) f.write("\t{}: {};\n".format(key, value.replace(";", "").replace("--", "-")))
f.write("}") 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: if koboldai_vars.debug:
print("Theme Saved") print("Theme Saved")

27
static/koboldai.js
View File

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