mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-11-28 22:11:41 +01:00
Code Issues Projects Releases Wiki Activity

Fix custom theme support for short hex & rgba hex strings (#29726)

Browse Source 
* Fix custom theme support for hex colours other than 6-char

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2025-04-14 09:31:21 +01:00 committed by GitHub
parent 779543fa0f
commit 1430fd5af6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 86 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/theme.ts
View File

@ -129,7 +129,7 @@ function clearCustomTheme(): void {
// remove all css variables, we assume these are there because of the custom theme
const inlineStyleProps = Object.values(document.body.style);
for (const prop of inlineStyleProps) {
if (prop.startsWith("--")) {
if (typeof prop === "string" && prop.startsWith("--")) {
document.body.style.removeProperty(prop);
}
}
@ -206,16 +206,49 @@ function generateCustomCompoundCSS(theme: CompoundTheme): string {
return `@layer compound.custom { :root, [class*="cpd-theme-"] { ${properties.join(" ")} } }`;
}
/**
* Normalizes the hex colour to 8 characters (including alpha)
* @param hexColor the hex colour to normalize
*/
function normalizeHexColour(hexColor: string): string {
switch (hexColor.length) {
case 4:
case 5:
// Short RGB or RGBA hex
return `#${hexColor
.slice(1)
.split("")
.map((c) => c + c)
.join("")}`;
case 7:
// Long RGB hex
return `${hexColor}ff`;
default:
return hexColor;
}
}
function setHexAlpha(normalizedHexColor: string, alpha: number): string {
return normalizeHexColour(normalizedHexColor).slice(0, 7) + Math.round(alpha).toString(16).padStart(2, "0");
}
function parseAlpha(normalizedHexColor: string): number {
return parseInt(normalizedHexColor.slice(7), 16);
}
function setCustomThemeVars(customTheme: CustomTheme): void {
const { style } = document.body;
function setCSSColorVariable(name: string, hexColor: string, doPct = true): void {
style.setProperty(`--${name}`, hexColor);
const normalizedHexColor = normalizeHexColour(hexColor);
const baseAlpha = parseAlpha(normalizedHexColor);
if (doPct) {
// uses #rrggbbaa to define the color with alpha values at 0%, 15% and 50%
style.setProperty(`--${name}-0pct`, hexColor + "00");
style.setProperty(`--${name}-15pct`, hexColor + "26");
style.setProperty(`--${name}-50pct`, hexColor + "7F");
// uses #rrggbbaa to define the color with alpha values at 0%, 15% and 50% (relative to base alpha channel)
style.setProperty(`--${name}-0pct`, setHexAlpha(normalizedHexColor, 0));
style.setProperty(`--${name}-15pct`, setHexAlpha(normalizedHexColor, baseAlpha * 0.15));
style.setProperty(`--${name}-50pct`, setHexAlpha(normalizedHexColor, baseAlpha * 0.5));
}
}

48
test/unit-tests/theme-test.ts
View File

@ -135,6 +135,54 @@ describe("theme", () => {
expect(spy.mock.calls[0][0].textContent).toMatchSnapshot();
spy.mockRestore();
});
it("should handle 4-char rgba hex strings", async () => {
jest.spyOn(SettingsStore, "getValue").mockReturnValue([
{
name: "blue",
colors: {
"sidebar-color": "#abcd",
},
},
]);
const spy = jest.fn();
jest.spyOn(document.body, "style", "get").mockReturnValue({
setProperty: spy,
} as any);
await new Promise((resolve) => {
setTheme("custom-blue").then(resolve);
lightCustomTheme.onload!({} as Event);
});
expect(spy).toHaveBeenCalledWith("--sidebar-color", "#abcd");
expect(spy).toHaveBeenCalledWith("--sidebar-color-0pct", "#aabbcc00");
expect(spy).toHaveBeenCalledWith("--sidebar-color-15pct", "#aabbcc21");
expect(spy).toHaveBeenCalledWith("--sidebar-color-50pct", "#aabbcc6f");
});
it("should handle 6-char rgb hex strings", async () => {
jest.spyOn(SettingsStore, "getValue").mockReturnValue([
{
name: "blue",
colors: {
"sidebar-color": "#abcdef",
},
},
]);
const spy = jest.fn();
jest.spyOn(document.body, "style", "get").mockReturnValue({
setProperty: spy,
} as any);
await new Promise((resolve) => {
setTheme("custom-blue").then(resolve);
lightCustomTheme.onload!({} as Event);
});
expect(spy).toHaveBeenCalledWith("--sidebar-color", "#abcdef");
expect(spy).toHaveBeenCalledWith("--sidebar-color-0pct", "#abcdef00");
expect(spy).toHaveBeenCalledWith("--sidebar-color-15pct", "#abcdef26");
expect(spy).toHaveBeenCalledWith("--sidebar-color-50pct", "#abcdef80");
});
});
describe("enumerateThemes", () => {