From b1870660d8d9282cbd1a47e6b0a2c4e05d5dc230 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 27 Apr 2020 17:31:22 +0200
Subject: [PATCH] support theming username colors

---
 res/themes/light-custom/css/_custom.scss |  9 +++++++++
 src/theme.js                             | 20 +++++++++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss
index 505fc3733b..64c4cac7e3 100644
--- a/res/themes/light-custom/css/_custom.scss
+++ b/res/themes/light-custom/css/_custom.scss
@@ -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);
diff --git a/src/theme.js b/src/theme.js
index 6bd81cc021..b7fbe40df4 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -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) {