Files
sow-nodebb-theme/tests/dark-mode-variable-contract.test.js
T
archvillainetteandvickydotbat 985ff0755d fix: light emphasis colour so plain Bootstrap tables are readable (#36) (#37)
Closes #36.

## What was wrong

`/wiki/manage` showed its table in near-black text on the near-black page: the
header row, the `tid`, `Posts` and `Created` columns were effectively invisible.

## Root cause

The theme repaints Bootstrap's **light** colour mode dark (`$body-color`,
`$body-bg`, `$card-bg`, …) but never overrode `$body-emphasis-color`, which
Bootstrap defaults to `$black` (`#09080b` here). Everything that chains to
`--bs-emphasis-color` inherited that ink:

- `--bs-table-color` / `-striped-` / `-hover-` / `-active-` on any plain `.table`
- `--bs-tooltip-bg` (dark text on a dark tooltip)
- `--bs-nav-tabs-link-active-color`, `--bs-nav-underline-link-active-color`
- `--bs-list-group-action-hover-color` / `-active-color`
- the `.text-emphasis` / `.link-body-emphasis` utilities

`_controls.scss` had already patched this by hand for the two tables anyone had
noticed (`notification/table`, `flags/list`) and for post-content tables. Every
other table in the forum was still broken. Fixing the variable once is a smaller
diff than a third per-table patch, and it covers tables that do not exist yet.

## The change

One variable in `scss/overrides.scss` — the file whose stated job is exactly
this — plus a contract test so the next dark-repaint variable that goes missing
fails a check instead of shipping.

## Verification

Booted the `sow-nodebb` dev stack with this working tree mounted
(`PLUGIN_PATH=../sow-nodebb-theme`), seeded a wiki namespace with topics, and
compared `/wiki/manage` before and after: unreadable → fully legible, gold rules
and buttons unchanged. Also eyeballed `/categories`, `/notifications`,
`/user/admin`, a topic, `/wiki` and `/flags` for regressions — none. The ACP is
unaffected: it builds from `admin/overrides`, not this file.

All `tests/*.test.js` pass; the new test fails when the variable is reverted.

Co-authored-by: vickydotbat <zoelynne.victoria@gmail.com>
Reviewed-on: #37
2026-07-20 11:05:46 +00:00

24 lines
943 B
JavaScript

// Westgate repaints Bootstrap's LIGHT colour mode dark, so every Bootstrap
// variable that defaults to a near-black ink must be re-pointed at a light
// token. Missing one is invisible until some component chains to it — that is
// how /wiki/manage ended up with near-black table text on a near-black page.
const assert = require("assert");
const fs = require("fs");
const path = require("path");
const overrides = fs.readFileSync(
path.join(__dirname, "..", "scss", "overrides.scss"),
"utf8"
);
// Bootstrap's defaults for these are $black / $body-color-ish inks.
["$body-color", "$body-bg", "$body-emphasis-color"].forEach(variable => {
const declaration = new RegExp(`\\${variable}:\\s*([^;]+);`).exec(overrides);
assert(declaration, `${variable} must be overridden for the dark repaint`);
assert.match(
declaration[1],
/\$wg-/,
`${variable} must resolve to a Westgate palette token, got: ${declaration[1].trim()}`
);
});