add support for dark theme
parent
15b7a5af31
commit
fc6a68cd1d
|
@ -0,0 +1,6 @@
|
|||
@import "../../light/css/_paths.scss";
|
||||
@import "../../light/css/_fonts.scss";
|
||||
@import "../../light/css/_light.scss";
|
||||
@import "../../dark/css/_dark.scss";
|
||||
@import "../../light-custom/css/_custom.scss";
|
||||
@import "../../../../res/css/_components.scss";
|
31
src/theme.js
31
src/theme.js
|
@ -30,11 +30,22 @@ export function enumerateThemes() {
|
|||
for (const {name} of customThemes) {
|
||||
customThemeNames[`custom-${name}`] = name;
|
||||
}
|
||||
console.log("customThemeNames", customThemeNames);
|
||||
return Object.assign({}, customThemeNames, BUILTIN_THEMES);
|
||||
}
|
||||
|
||||
function setCustomThemeVars(themeName) {
|
||||
function setCustomThemeVars(customTheme) {
|
||||
const {style} = document.body;
|
||||
if (customTheme.colors) {
|
||||
for (const [name, hexColor] of Object.entries(customTheme.colors)) {
|
||||
style.setProperty(`--${name}`, hexColor);
|
||||
// uses #rrggbbaa to define the color with alpha values at 0% and 50%
|
||||
style.setProperty(`--${name}-0pct`, hexColor + "00");
|
||||
style.setProperty(`--${name}-50pct`, hexColor + "7F");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getCustomTheme(themeName) {
|
||||
// set css variables
|
||||
const customThemes = SettingsStore.getValue("custom_themes");
|
||||
if (!customThemes) {
|
||||
|
@ -45,15 +56,7 @@ function setCustomThemeVars(themeName) {
|
|||
const knownNames = customThemes.map(t => t.name).join(", ");
|
||||
throw new Error(`Can't find custom theme "${themeName}", only know ${knownNames}`);
|
||||
}
|
||||
const {style} = document.body;
|
||||
if (customTheme.colors) {
|
||||
for (const [name, hexColor] of Object.entries(customTheme.colors)) {
|
||||
style.setProperty(`--${name}`, hexColor);
|
||||
// uses #rrggbbaa to define the color with alpha values at 0% and 50%
|
||||
style.setProperty(`--${name}-0pct`, hexColor + "00");
|
||||
style.setProperty(`--${name}-50pct`, hexColor + "7F");
|
||||
}
|
||||
}
|
||||
return customTheme;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -67,9 +70,9 @@ export function setTheme(theme) {
|
|||
}
|
||||
let stylesheetName = theme;
|
||||
if (theme.startsWith("custom-")) {
|
||||
stylesheetName = "light-custom";
|
||||
const themeName = theme.substr(7);
|
||||
setCustomThemeVars(themeName);
|
||||
const customTheme = getCustomTheme(theme.substr(7));
|
||||
stylesheetName = customTheme.is_dark ? "dark-custom" : "light-custom";
|
||||
setCustomThemeVars(customTheme);
|
||||
}
|
||||
|
||||
// look for the stylesheet elements.
|
||||
|
|
Loading…
Reference in New Issue