Skip to content

docs: fix banner dark-mode contrast#601

Merged
jdx merged 1 commit intomainfrom
fix/banner-dark-mode
Apr 23, 2026
Merged

docs: fix banner dark-mode contrast#601
jdx merged 1 commit intomainfrom
fix/banner-dark-mode

Conversation

@jdx
Copy link
Copy Markdown
Owner

@jdx jdx commented Apr 23, 2026

Summary

White banner text was unreadable in dark mode because VitePress inverts `--vp-c-brand-1` per theme:

  • Light mode: `#3451b2` (dark indigo) \u2014 white text reads fine
  • Dark mode: `#a8b1ff` (light lavender) \u2014 white text is nearly invisible

Hardcode the banner bg to `#3451b2` so it stays dark with white text in both themes.

\U0001F916 Generated with Claude Code


Note

Low Risk
Low risk: a single CSS tweak hardcodes the banner background color to avoid theme-variable inversion; no logic or data flow changes.

Overview
For the docs site announcement banner, the background color is now hardcoded to #3451b2 instead of using var(--vp-c-brand-1), keeping white banner text readable in dark mode as well as light mode.

Reviewed by Cursor Bugbot for commit 9fa2bc1. Bugbot is set up for automated code reviews on this repo. Configure here.

The banner used var(--vp-c-brand-1) as its background, but VitePress
inverts the brand color between themes: in light mode it resolves to
#3451b2 (dark indigo) — white text reads fine — but in dark mode it
flips to #a8b1ff (light lavender), which makes the white banner text
nearly invisible. Hardcode #3451b2 so the banner stays dark-indigo on
white text in both themes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@greptile-apps
Copy link
Copy Markdown

greptile-apps Bot commented Apr 23, 2026

Greptile Summary

Fixes banner readability in dark mode by replacing the VitePress theme CSS variable var(--vp-c-brand-1) — which resolves to a light lavender (#a8b1ff) in dark mode — with a hardcoded dark indigo (#3451b2), ensuring white text remains legible in both themes.

Confidence Score: 5/5

This is a safe, minimal CSS-only docs fix with no logic or data concerns.

Single-line change in a docs CSS file that correctly addresses the described dark-mode contrast issue. No P0/P1 findings.

No files require special attention.

Important Files Changed

Filename Overview
docs/.vitepress/theme/banner.css Replaces var(--vp-c-brand-1, #3451b2) with hardcoded #3451b2 to keep banner background dark in both light and dark VitePress themes, ensuring white text remains readable.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[VitePress Theme Mode] --> B{Light or Dark?}
    B -->|Light mode| C["--vp-c-brand-1 = #3451b2 (dark indigo)"]
    B -->|Dark mode| D["--vp-c-brand-1 = #a8b1ff (light lavender)"]
    C --> E["Banner bg: #3451b2 ✅ white text readable"]
    D --> F["Banner bg: #a8b1ff ❌ white text invisible (before fix)"]
    D --> G["Banner bg: #3451b2 ✅ white text readable (after fix)"]
    style F fill:#ff9999
    style E fill:#99ff99
    style G fill:#99ff99
Loading

Reviews (1): Last reviewed commit: "docs: use solid bg for banner so dark-mo..." | Re-trigger Greptile

@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 23, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.03%. Comparing base (73df3ca) to head (9fa2bc1).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #601   +/-   ##
=======================================
  Coverage   79.03%   79.03%           
=======================================
  Files          48       48           
  Lines        7235     7235           
  Branches     7235     7235           
=======================================
  Hits         5718     5718           
  Misses       1140     1140           
  Partials      377      377           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@jdx jdx merged commit 2661934 into main Apr 23, 2026
12 checks passed
@jdx jdx deleted the fix/banner-dark-mode branch April 23, 2026 20:02
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request updates the banner's background color in docs/.vitepress/theme/banner.css by replacing a CSS variable with a hardcoded hex value. I have no feedback to provide.

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