mirror of
https://github.com/anapnoe/stable-diffusion-webui-ux.git
synced 2026-09-19 01:05:13 +02:00
clamp hsltohex function in theme configurator added minimal orange theme
This commit is contained in:
anapnoe
@@ -1,24 +1,24 @@
|
||||
function hexToRgb (color) {
|
||||
let hex = color[0] === '#' ? color.slice(1) : color;
|
||||
function hexToRgb(color) {
|
||||
let hex = color[0] === "#" ? color.slice(1) : color;
|
||||
let c;
|
||||
|
||||
// expand the short hex by doubling each character, fc0 -> ffcc00
|
||||
if (hex.length !== 6) {
|
||||
hex = ((() => {
|
||||
hex = (() => {
|
||||
const result = [];
|
||||
for (c of Array.from(hex)) {
|
||||
result.push(`${c}${c}`);
|
||||
}
|
||||
return result;
|
||||
})()).join('');
|
||||
})().join("");
|
||||
}
|
||||
const colorStr = hex.match(/#?(.{2})(.{2})(.{2})/).slice(1);
|
||||
const rgb = colorStr.map(col => parseInt(col, 16));
|
||||
const rgb = colorStr.map((col) => parseInt(col, 16));
|
||||
rgb.push(1);
|
||||
return rgb;
|
||||
}
|
||||
|
||||
function rgbToHsl (rgb) {
|
||||
function rgbToHsl(rgb) {
|
||||
const r = rgb[0] / 255;
|
||||
const g = rgb[1] / 255;
|
||||
const b = rgb[2] / 255;
|
||||
@@ -29,26 +29,18 @@ function rgbToHsl (rgb) {
|
||||
const add = max + min;
|
||||
|
||||
const hue =
|
||||
min === max ?
|
||||
0
|
||||
: r === max ?
|
||||
(((60 * (g - b)) / diff) + 360) % 360
|
||||
: g === max ?
|
||||
((60 * (b - r)) / diff) + 120
|
||||
:
|
||||
((60 * (r - g)) / diff) + 240;
|
||||
min === max
|
||||
? 0
|
||||
: r === max
|
||||
? ((60 * (g - b)) / diff + 360) % 360
|
||||
: g === max
|
||||
? (60 * (b - r)) / diff + 120
|
||||
: (60 * (r - g)) / diff + 240;
|
||||
|
||||
const lum = 0.5 * add;
|
||||
|
||||
const sat =
|
||||
lum === 0 ?
|
||||
0
|
||||
: lum === 1 ?
|
||||
1
|
||||
: lum <= 0.5 ?
|
||||
diff / add
|
||||
:
|
||||
diff / (2 - add);
|
||||
lum === 0 ? 0 : lum === 1 ? 1 : lum <= 0.5 ? diff / add : diff / (2 - add);
|
||||
|
||||
const h = Math.round(hue);
|
||||
const s = Math.round(sat * 100);
|
||||
@@ -58,302 +50,296 @@ function rgbToHsl (rgb) {
|
||||
return [h, s, l, a];
|
||||
}
|
||||
|
||||
function hexToHsl (color) {
|
||||
function hexToHsl(color) {
|
||||
const rgb = hexToRgb(color);
|
||||
const hsl = rgbToHsl(rgb);
|
||||
return "hsl("+hsl[0]+"deg "+ hsl[1] +"% " + hsl[2] + "%)";
|
||||
return "hsl(" + hsl[0] + "deg " + hsl[1] + "% " + hsl[2] + "%)";
|
||||
}
|
||||
|
||||
function hslToHex(h, s, l) {
|
||||
|
||||
l /= 100;
|
||||
const a = s * Math.min(l, 1 - l) / 100;
|
||||
const f = n => {
|
||||
const a = (s * Math.min(l, 1 - l)) / 100;
|
||||
const f = (n) => {
|
||||
const k = (n + h / 30) % 12;
|
||||
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
||||
return Math.round(255 * color).toString(16).padStart(2, '0'); // convert to Hex and prefix "0" if needed
|
||||
return Math.round(255 * Math.max(0, Math.min(color, 1)))
|
||||
.toString(16)
|
||||
.padStart(2, "0"); // convert to Hex and prefix "0" if needed
|
||||
};
|
||||
return `#${f(0)}${f(8)}${f(4)}`;
|
||||
}
|
||||
|
||||
function hsl2rgb(h,s,l) {
|
||||
let a=s*Math.min(l,1-l);
|
||||
let f= (n,k=(n+h/30)%12) => l - a*Math.max(Math.min(k-3,9-k,1),-1);
|
||||
return [f(0),f(8),f(4)];
|
||||
}
|
||||
function hsl2rgb(h, s, l) {
|
||||
let a = s * Math.min(l, 1 - l);
|
||||
let f = (n, k = (n + h / 30) % 12) =>
|
||||
l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
||||
return [f(0), f(8), f(4)];
|
||||
}
|
||||
|
||||
function invertColor(hex) {
|
||||
if (hex.indexOf('#') === 0) {
|
||||
hex = hex.slice(1);
|
||||
}
|
||||
// convert 3-digit hex to 6-digits.
|
||||
if (hex.length === 3) {
|
||||
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
|
||||
}
|
||||
if (hex.length !== 6) {
|
||||
throw new Error('Invalid HEX color.');
|
||||
}
|
||||
// invert color components
|
||||
var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
|
||||
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
|
||||
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
|
||||
// pad each with zeros and return
|
||||
return '#' + padZero(r) + padZero(g) + padZero(b);
|
||||
if (hex.indexOf("#") === 0) {
|
||||
hex = hex.slice(1);
|
||||
}
|
||||
// convert 3-digit hex to 6-digits.
|
||||
if (hex.length === 3) {
|
||||
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
|
||||
}
|
||||
if (hex.length !== 6) {
|
||||
throw new Error("Invalid HEX color.");
|
||||
}
|
||||
// invert color components
|
||||
var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
|
||||
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
|
||||
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
|
||||
// pad each with zeros and return
|
||||
return "#" + padZero(r) + padZero(g) + padZero(b);
|
||||
}
|
||||
|
||||
function padZero(str, len) {
|
||||
len = len || 2;
|
||||
var zeros = new Array(len).join('0');
|
||||
return (zeros + str).slice(-len);
|
||||
len = len || 2;
|
||||
var zeros = new Array(len).join("0");
|
||||
return (zeros + str).slice(-len);
|
||||
}
|
||||
|
||||
|
||||
function getValsWrappedIn(str,c1,c2){
|
||||
var rg = new RegExp("(?<=\\"+c1+")(.*?)(?=\\"+c2+")","g");
|
||||
return str.match(rg);
|
||||
function getValsWrappedIn(str, c1, c2) {
|
||||
var rg = new RegExp("(?<=\\" + c1 + ")(.*?)(?=\\" + c2 + ")", "g");
|
||||
return str.match(rg);
|
||||
}
|
||||
|
||||
let styleobj = {};
|
||||
let styleobj = {};
|
||||
let hslobj = {};
|
||||
let isColorsInv;
|
||||
|
||||
const toHSLArray = hslStr => hslStr.match(/\d+/g).map(Number);
|
||||
|
||||
function offsetColorsHSV(ohsl){
|
||||
|
||||
let inner_styles = "";
|
||||
|
||||
for (const key in styleobj) {
|
||||
|
||||
let keyVal = styleobj[key];
|
||||
|
||||
if( keyVal.indexOf("#") != -1 || keyVal.indexOf("hsl") != -1){
|
||||
let colcomp = gradioApp().querySelector('#'+key+' input');
|
||||
if(colcomp){
|
||||
|
||||
let hsl;
|
||||
|
||||
if( keyVal.indexOf("#") != -1){
|
||||
keyVal = keyVal.replace(/\s+/g, "");
|
||||
//inv ? keyVal = invertColor(keyVal) : 0;
|
||||
if(isColorsInv){
|
||||
keyVal = invertColor(keyVal);
|
||||
styleobj[key] = keyVal;
|
||||
}
|
||||
hsl = rgbToHsl(hexToRgb(keyVal));
|
||||
}else{
|
||||
if(isColorsInv){
|
||||
let c = toHSLArray(keyVal);
|
||||
let hex = hslToHex(c[0],c[1],c[2]);
|
||||
keyVal = invertColor(hex);
|
||||
styleobj[key] = keyVal;
|
||||
hsl = rgbToHsl(hexToRgb(keyVal));
|
||||
|
||||
}else{
|
||||
hsl = toHSLArray(keyVal);
|
||||
}
|
||||
}
|
||||
|
||||
const toHSLArray = (hslStr) => hslStr.match(/\d+/g).map(Number);
|
||||
|
||||
let h = (parseInt(hsl[0]) + parseInt(ohsl[0])) % 360;
|
||||
let s = (parseInt(hsl[1]) + parseInt(ohsl[1]));
|
||||
let l = (parseInt(hsl[2]) + parseInt(ohsl[2]));
|
||||
|
||||
let hex = hslToHex(h, Math.min(Math.max(s, 0), 100), Math.min(Math.max(l, 0), 100));
|
||||
|
||||
colcomp.value = hex;
|
||||
function offsetColorsHSV(ohsl) {
|
||||
let inner_styles = "";
|
||||
|
||||
hslobj[key] = "hsl(" + h+"deg " + s + "% "+ l +"%)";
|
||||
inner_styles += key + ':' + hslobj[key] + ';';
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
inner_styles += key + ':' + styleobj[key] + ';';
|
||||
}
|
||||
for (const key in styleobj) {
|
||||
let keyVal = styleobj[key];
|
||||
|
||||
}
|
||||
|
||||
isColorsInv = false;
|
||||
|
||||
const preview_styles = gradioApp().querySelector('#preview-styles');
|
||||
preview_styles.innerHTML = ':root {'+ inner_styles +'}';
|
||||
preview_styles.innerHTML +='@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}';
|
||||
if (keyVal.indexOf("#") != -1 || keyVal.indexOf("hsl") != -1) {
|
||||
let colcomp = gradioApp().querySelector("#" + key + " input");
|
||||
if (colcomp) {
|
||||
let hsl;
|
||||
|
||||
|
||||
const vars_textarea = gradioApp().querySelector('#theme_vars textarea');
|
||||
vars_textarea.value = inner_styles;
|
||||
if (keyVal.indexOf("#") != -1) {
|
||||
keyVal = keyVal.replace(/\s+/g, "");
|
||||
//inv ? keyVal = invertColor(keyVal) : 0;
|
||||
if (isColorsInv) {
|
||||
keyVal = invertColor(keyVal);
|
||||
styleobj[key] = keyVal;
|
||||
}
|
||||
hsl = rgbToHsl(hexToRgb(keyVal));
|
||||
} else {
|
||||
if (isColorsInv) {
|
||||
let c = toHSLArray(keyVal);
|
||||
let hex = hslToHex(c[0], c[1], c[2]);
|
||||
keyVal = invertColor(hex);
|
||||
styleobj[key] = keyVal;
|
||||
hsl = rgbToHsl(hexToRgb(keyVal));
|
||||
} else {
|
||||
hsl = toHSLArray(keyVal);
|
||||
}
|
||||
}
|
||||
|
||||
const inputEvent = new Event("input");
|
||||
Object.defineProperty(inputEvent, "target", {value: vars_textarea})
|
||||
vars_textarea.dispatchEvent(inputEvent);
|
||||
|
||||
let h = (parseInt(hsl[0]) + parseInt(ohsl[0])) % 360;
|
||||
let s = parseInt(hsl[1]) + parseInt(ohsl[1]);
|
||||
let l = parseInt(hsl[2]) + parseInt(ohsl[2]);
|
||||
|
||||
let hex = hslToHex(
|
||||
h,
|
||||
Math.min(Math.max(s, 0), 100),
|
||||
Math.min(Math.max(l, 0), 100)
|
||||
);
|
||||
|
||||
colcomp.value = hex;
|
||||
|
||||
hslobj[key] = "hsl(" + h + "deg " + s + "% " + l + "%)";
|
||||
inner_styles += key + ":" + hslobj[key] + ";";
|
||||
}
|
||||
} else {
|
||||
inner_styles += key + ":" + styleobj[key] + ";";
|
||||
}
|
||||
}
|
||||
|
||||
isColorsInv = false;
|
||||
|
||||
const preview_styles = gradioApp().querySelector("#preview-styles");
|
||||
preview_styles.innerHTML = ":root {" + inner_styles + "}";
|
||||
preview_styles.innerHTML +=
|
||||
"@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";
|
||||
|
||||
const vars_textarea = gradioApp().querySelector("#theme_vars textarea");
|
||||
vars_textarea.value = inner_styles;
|
||||
|
||||
const inputEvent = new Event("input");
|
||||
Object.defineProperty(inputEvent, "target", { value: vars_textarea });
|
||||
vars_textarea.dispatchEvent(inputEvent);
|
||||
}
|
||||
|
||||
function updateTheme(vars){
|
||||
|
||||
let inner_styles = "";
|
||||
|
||||
for (let i=0; i<vars.length-1; i++) {
|
||||
let key = vars[i].split(":");
|
||||
let id = key[0].replace(/\s+/g, "");;
|
||||
let val = key[1].trim();
|
||||
|
||||
styleobj[id] = val;
|
||||
inner_styles += id + ':' + val + ';';
|
||||
|
||||
gradioApp().querySelectorAll('#'+id+' input').forEach((elem) => {
|
||||
if(val.indexOf("hsl") != -1){
|
||||
let hsl = toHSLArray(val);
|
||||
let hex = hslToHex(hsl[0], hsl[1], hsl[2]);
|
||||
elem.value = hex;
|
||||
}else{
|
||||
elem.value = val.split("px")[0];
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const preview_styles = gradioApp().querySelector('#preview-styles');
|
||||
|
||||
if(preview_styles){
|
||||
preview_styles.innerHTML = ':root {'+ inner_styles +'}';
|
||||
preview_styles.innerHTML +='@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}';
|
||||
}else{
|
||||
|
||||
const r = gradioApp();
|
||||
const style = document.createElement('style');
|
||||
style.id="preview-styles";
|
||||
style.innerHTML = ':root {'+ inner_styles +'}';
|
||||
style.innerHTML +='@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}';
|
||||
r.appendChild(style);
|
||||
}
|
||||
|
||||
const vars_textarea = gradioApp().querySelector('#theme_vars textarea');
|
||||
const css_textarea = gradioApp().querySelector('#theme_css textarea');
|
||||
|
||||
vars_textarea.value = inner_styles;
|
||||
css_textarea.value = css_textarea.value;
|
||||
|
||||
//console.log(Object);
|
||||
function updateTheme(vars) {
|
||||
let inner_styles = "";
|
||||
|
||||
const vEvent = new Event("input");
|
||||
const cEvent = new Event("input");
|
||||
Object.defineProperty(vEvent, "target", {value: vars_textarea})
|
||||
Object.defineProperty(cEvent, "target", {value: css_textarea})
|
||||
vars_textarea.dispatchEvent(vEvent);
|
||||
css_textarea.dispatchEvent(cEvent);
|
||||
|
||||
for (let i = 0; i < vars.length - 1; i++) {
|
||||
let key = vars[i].split(":");
|
||||
let id = key[0].replace(/\s+/g, "");
|
||||
let val = key[1].trim();
|
||||
|
||||
styleobj[id] = val;
|
||||
inner_styles += id + ":" + val + ";";
|
||||
|
||||
gradioApp()
|
||||
.querySelectorAll("#" + id + " input")
|
||||
.forEach((elem) => {
|
||||
if (val.indexOf("hsl") != -1) {
|
||||
let hsl = toHSLArray(val);
|
||||
let hex = hslToHex(hsl[0], hsl[1], hsl[2]);
|
||||
elem.value = hex;
|
||||
} else {
|
||||
elem.value = val.split("px")[0];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const preview_styles = gradioApp().querySelector("#preview-styles");
|
||||
|
||||
if (preview_styles) {
|
||||
preview_styles.innerHTML = ":root {" + inner_styles + "}";
|
||||
preview_styles.innerHTML +=
|
||||
"@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";
|
||||
} else {
|
||||
const r = gradioApp();
|
||||
const style = document.createElement("style");
|
||||
style.id = "preview-styles";
|
||||
style.innerHTML = ":root {" + inner_styles + "}";
|
||||
style.innerHTML +=
|
||||
"@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";
|
||||
r.appendChild(style);
|
||||
}
|
||||
|
||||
const vars_textarea = gradioApp().querySelector("#theme_vars textarea");
|
||||
const css_textarea = gradioApp().querySelector("#theme_css textarea");
|
||||
|
||||
vars_textarea.value = inner_styles;
|
||||
css_textarea.value = css_textarea.value;
|
||||
|
||||
//console.log(Object);
|
||||
|
||||
const vEvent = new Event("input");
|
||||
const cEvent = new Event("input");
|
||||
Object.defineProperty(vEvent, "target", { value: vars_textarea });
|
||||
Object.defineProperty(cEvent, "target", { value: css_textarea });
|
||||
vars_textarea.dispatchEvent(vEvent);
|
||||
css_textarea.dispatchEvent(cEvent);
|
||||
}
|
||||
|
||||
function applyTheme(){
|
||||
console.log("apply");
|
||||
function applyTheme() {
|
||||
console.log("apply");
|
||||
}
|
||||
|
||||
function initTheme() {
|
||||
function initTheme() {
|
||||
const current_style = gradioApp().querySelector(".gradio-container > style");
|
||||
//console.log(current_style);
|
||||
//const head = document.head;
|
||||
//head.appendChild(current_style);
|
||||
|
||||
const css_styles = current_style.innerHTML.split(
|
||||
"/*BREAKPOINT_CSS_CONTENT*/"
|
||||
);
|
||||
let init_css_vars = css_styles[0].split("}")[0].split("{")[1];
|
||||
init_css_vars = init_css_vars.replace(/\n|\r/g, "");
|
||||
|
||||
const current_style = gradioApp().querySelector('.gradio-container > style');
|
||||
//console.log(current_style);
|
||||
//const head = document.head;
|
||||
//head.appendChild(current_style);
|
||||
let init_vars = init_css_vars.split(";");
|
||||
let vars = init_vars;
|
||||
|
||||
const css_styles = current_style.innerHTML.split("/*BREAKPOINT_CSS_CONTENT*/");
|
||||
let init_css_vars = css_styles[0].split("}")[0].split("{")[1];
|
||||
init_css_vars = init_css_vars.replace(/\n|\r/g, "");
|
||||
//console.log(vars);
|
||||
|
||||
let init_vars = init_css_vars.split(";");
|
||||
let vars = init_vars;
|
||||
|
||||
//console.log(vars);
|
||||
|
||||
const vars_textarea = gradioApp().querySelector('#theme_vars textarea');
|
||||
const css_textarea = gradioApp().querySelector('#theme_css textarea');
|
||||
//const result_textarea = gradioApp().querySelector('#theme_result textarea');
|
||||
vars_textarea.value = init_css_vars;
|
||||
css_textarea.value = "/*BREAKPOINT_CSS_CONTENT*/" + css_styles[1] + "/*BREAKPOINT_CSS_CONTENT*/";
|
||||
|
||||
updateTheme(vars);
|
||||
|
||||
//vars_textarea.addEventListener("change", function(e) {
|
||||
//e.preventDefault();
|
||||
//e.stopPropagation();
|
||||
//vars = vars_textarea.value.split(";");
|
||||
//console.log(e);
|
||||
//updateTheme(vars);
|
||||
|
||||
//})
|
||||
const vars_textarea = gradioApp().querySelector("#theme_vars textarea");
|
||||
const css_textarea = gradioApp().querySelector("#theme_css textarea");
|
||||
//const result_textarea = gradioApp().querySelector('#theme_result textarea');
|
||||
vars_textarea.value = init_css_vars;
|
||||
css_textarea.value =
|
||||
"/*BREAKPOINT_CSS_CONTENT*/" + css_styles[1] + "/*BREAKPOINT_CSS_CONTENT*/";
|
||||
|
||||
const preview_styles = gradioApp().querySelector('#preview-styles');
|
||||
let intervalChange;
|
||||
updateTheme(vars);
|
||||
|
||||
//vars_textarea.addEventListener("change", function(e) {
|
||||
//e.preventDefault();
|
||||
//e.stopPropagation();
|
||||
//vars = vars_textarea.value.split(";");
|
||||
//console.log(e);
|
||||
//updateTheme(vars);
|
||||
|
||||
//})
|
||||
|
||||
gradioApp().querySelectorAll('#ui_theme_settings input').forEach((elem) => {
|
||||
|
||||
elem.addEventListener("input", function(e) {
|
||||
const preview_styles = gradioApp().querySelector("#preview-styles");
|
||||
let intervalChange;
|
||||
|
||||
let celem = e.currentTarget;
|
||||
let val = e.currentTarget.value;
|
||||
let curr_val;
|
||||
|
||||
switch(e.currentTarget.type) {
|
||||
case "range":
|
||||
celem = celem.parentElement;
|
||||
val = e.currentTarget.value+"px";
|
||||
break;
|
||||
case "color":
|
||||
celem = celem.parentElement.parentElement;
|
||||
val = e.currentTarget.value;
|
||||
break;
|
||||
case "number":
|
||||
celem = celem.parentElement.parentElement.parentElement;
|
||||
val = e.currentTarget.value+"px";
|
||||
break;
|
||||
}
|
||||
|
||||
styleobj[celem.id] = val;
|
||||
|
||||
//console.log(styleobj);
|
||||
|
||||
|
||||
if(intervalChange != null) clearInterval(intervalChange);
|
||||
intervalChange = setTimeout(() => {
|
||||
let inner_styles = "";
|
||||
|
||||
for (const key in styleobj) {
|
||||
inner_styles += key + ':' + styleobj[key] + ';';
|
||||
}
|
||||
|
||||
vars = inner_styles.split(";");
|
||||
preview_styles.innerHTML = ':root {'+ inner_styles +'}';
|
||||
preview_styles.innerHTML +='@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}';
|
||||
gradioApp()
|
||||
.querySelectorAll("#ui_theme_settings input")
|
||||
.forEach((elem) => {
|
||||
elem.addEventListener("input", function (e) {
|
||||
let celem = e.currentTarget;
|
||||
let val = e.currentTarget.value;
|
||||
let curr_val;
|
||||
|
||||
vars_textarea.value = inner_styles;
|
||||
const vEvent = new Event("input");
|
||||
Object.defineProperty(vEvent, "target", {value: vars_textarea})
|
||||
vars_textarea.dispatchEvent(vEvent);
|
||||
|
||||
offsetColorsHSV(hsloffset);
|
||||
}, 1000)
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
switch (e.currentTarget.type) {
|
||||
case "range":
|
||||
celem = celem.parentElement;
|
||||
val = e.currentTarget.value + "px";
|
||||
break;
|
||||
case "color":
|
||||
celem = celem.parentElement.parentElement;
|
||||
val = e.currentTarget.value;
|
||||
break;
|
||||
case "number":
|
||||
celem = celem.parentElement.parentElement.parentElement;
|
||||
val = e.currentTarget.value + "px";
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
const reset_btn = gradioApp().getElementById('theme_reset_btn');
|
||||
reset_btn.addEventListener("click", function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
gradioApp().querySelectorAll('#ui_theme_hsv input').forEach((elem) => {
|
||||
elem.value = 0;
|
||||
})
|
||||
hsloffset = [0,0,0];
|
||||
updateTheme(init_vars);
|
||||
})
|
||||
|
||||
/*
|
||||
styleobj[celem.id] = val;
|
||||
|
||||
//console.log(styleobj);
|
||||
|
||||
if (intervalChange != null) clearInterval(intervalChange);
|
||||
intervalChange = setTimeout(() => {
|
||||
let inner_styles = "";
|
||||
|
||||
for (const key in styleobj) {
|
||||
inner_styles += key + ":" + styleobj[key] + ";";
|
||||
}
|
||||
|
||||
vars = inner_styles.split(";");
|
||||
preview_styles.innerHTML = ":root {" + inner_styles + "}";
|
||||
preview_styles.innerHTML +=
|
||||
"@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";
|
||||
|
||||
vars_textarea.value = inner_styles;
|
||||
const vEvent = new Event("input");
|
||||
Object.defineProperty(vEvent, "target", { value: vars_textarea });
|
||||
vars_textarea.dispatchEvent(vEvent);
|
||||
|
||||
offsetColorsHSV(hsloffset);
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
|
||||
const reset_btn = gradioApp().getElementById("theme_reset_btn");
|
||||
reset_btn.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
gradioApp()
|
||||
.querySelectorAll("#ui_theme_hsv input")
|
||||
.forEach((elem) => {
|
||||
elem.value = 0;
|
||||
});
|
||||
hsloffset = [0, 0, 0];
|
||||
updateTheme(init_vars);
|
||||
});
|
||||
|
||||
/*
|
||||
const apply_btn = gradioApp().getElementById('theme_apply_btn');
|
||||
apply_btn.addEventListener("click", function(e) {
|
||||
e.preventDefault();
|
||||
@@ -366,88 +352,84 @@ function initTheme() {
|
||||
updateTheme(vars);
|
||||
})
|
||||
*/
|
||||
|
||||
let intervalCheck;
|
||||
function dropDownOnChange(){
|
||||
|
||||
if(init_css_vars != vars_textarea.value){
|
||||
clearInterval(intervalCheck);
|
||||
init_css_vars = vars_textarea.value.replace(/\n|\r/g, "");
|
||||
vars_textarea.value = init_css_vars;
|
||||
init_vars = init_css_vars.split(";");
|
||||
vars = init_vars;
|
||||
updateTheme(vars);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const drop_down = gradioApp().querySelector('#themes_drop_down');
|
||||
drop_down.addEventListener("click", function(e) {
|
||||
if(intervalCheck != null) clearInterval(intervalCheck);
|
||||
intervalCheck = setInterval(dropDownOnChange, 100);
|
||||
console.log("ok");
|
||||
})
|
||||
|
||||
let hsloffset = [0,0,0];
|
||||
|
||||
const hue = gradioApp().querySelectorAll('#theme_hue input').forEach((elem) => {
|
||||
elem.addEventListener("change", function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
hsloffset[0] = e.currentTarget.value;
|
||||
offsetColorsHSV(hsloffset);
|
||||
})
|
||||
})
|
||||
|
||||
const sat = gradioApp().querySelectorAll('#theme_sat input').forEach((elem) => {
|
||||
elem.addEventListener("change", function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
hsloffset[1] = e.currentTarget.value;
|
||||
offsetColorsHSV(hsloffset);
|
||||
})
|
||||
})
|
||||
|
||||
const brt = gradioApp().querySelectorAll('#theme_brt input').forEach((elem) => {
|
||||
elem.addEventListener("change", function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
hsloffset[2] = e.currentTarget.value;
|
||||
offsetColorsHSV(hsloffset);
|
||||
})
|
||||
})
|
||||
|
||||
const inv_btn = gradioApp().getElementById('theme_invert_btn');
|
||||
inv_btn.addEventListener("click", function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
isColorsInv = !isColorsInv;
|
||||
offsetColorsHSV(hsloffset);
|
||||
})
|
||||
|
||||
let intervalCheck;
|
||||
function dropDownOnChange() {
|
||||
if (init_css_vars != vars_textarea.value) {
|
||||
clearInterval(intervalCheck);
|
||||
init_css_vars = vars_textarea.value.replace(/\n|\r/g, "");
|
||||
vars_textarea.value = init_css_vars;
|
||||
init_vars = init_css_vars.split(";");
|
||||
vars = init_vars;
|
||||
updateTheme(vars);
|
||||
}
|
||||
}
|
||||
|
||||
const drop_down = gradioApp().querySelector("#themes_drop_down");
|
||||
drop_down.addEventListener("click", function (e) {
|
||||
if (intervalCheck != null) clearInterval(intervalCheck);
|
||||
intervalCheck = setInterval(dropDownOnChange, 100);
|
||||
//console.log("ok");
|
||||
});
|
||||
|
||||
let hsloffset = [0, 0, 0];
|
||||
|
||||
const hue = gradioApp()
|
||||
.querySelectorAll("#theme_hue input")
|
||||
.forEach((elem) => {
|
||||
elem.addEventListener("change", function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
hsloffset[0] = e.currentTarget.value;
|
||||
offsetColorsHSV(hsloffset);
|
||||
});
|
||||
});
|
||||
|
||||
const sat = gradioApp()
|
||||
.querySelectorAll("#theme_sat input")
|
||||
.forEach((elem) => {
|
||||
elem.addEventListener("change", function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
hsloffset[1] = e.currentTarget.value;
|
||||
offsetColorsHSV(hsloffset);
|
||||
});
|
||||
});
|
||||
|
||||
const brt = gradioApp()
|
||||
.querySelectorAll("#theme_brt input")
|
||||
.forEach((elem) => {
|
||||
elem.addEventListener("change", function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
hsloffset[2] = e.currentTarget.value;
|
||||
offsetColorsHSV(hsloffset);
|
||||
});
|
||||
});
|
||||
|
||||
const inv_btn = gradioApp().getElementById("theme_invert_btn");
|
||||
inv_btn.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
isColorsInv = !isColorsInv;
|
||||
offsetColorsHSV(hsloffset);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function observeGradioApp() {
|
||||
const observer = new MutationObserver(() => {
|
||||
const observer = new MutationObserver(() => {
|
||||
const block = gradioApp().getElementById("tab_ui_theme");
|
||||
if (block) {
|
||||
observer.disconnect();
|
||||
|
||||
const block = gradioApp().getElementById('tab_ui_theme');
|
||||
if (block) {
|
||||
observer.disconnect();
|
||||
|
||||
setTimeout(() => {
|
||||
initTheme();
|
||||
}, "500")
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
observer.observe(gradioApp(), { childList: true, subtree: true });
|
||||
setTimeout(() => {
|
||||
initTheme();
|
||||
}, "500");
|
||||
}
|
||||
});
|
||||
observer.observe(gradioApp(), { childList: true, subtree: true });
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
observeGradioApp();
|
||||
observeGradioApp();
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
--ae-main-bg-color:hsl(210deg 28% 8%);--ae-primary-color:hsl(18deg 124% 42%);--ae-input-bg-color:hsl(210deg 28% 10%);--ae-input-border-color:hsl(210deg 28% 10%);--ae-panel-bg-color:hsl(210deg 28% 17%);--ae-panel-border-color:hsl(210deg 28% 17%);--ae-panel-border-radius:4px;--ae-subgroup-bg-color:hsl(210deg 28% 10%);--ae-subgroup-input-bg-color:hsl(210deg 28% 10%);--ae-subgroup-input-border-color:hsl(210deg 28% 10%);--ae-subpanel-bg-color:hsl(210deg 28% 14%);--ae-subpanel-border-color:hsl(210deg 28% 15%);--ae-subpanel-border-radius:4px;--ae-textarea-focus-color:hsl(210deg 28% 36%);--ae-input-focus-color:hsl(18deg 125% 41%);--ae-outside-gap-size:8px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-cancel-color:hsl(210deg 112% 60%);--ae-max-padding:max(var(--ae-outside-gap-size),var(--ae-inside-padding-size));--ae-icon-color:hsl(18deg 124% 42%);--ae-icon-hover-color:hsl(210deg 28% 10%);--ae-icon-size:22px;--ae-nav-bg-color:hsl(210deg 28% 4%);--ae-nav-color:hsl(210deg 28% 80%);--ae-nav-hover-color:hsl(210deg 28% 4%);--ae-input-color:hsl(60deg 32% 80%);--ae-label-color:hsl(210deg 28% 65%);--ae-subgroup-input-color:hsl(210deg 128% 100%);--ae-placeholder-color:hsl(210deg 28% 30%);--ae-text-color:hsl(210deg 28% 80%);--ae-mobile-outside-gap-size:3px;--ae-mobile-inside-padding-size:3px;--ae-frame-bg-color:hsl(210deg 28% 14%);--ae-modal-bg-color:hsl(210deg 28% 10%);--ae-modal-icon-color:hsl(18deg 125% 41%);
|
||||
Reference in New Issue
Block a user