extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-02-23 22:01:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

fixed theme css properties not being updated properly

Browse Source
This commit is contained in:
Malcolm Diller 2022-12-21 16:03:52 -08:00
parent bacf266f0d
commit 582b2d936f
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/media/js/themes.js
View File

@ -13,8 +13,15 @@ function initTheme() {
.filter(sheet => sheet.href?.startsWith(window.location.origin)) .filter(sheet => sheet.href?.startsWith(window.location.origin))
.flatMap(sheet => Array.from(sheet.cssRules)) .flatMap(sheet => Array.from(sheet.cssRules))
.forEach(rule => { .forEach(rule => {
var selector = rule.selectorText; // TODO: also do selector == ":root", re-run un-set props var selector = rule.selectorText;
if (selector && selector.startsWith(".theme-") && !selector.includes(" ")) { if (selector && selector.startsWith(".theme-") && !selector.includes(" ")) {
if (DEFAULT_THEME) { // re-add props that dont change (css needs this so they update correctly)
Array.from(DEFAULT_THEME.rule.style)
.filter(cssVariable => !Array.from(rule.style).includes(cssVariable))
.forEach(cssVariable => {
rule.style.setProperty(cssVariable, DEFAULT_THEME.rule.style.getPropertyValue(cssVariable));
});
}
var theme_key = selector.substring(1); var theme_key = selector.substring(1);
THEMES.push({ THEMES.push({
key: theme_key, key: theme_key,
@ -62,12 +69,6 @@ function themeFieldChanged() {
var theme = THEMES.find(t => t.key == theme_key); var theme = THEMES.find(t => t.key == theme_key);
let borderColor = undefined let borderColor = undefined
if (theme) { if (theme) {
// refresh variables incase they are back referencing
Array.from(DEFAULT_THEME.rule.style)
.filter(cssVariable => !Array.from(theme.rule.style).includes(cssVariable))
.forEach(cssVariable => {
body.style.setProperty(cssVariable, DEFAULT_THEME.rule.style.getPropertyValue(cssVariable));
});
borderColor = theme.rule.style.getPropertyValue('--input-border-color').trim() borderColor = theme.rule.style.getPropertyValue('--input-border-color').trim()
if (!borderColor.startsWith('#')) { if (!borderColor.startsWith('#')) {
borderColor = theme.rule.style.getPropertyValue('--theme-color-fallback') borderColor = theme.rule.style.getPropertyValue('--theme-color-fallback')