mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-06-23 19:31:38 +02:00
added a theme dropdown box
This commit is contained in:
parent
03bd9a5731
commit
351b17d1d9
@ -34,6 +34,7 @@
|
||||
<ul id="system-settings-entries">
|
||||
<li><b class="settings-subheader">System Settings</b></li>
|
||||
<br/>
|
||||
<li><label for="theme">Theme: </label><select id="theme" name="theme"><option value="theme-default">Default</option></select></li>
|
||||
<li><input id="save_to_disk" name="save_to_disk" type="checkbox"> <label for="save_to_disk">Automatically save to <input id="diskPath" name="diskPath" size="40" disabled></label></li>
|
||||
<li><input id="sound_toggle" name="sound_toggle" type="checkbox" checked> <label for="sound_toggle">Play sound on task completion</label></li>
|
||||
<li><input id="turbo" name="turbo" type="checkbox" checked> <label for="turbo">Turbo mode <small>(generates images faster, but uses an additional 1 GB of GPU memory)</small></label></li>
|
||||
|
@ -26,9 +26,7 @@
|
||||
--make-image-border: 2px solid hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) - 21%));
|
||||
}
|
||||
|
||||
|
||||
/* Light Theme */
|
||||
/* :root {
|
||||
.theme-light {
|
||||
--background-color1: white;
|
||||
--background-color2: #dddddd;
|
||||
--background-color3: #e7e9eb;
|
||||
@ -39,11 +37,9 @@
|
||||
--input-text-color: black;
|
||||
--input-background-color: #f8f9fa;
|
||||
--input-border-color: grey;
|
||||
} */
|
||||
}
|
||||
|
||||
|
||||
/* Discord Theme */
|
||||
/* :root {
|
||||
.theme-discord {
|
||||
--background-color1: #36393f;
|
||||
--background-color2: #2f3136;
|
||||
--background-color3: #292b2f;
|
||||
@ -60,10 +56,9 @@
|
||||
--input-border-size: 2px;
|
||||
--input-background-color: #202225;
|
||||
--input-border-color: var(--input-background-color);
|
||||
} */
|
||||
}
|
||||
|
||||
/* Example "Custom" Theme */
|
||||
/* :root {
|
||||
.theme-fancy {
|
||||
--main-hue: 222;
|
||||
--main-saturation: 18%;
|
||||
--value-base: 19%;
|
||||
@ -83,12 +78,13 @@
|
||||
--input-background-color: var(--background-color3);
|
||||
--input-text-color: #ccc;
|
||||
--input-border-color: var(--background-color4);
|
||||
} */
|
||||
}
|
||||
|
||||
|
||||
* {
|
||||
font-family: Work Sans, Verdana, Geneva, sans-serif;
|
||||
box-sizing: border-box;
|
||||
transition: background 0.5s, color 0.5s, background-color 0.5s;
|
||||
}
|
||||
|
||||
body {
|
||||
|
@ -46,6 +46,7 @@ let useFullPrecisionField = document.querySelector('#use_full_precision')
|
||||
let saveToDiskField = document.querySelector('#save_to_disk')
|
||||
let diskPathField = document.querySelector('#diskPath')
|
||||
let autoSaveSettingsField = document.querySelector('#auto_save_settings')
|
||||
let themeField = document.querySelector('#theme')
|
||||
// let allowNSFWField = document.querySelector("#allow_nsfw")
|
||||
let useBetaChannelField = document.querySelector("#use_beta_channel")
|
||||
let promptStrengthSlider = document.querySelector('#prompt_strength_slider')
|
||||
@ -1743,4 +1744,49 @@ async function loadModifiers() {
|
||||
} catch (e) {
|
||||
console.log('error fetching modifiers', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var THEMES = []; // initialized in initTheme from data in css
|
||||
|
||||
function getThemeName(theme) {
|
||||
theme = theme.replace("theme-", "");
|
||||
theme = theme.split("-").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
|
||||
return theme;
|
||||
}
|
||||
// init themefield
|
||||
function initTheme() {
|
||||
Array.from(document.styleSheets)
|
||||
.filter(sheet => sheet.href.startsWith(window.location.origin))
|
||||
.flatMap(sheet => Array.from(sheet.cssRules))
|
||||
.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,
|
||||
name: getThemeName(theme_key),
|
||||
rule: rule
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
THEMES.forEach(theme => {
|
||||
var new_option = document.createElement("option");
|
||||
new_option.setAttribute("value", theme.key);
|
||||
new_option.innerText = theme.name;
|
||||
themeField.appendChild(new_option);
|
||||
});
|
||||
}
|
||||
initTheme();
|
||||
|
||||
function themeFieldChanged() {
|
||||
var theme = themeField.value;
|
||||
console.log("Theme: ", theme);
|
||||
|
||||
var body = document.querySelector("body");
|
||||
body.classList.remove(...THEMES.map(theme => theme.key));
|
||||
body.classList.add(theme);
|
||||
}
|
||||
|
||||
themeField.addEventListener('change', themeFieldChanged);
|
||||
|
Loading…
x
Reference in New Issue
Block a user