Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 05:04:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

support theming username colors

Browse Source
This commit is contained in:
Bruno Windels 2020-04-27 17:31:22 +02:00
parent 2f68f608c5
commit b1870660d8
2 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
res/themes/light-custom/css/_custom.scss
View File

@ -125,3 +125,12 @@ $notice-primary-color: var(--warning-color);
$pinned-unread-color: var(--warning-color);
$warning-color: var(--warning-color);
$button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5
$username-variant1-color: var(--username-colors_1, $username-variant1-color);
$username-variant2-color: var(--username-colors_2, $username-variant2-color);
$username-variant3-color: var(--username-colors_3, $username-variant3-color);
$username-variant4-color: var(--username-colors_4, $username-variant4-color);
$username-variant5-color: var(--username-colors_5, $username-variant5-color);
$username-variant6-color: var(--username-colors_6, $username-variant6-color);
$username-variant7-color: var(--username-colors_7, $username-variant7-color);
$username-variant8-color: var(--username-colors_8, $username-variant8-color);

20
src/theme.js
View File

@ -141,17 +141,31 @@ export function enumerateThemes() {
return Object.assign({}, customThemeNames, BUILTIN_THEMES);
}
function setCustomThemeVars(customTheme) {
const {style} = document.body;
if (customTheme.colors) {
for (const [name, hexColor] of Object.entries(customTheme.colors)) {
style.setProperty(`--${name}`, hexColor);
function setCSSVariable(name, hexColor, doPct = true) {
style.setProperty(`--${name}`, hexColor);
if (doPct) {
// uses #rrggbbaa to define the color with alpha values at 0% and 50%
style.setProperty(`--${name}-0pct`, hexColor + "00");
style.setProperty(`--${name}-15pct`, hexColor + "26");
style.setProperty(`--${name}-50pct`, hexColor + "7F");
}
}
if (customTheme.colors) {
for (const [name, value] of Object.entries(customTheme.colors)) {
if (Array.isArray(value)) {
for (let i = 0; i < value.length; i += 1) {
setCSSVariable(`${name}_${i}`, value[i], false);
}
} else {
setCSSVariable(name, value);
}
}
}
}
function getCustomTheme(themeName) {