fix: unstyled headings stay dark in dark mode - #26
Merged
Conversation
Cause: no global body text color was set — unstyled elements inherited the browser default (black), which is invisible on the dark canvas. Most serif section headings (FormSection titles, ad-hoc <h3>s in Results / Financing / Revenue & Expenses) didn't carry an explicit text-ink class, so they appeared dark-on-dark. Fix - Add @layer base rule setting html/body background to var(--canvas) and text color to var(--ink). This automatically flips with the .dark class on <html>, covering every previously-unstyled heading. - Defensively add text-ink to FormSection's title so the primitive doesn't rely on inherited color. Reported instances now render correctly in dark mode: - Loan Terms, Operating Expenses, Reserves, Professional Fees, Upfront Costs, Revenue, Occupancy (FormSection titles) - Revenue breakdown, Expense breakdown, Tax deductions · non-cash, Sensitivity (ad-hoc h3 in Results / Financing / Revenue & Expenses) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
tdody
added a commit
that referenced
this pull request
Apr 20, 2026
Phase 2 PRs 1–7 all shipped under THI-45 through THI-54 before this tracker was committed. Audit on 2026-04-19 confirmed `frontend/src/index.css` tokens match `README.md` spec exactly (no drift, light + dark). Phase 2 PR 8 (polish pass) is in-progress with #26/#27/#28 landed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Reported section headings (Loan Terms, Operating Expenses, Reserves, Professional Fees, Revenue breakdown, Expense breakdown, Tax deductions · non-cash, Sensitivity, Upfront Costs, Revenue, Occupancy, …) remained dark-on-dark in dark mode.
Root cause
No global body text color was ever set in
index.css. Tailwind v4's preflight doesn't set one either. Elements without an explicittext-inkclass inherited the browser default (black). Most serif section headings — bothFormSectiontitles and ad-hoc<h3>s in the Results / Financing / Revenue & Expenses tabs — didn't carry a text color, so they were invisible on the dark canvas.Fix
@layer baserule infrontend/src/index.csssettinghtml, body { background-color: var(--canvas); color: var(--ink) }. This automatically flips with the.darkclass on<html>, fixing every previously-unstyled element in one place.text-inkon theFormSectiontitle — so the primitive no longer relies on inherited color.Verification
npm run lint— cleannpm run build— passes🤖 Generated with Claude Code