Skip to content

fix(core): dark-surface colors for links, h6, code and mark (#23) - #24

Merged
vietnguyentuan2019 merged 1 commit into
mainfrom
fix/dark-ua-colors
Oct 3, 2026
Merged

vietnguyentuan2019 merged 1 commit into
mainfrom
fix/dark-ua-colors

Conversation

@vietnguyentuan2019

Copy link
Copy Markdown
Contributor

Fixes #23.

Problem

In 1.11.0 only the default text color followed a dark Theme. The built-in link, <h6> and <pre><code> colors were still light-surface constants, measuring 4.1 / 3.9 / 2.5 : 1 against #121212 (<pre><code> fails even the 3:1 large-text bar), and the inline <code> / <mark> chips were bright blocks on a dark page.

Change

StyleResolver.darkSurface (default false) swaps those UA colors for dark-surface variants, applied right after the UA style so author CSS and inline styles still win. An <a> without href is untouched.

Element Dark variant Contrast (measured)
link #64B5F6 8.5 on #121212, 7.5 on #1E1E1E
<h6> #9CA3AF 7.4 / 6.6
<pre><code> #79C0FF 9.6 / 8.6
inline <code> #79C0FF on #262C36 7.2 on its chip
<mark> #FDE68A on #5C4A00 6.9 on its chip

HyperViewer turns it on when the effective default text color is light, not when the theme is dark. That choice matters: the migration guide tells people to use textColor: Colors.black87 for a white pane inside a dark app, and a theme-based switch would put light blue links on white. Light Theme + light textColor (a dark pane) gets the dark palette. Light output is unchanged.

Not touched: <blockquote>, <kbd>, table headers keep their light backgrounds (their text stays readable via the 1.11.0 contrast guard; they remain light blocks on a dark page). Documented in the README and CHANGELOG; say if you want that as a follow-up.

Verification

  • 11 new tests in test/dark_ua_colors_test.dart: per-element contrast on page and card surfaces; the exact light palette; the white-pane and dark-pane cases; theme toggle; author CSS / inline precedence; the compute() isolate path; markdown; one pixel test.
  • Mutation-checked, four ways: never applying the variants, choosing by theme instead of text color, ignoring text luminance, and giving href-less anchors a link color each fail tests.
  • Full root+core 2513, epub 53, example 44 pass; analyze and format clean; the new file also passes on Chrome. No regex lookbehind added.
  • Goldens can only be verified on CI (they fail identically on clean main locally). Light-mode pixels must be unchanged.
  • Released packages are unaffected; this is Unreleased in both CHANGELOGs, no version bump.

On a dark Theme only the default text color followed the theme; the built-in
link (#1976D2), h6 (#6B7280) and pre>code (#0550AE) colors measured 4.1, 3.9
and 2.5:1 against #121212, and the inline code / mark chips were bright light
blocks on a dark page.

StyleResolver.darkSurface swaps those UA colors for variants that keep >= 4.5:1
(link 8.5, h6 7.4, pre code 9.6 on #121212; code 7.2 and mark 6.9 on their own
dark chips). HyperViewer enables it when the effective default text color is
light, i.e. judged by the text color rather than the Theme: a dark Theme with a
dark textColor (a white pane) keeps the light-surface palette, a light Theme
with a light textColor gets the dark one. Off by default, so light output is
unchanged. Author CSS and inline styles are applied after and still win; an <a>
without href is untouched.

Tests (test/dark_ua_colors_test.dart): contrast of the resolved style per
element on page and card surfaces, the exact light palette, the white-pane and
dark-pane cases, toggles, author CSS precedence, the compute() isolate path,
markdown, and a pixel test. Mutation-checked.
@github-actions

github-actions Bot commented Oct 3, 2026

Copy link
Copy Markdown
Contributor

⚠️ Layout Regression — Budget exceeded (informational)

Fixture Budget (ms) Median (ms) P95 (ms)
❌ simple_paragraph 8 16 29
❌ mixed_inline 10 14 14
❌ float_layout 12 14 27
❌ table_20_rows 14 42 61
✅ cjk_ruby 14 9 11
❌ large_article 16 33 63

One or more fixtures exceeded the 16 ms budget.

Flutter 3.41.5 · ubuntu-22.04

Informational, does not block merge: CI runners use software
rendering and are 2-3x slower than the devices the budgets are
calibrated for. Compare against the base branch; if a fixture
regressed relative to it, profile with:

flutter test benchmark/layout_regression.dart --reporter expanded

and check _performLineLayout / _buildCharacterMapping for
any new O(N²) or O(N log N) paths introduced in this PR.

@vietnguyentuan2019
vietnguyentuan2019 merged commit d8262e1 into main Oct 3, 2026
9 checks passed
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.

Dark theme: link, <pre><code> and <h6> colors are still tuned for light surfaces (code/mark chips too)

1 participant