189 lines
6.8 KiB
JavaScript
189 lines
6.8 KiB
JavaScript
const THEME_OPTIONS = {
|
|
dark: {
|
|
"--background-primary": "#191724",
|
|
"--navbar-color": "#26233a",
|
|
"--navbar-height": "60px",
|
|
"--navbar-text-color": "#7967dd",
|
|
"--input-text-color": "#e0def4",
|
|
"--input-placeholder-color": "#6e6a86",
|
|
"--input-background-color": "#1f1d2e",
|
|
"--input-placeholder-color": "white",
|
|
"--input-border-color": "#eb6f92",
|
|
"--input-border-size": "1.3px",
|
|
"--navbar-link-color": "#e0def4",
|
|
"--navbar-font": '"Roboto"',
|
|
"--navbar-logo-filter": "invert(0%)",
|
|
"--text-color-primary": "#e0def4"
|
|
},
|
|
light: {
|
|
"--background-primary": "#d8d8d8",
|
|
"--navbar-color": "#a2a2a2",
|
|
"--navbar-height": "4em",
|
|
"--navbar-text-color": "#000000",
|
|
"--input-text-color": "#e0def4",
|
|
"--input-placeholder-color": "white",
|
|
"--input-background-color": "black",
|
|
"--input-border-color": "#eb6f92",
|
|
"--input-border-size": "1.3px",
|
|
"--navbar-link-color": "#000000",
|
|
"--navbar-font": '"Roboto"',
|
|
"--navbar-logo-filter": "invert(30%)",
|
|
"--text-color-primary": "#303030"
|
|
},
|
|
suit: {
|
|
"--background-primary": "#0c0c0c",
|
|
"--navbar-color": "#ff2e4e",
|
|
"--navbar-height": "4em",
|
|
"--navbar-text-color": "#000000",
|
|
"--input-text-color": "#e0def4",
|
|
"--input-placeholder-color": "white",
|
|
"--input-background-color": "#00000000",
|
|
"--input-border-color": "#ff346e",
|
|
"--input-border-size": "1.3px",
|
|
"--navbar-link-color": "#000000",
|
|
"--navbar-font": '"Roboto"',
|
|
"--navbar-logo-filter": "brightness(30)",
|
|
"--text-color-primary": "#00000"
|
|
},
|
|
metallic: {
|
|
"--background-primary": "#171717",
|
|
"--navbar-color": "#004953",
|
|
"--navbar-height": "4em",
|
|
"--navbar-text-color": "#ffffff",
|
|
"--input-text-color": "#e0def4",
|
|
"--input-placeholder-color": "white",
|
|
"--input-background-color": "#004953",
|
|
"--input-border-color": "#000000",
|
|
"--input-border-size": "1.3px",
|
|
"--navbar-link-color": "#e0def4",
|
|
"--navbar-font": '"Roboto"',
|
|
"--navbar-logo-filter": "invert(50%)",
|
|
"--text-color-primary": "#e0def4"
|
|
},
|
|
dante: {
|
|
"--background-primary": "#131313",
|
|
"--navbar-color": "#e4ff8b",
|
|
"--navbar-height": "3.5em",
|
|
"--navbar-text-color": "#000000",
|
|
"--input-text-color": "#000000",
|
|
"--input-placeholder-color": "000000",
|
|
"--input-background-color": "#e4ff8b",
|
|
"--input-border-color": "#00000000",
|
|
"--input-border-size": "1.3px",
|
|
"--navbar-link-color": "#000000",
|
|
"--navbar-font": '"Roboto"',
|
|
"--navbar-logo-filter": "brightness(0%)",
|
|
"--text-color-primary": "#000"
|
|
}
|
|
};
|
|
|
|
function changeCSS(property, value, isRoot = false) {
|
|
const root = document.documentElement;
|
|
isRoot
|
|
? root.style.setProperty(property, value)
|
|
: root.style.setProperty(property, value, "important");
|
|
}
|
|
|
|
function saveCSS(variable, value) {
|
|
localStorage.setItem(variable, value);
|
|
}
|
|
function applyTheme(theme) {
|
|
Object.entries(theme).forEach(([property, value]) => {
|
|
changeCSS(property, value);
|
|
localStorage.setItem(property, value);
|
|
});
|
|
}
|
|
|
|
function switchTheme() {
|
|
const selecter = document.getElementById("themeSwitcher");
|
|
const selectedOption = selecter.value;
|
|
console.log(selectedOption);
|
|
const theme = THEME_OPTIONS[selectedOption];
|
|
|
|
if (!theme) {
|
|
return;
|
|
}
|
|
|
|
applyTheme(theme);
|
|
localStorage.setItem("theme", selectedOption);
|
|
|
|
if (selectedOption == "custom") {
|
|
let startCustom = prompt(
|
|
"Would you like to have an interactive setup? Y/N",
|
|
""
|
|
);
|
|
if (startCustom == "Y" || startCustom == "y") {
|
|
alert(
|
|
"Welcome to the interactive setup. Please enter the following values. If you don't know what to enter, just press enter. They will default to Dark Mode."
|
|
);
|
|
let background = prompt(
|
|
"Background color || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #191724",
|
|
""
|
|
);
|
|
let navbar = prompt(
|
|
"Navbar color || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #26233a",
|
|
""
|
|
);
|
|
let navbarHeight = prompt(
|
|
"Navbar height || Possible Types: ABSOLUTE: cm, mm, Q, in, pc, pt, px RELATIVE: em, ex, ch, rem, lh, rlh, vw, vh, vb, vi || Default Value: 60px",
|
|
""
|
|
);
|
|
let navbarText = prompt(
|
|
"Navbar text color || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #7967dd",
|
|
""
|
|
);
|
|
let inputText = prompt(
|
|
"Input text color || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #e0def4",
|
|
""
|
|
);
|
|
let inputPlaceholder = prompt(
|
|
"Input placeholder color || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #6e6a86",
|
|
""
|
|
);
|
|
let inputBackground = prompt(
|
|
"Input background color || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #1f1d2e",
|
|
""
|
|
);
|
|
let inputBorder = prompt(
|
|
"Input border color || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #eb6f92",
|
|
""
|
|
);
|
|
let inputBorderSize = prompt(
|
|
"Input border size || Possible Types: ABSOLUTE: cm, mm, Q, in, pc, pt, px RELATIVE: em, ex, ch, rem, lh, rlh, vw, vh, vb, vi || Default Value: 1.3px",
|
|
""
|
|
);
|
|
let navbarFont = prompt(
|
|
'Navbar font || Enter a default font name, custom ones will likely not work. || Default Value: "Roboto"',
|
|
""
|
|
);
|
|
let navbarLink = prompt(
|
|
"Navbar link color || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #e0def4",
|
|
""
|
|
);
|
|
let navbarLogoFilter = prompt(
|
|
"Navbar logo filter || Adjust the NavBar-Logo-Filter. || Default Value: invert(0%)",
|
|
""
|
|
);
|
|
let textColorPrimary = prompt(
|
|
"Text color primary || Possible Types: Keywords, RGB, RBBA, HSL, HSLA, Hexadecimal. || Default Value: #e0def4",
|
|
""
|
|
);
|
|
localStorage.setItem("theme", "custom");
|
|
changeCSS("--background-primary", background, true);
|
|
changeCSS("--navbar-color", navbar, true);
|
|
changeCSS("--navbar-height", navbarHeight, true);
|
|
changeCSS("--navbar-text-color", navbarText, true);
|
|
changeCSS("--input-text-color", inputText, true);
|
|
changeCSS("--input-placeholder-color", inputPlaceholder, true);
|
|
changeCSS("--input-background-color", inputBackground, true);
|
|
changeCSS("--input-border-color", inputBorder, true);
|
|
changeCSS("--input-border-size", inputBorderSize, true);
|
|
changeCSS("--navbar-link-color", navbarLink, true);
|
|
changeCSS("--navbar-font", navbarFont, true);
|
|
changeCSS("--navbar-logo-filter", navbarLogoFilter, true);
|
|
changeCSS("--text-color-primary", textColorPrimary, true);
|
|
} else {
|
|
alert("Non-Interactive Setup Not supported yet.");
|
|
}
|
|
}
|
|
}
|