Skip to content

Fix sticky dark header contrast - #41

Merged
paladini merged 1 commit into
mainfrom
codex/fix-sticky-dark-header
Jul 26, 2026
Merged

Fix sticky dark header contrast#41
paladini merged 1 commit into
mainfrom
codex/fix-sticky-dark-header

Conversation

@paladini

Copy link
Copy Markdown
Owner

Summary

  • keep the shared product header on its light paper background after scrolling in dark mode
  • reuse the existing --hs-header-paper token through VitePress's --vp-nav-bg-color
  • add a patch changeset for the user-facing docs fix

Root cause

VitePress removes the .top class from the home navigation after scrolling. Its more-specific sticky navigation selector then reapplies the dark --vp-nav-bg-color, while the Harness Score wordmark, navigation links, and controls retain their dark ink colors.

By setting VitePress's navigation background token to the existing Harness Score paper color, the built-in top, sticky, sidebar, and mobile states all resolve to the intended header background without new specificity overrides or !important declarations.

Browser verification

Verified locally with Playwright:

  • dark mode at 1904x993, both at the top and at scrollY=600
  • internal guide page with sidebar
  • light mode
  • mobile 390x844 with navigation closed and open

In the reported desktop dark-mode scenario, the sticky header now remains rgb(241, 244, 236) with the wordmark and main links at rgb(13, 27, 23).

Validation

  • npm run docs:build
  • npm test — 268 tests passed
  • npm run lint — passed with 18 pre-existing warnings and no errors
  • npm run scan -- --min-level 4 — L4, 108/108
  • git diff --check

@paladini paladini self-assigned this Jul 26, 2026
@paladini
paladini merged commit 9959ce8 into main Jul 26, 2026
1 check 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.

1 participant