Skip to content

fix(ui): restore dark-mode contrast for prose table headers - #330

Merged
jfrench9 merged 1 commit into
mainfrom
bugfix/prose-dark-table-headers
Sep 1, 2026
Merged

fix(ui): restore dark-mode contrast for prose table headers#330
jfrench9 merged 1 commit into
mainfrom
bugfix/prose-dark-table-headers

Conversation

@jfrench9

@jfrench9 jfrench9 commented Sep 1, 2026

Copy link
Copy Markdown
Member

Table headers rendered near-black on near-black wherever markdown goes through
the shared MarkdownProse — most visibly on Search, where results expand
into SEC narrative sections and XBRL text blocks that are full of tables.

Same fix as robosystems-app#351, which is where it was first spotted (in the
document viewer). This app was worse off: its typography.dark block stopped
at blockquote, with no table, marker or hr rules at all.

Cause

The typography plugin colors thead th from its --tw-prose-headings
variable:

.prose :where(thead th):not(...) { color: var(--tw-prose-headings); }

That selector outranks any thead element rule this config could set, so an
element-by-element dark variant can never recolor a header cell — while the
variable itself kept its light-mode default of near-black.

Fix

Override the --tw-prose-* variables in the dark variant, the way
prose-invert does, instead of chasing elements. Verified in the compiled CSS:
.dark\:prose-dark:is(.dark *) now emits --tw-prose-headings: #F9FAFB and,
at specificity (0,2,0), beats the base .prose (0,1,0) that set it near-black.

The variable values match this config's existing element rules, so nothing else
changes visually, and light mode is untouched. It also covers the
variable-driven elements this dark variant had no rules for at all: list
markers, hr, captions, kbd, and table borders.

npm run test:all green (368 tests).

Table headers rendered near-black on near-black wherever markdown goes
through the shared MarkdownProse — most visibly on Search, where results
expand into SEC narrative sections and XBRL text blocks that are full of
tables.

The typography plugin colors `thead th` from its `--tw-prose-headings`
variable, and that selector outranks any element rule this config could
set, so the element-by-element dark variant never reached a header cell
while the variable kept its light-mode default of near-black. Override
the `--tw-prose-*` variables the way `prose-invert` does.

That also covers the variable-driven elements this dark variant never
had rules for at all: list markers, hr, captions, kbd, and table
borders.
@jfrench9
jfrench9 merged commit baf7895 into main Sep 1, 2026
6 checks passed
@jfrench9
jfrench9 deleted the bugfix/prose-dark-table-headers branch September 1, 2026 06:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant