matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-07-28 15:22:05 +03:00
Code Activity

Enable custom themes to theme Compound (#12240)

Browse Source 
* Enable custom themes to theme Compound

* Remove the now redundant username color variables

They are replaced by the Compound theming options (specifically, username colors can be themed by changing the color of Compound's decorative color tokens).
This commit is contained in:
Robin
2024-02-13 09:07:58 -05:00
committed by GitHub
parent 203c15f205
commit 8bbad9f653
9 changed files with 77 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
test/theme-test.ts
View File

@ -21,31 +21,26 @@ describe("theme", () => {
describe("setTheme", () => {
let lightTheme: HTMLStyleElement;
let darkTheme: HTMLStyleElement;
let lightCustomTheme: HTMLStyleElement;
let spyQuerySelectorAll: jest.MockInstance<NodeListOf<Element>, [selectors: string]>;
let spyClassList: jest.SpyInstance<void, string[], any>;
beforeEach(() => {
const styles = [
{
dataset: {
mxTheme: "light",
},
disabled: true,
href: "urlLight",
onload: (): void => void 0,
} as unknown as HTMLStyleElement,
{
dataset: {
mxTheme: "dark",
},
disabled: true,
href: "urlDark",
onload: (): void => void 0,
} as unknown as HTMLStyleElement,
];
const styles = ["light", "dark", "light-custom", "dark-custom"].map(
(theme) =>
({
dataset: {
mxTheme: theme,
},
disabled: true,
href: "fake URL",
onload: (): void => void 0,
}) as unknown as HTMLStyleElement,
);
lightTheme = styles[0];
darkTheme = styles[1];
lightCustomTheme = styles[2];
jest.spyOn(document.body, "style", "get").mockReturnValue([] as any);
spyQuerySelectorAll = jest.spyOn(document, "querySelectorAll").mockReturnValue(styles as any);
@ -124,6 +119,27 @@ describe("theme", () => {
jest.advanceTimersByTime(200 * 10);
});
});
it("applies a custom Compound theme", async () => {
jest.spyOn(SettingsStore, "getValue").mockReturnValue([
{
name: "blue",
compound: {
"--cpd-color-icon-accent-tertiary": "var(--cpd-color-blue-800)",
"--cpd-color-text-action-accent": "var(--cpd-color-blue-900)",
},
},
]);
const spy = jest.spyOn(document.head, "appendChild").mockImplementation();
await new Promise((resolve) => {
setTheme("custom-blue").then(resolve);
lightCustomTheme.onload!({} as Event);
});
expect(spy).toHaveBeenCalled();
expect(spy.mock.calls[0][0].textContent).toMatchSnapshot();
spy.mockRestore();
});
});
describe("enumerateThemes", () => {