diff --git a/extensions-builtin/sd_theme_editor/javascript/ui_theme.js b/extensions-builtin/sd_theme_editor/javascript/ui_theme.js index 9a42527d..1f065568 100644 --- a/extensions-builtin/sd_theme_editor/javascript/ui_theme.js +++ b/extensions-builtin/sd_theme_editor/javascript/ui_theme.js @@ -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 { - 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(); }); - diff --git a/extensions-builtin/sd_theme_editor/themes/minimal_orange.css b/extensions-builtin/sd_theme_editor/themes/minimal_orange.css new file mode 100644 index 00000000..ef2de97b --- /dev/null +++ b/extensions-builtin/sd_theme_editor/themes/minimal_orange.css @@ -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%); \ No newline at end of file