extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-05-01 14:54:59 +02: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> <li>
<input id="auto_save_settings" name="auto_save_settings" type="checkbox"> <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> <label for="auto_save_settings">Automatically save settings <small>(settings restored on browser load)</small></label>
<br/>
<button id="configureSettingsSaveBtn">Configure</button> <button id="configureSettingsSaveBtn">Configure</button>
<button id="restoreDefaultSettingsBtn">Restore Defaults</button> <button id="restoreDefaultSettingsBtn">Restore Defaults</button>
</li> </li>

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

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

3
ui/media/main.css
View File

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