packages/forkhorse-dashboard/test/theme.test.ts

1import assert from "node:assert/strict";
2import { test } from "node:test";
3import { createRequire } from "node:module";
4import { applyAppTheme } from "../src/theme.ts";
5import tokens from "../src/host-tokens.json" with { type: "json" };
6const { JSDOM } = createRequire(import.meta.url)("jsdom");
7
8test("host theme changes mode and accent, and null restores the host's default accent", () => {
9  const dom = new JSDOM("<html></html>");
10  try {
11    const document: Document = dom.window.document;
12    applyAppTheme({ mode: "dark", accentColor: null }, document);
13    assert.equal(document.documentElement.dataset.mode, "dark");
14    assert.equal(document.documentElement.style.colorScheme, "dark");
15    assert.equal(
16      document.documentElement.style.getPropertyValue("--color-kumo-brand"),
17      tokens.dark["--color-kumo-brand"],
18    );
19    applyAppTheme({ mode: "light", accentColor: "#abcdef" }, document);
20    assert.equal(document.documentElement.dataset.mode, "light");
21    assert.match(
22      document.documentElement.style.getPropertyValue("--color-kumo-brand"),
23      /light-dark/,
24    );
25    assert.match(
26      document.documentElement.style.getPropertyValue("--text-color-kumo-link"),
27      /abcdef/,
28    );
29    applyAppTheme({ mode: "light", accentColor: null }, document);
30    assert.equal(
31      document.documentElement.style.getPropertyValue("--color-kumo-brand"),
32      tokens.light["--color-kumo-brand"],
33    );
34  } finally {
35    dom.window.close();
36  }
37});
38