OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

add support for dark theme

pull/21833/head
Bruno Windels 2019-10-01 17:00:29 +02:00
parent 15b7a5af31
commit fc6a68cd1d
2 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
res/themes/dark-custom/css/dark-custom.scss Normal file
View File

@ -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
View File

@ -30,11 +30,22 @@ export function enumerateThemes() {
for (const {name} of customThemes) { for (const {name} of customThemes) {
customThemeNames[`custom-${name}`] = name; customThemeNames[`custom-${name}`] = name;
} }
console.log("customThemeNames", customThemeNames);
return Object.assign({}, customThemeNames, BUILTIN_THEMES); 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 // set css variables
const customThemes = SettingsStore.getValue("custom_themes"); const customThemes = SettingsStore.getValue("custom_themes");
if (!customThemes) { if (!customThemes) {
@ -45,15 +56,7 @@ function setCustomThemeVars(themeName) {
const knownNames = customThemes.map(t => t.name).join(", "); const knownNames = customThemes.map(t => t.name).join(", ");
throw new Error(`Can't find custom theme "${themeName}", only know ${knownNames}`); throw new Error(`Can't find custom theme "${themeName}", only know ${knownNames}`);
} }
const {style} = document.body; return customTheme;
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");
}
}
} }
/** /**
@ -67,9 +70,9 @@ export function setTheme(theme) {
} }
let stylesheetName = theme; let stylesheetName = theme;
if (theme.startsWith("custom-")) { if (theme.startsWith("custom-")) {
stylesheetName = "light-custom"; const customTheme = getCustomTheme(theme.substr(7));
const themeName = theme.substr(7); stylesheetName = customTheme.is_dark ? "dark-custom" : "light-custom";
setCustomThemeVars(themeName); setCustomThemeVars(customTheme);
} }
// look for the stylesheet elements. // look for the stylesheet elements.