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

updated to behave better and apply variables that are dependant

Browse Source
This commit is contained in:
Malcolm Diller 2022-10-17 23:00:08 -07:00
parent f170c2611c
commit da8835bc77
4 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/index.html
View File

@ -43,6 +43,7 @@
<li>
<input id="auto_save_settings" name="auto_save_settings" type="checkbox">
<label for="auto_save_settings">Automatically save settings <small>(settings restored on browser load)</small></label>
<br/>
<button id="configureSettingsSaveBtn">Configure</button>
<button id="restoreDefaultSettingsBtn">Restore Defaults</button>
</li>

3
ui/media/auto-save.js
View File

@ -28,7 +28,8 @@ var SETTINGS_IDS_LIST = [
"show_only_filtered_image",
"upscale_model",
"preview-image",
"modifier-card-size-slider"
"modifier-card-size-slider",
"theme"
]
async function initSettings() {

3
ui/media/main.css
View File

@ -560,7 +560,8 @@ img {
button,
input[type="file"],
input[type="checkbox"],
select {
select,
option {
cursor: pointer;
}

25
ui/media/main.js
View File

@ -1746,6 +1746,7 @@ async function loadModifiers() {
}
}
var DEFAULT_THEME = {};
var THEMES = []; // initialized in initTheme from data in css
function getThemeName(theme) {
@ -1761,7 +1762,6 @@ function initTheme() {
.forEach(rule => {
var selector = rule.selectorText; // TODO: also do selector == ":root", re-run un-set props
if (selector && selector.startsWith(".theme-")) {
console.dir(theme_key, rule.style.length);
var theme_key = selector.substring(1);
THEMES.push({
key: theme_key,
@ -1769,6 +1769,13 @@ function initTheme() {
rule: rule
})
}
if (selector && selector == ":root") {
DEFAULT_THEME = {
key: "theme-default",
name: "Default",
rule: rule
};
}
});
THEMES.forEach(theme => {
@ -1781,12 +1788,22 @@ function initTheme() {
initTheme();
function themeFieldChanged() {
var theme = themeField.value;
console.log("Theme: ", theme);
var theme_key = themeField.value;
var body = document.querySelector("body");
body.classList.remove(...THEMES.map(theme => theme.key));
body.classList.add(theme);
body.classList.add(theme_key);
body.style = "";
var theme = THEMES.find(t => t.key == theme_key);
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));
});
}
}
themeField.addEventListener('change', themeFieldChanged);