Skip to content

Light mode: brand-pink accent + inverted project logos#7

Merged
btravers merged 1 commit into
mainfrom
fix/light-accent-logos
Jun 28, 2026
Merged

Light mode: brand-pink accent + inverted project logos#7
btravers merged 1 commit into
mainfrom
fix/light-accent-logos

Conversation

@btravers

Copy link
Copy Markdown
Contributor

Two light-mode polish fixes for https://btravstack.github.io/.

Punchier primary

The light accent-as-text was #A52260 — a dull, "livid" magenta. Bumped to #C42A6C, a vivid beetroot pink that still passes WCAG-AA on the light bg (~5.08:1). This drives the wordmark, eyebrows, tags and (via --text-accent) docs links in light mode. Fills (--accent, buttons, glow) are unchanged.

Inverted logos in light mode

The project-card logos were hardcoded to the dark variant (cream marks), which barely showed on the white cards. They're now scheme-aware: the inverted dark-ink -light.svg marks in light mode, cream -dark.svg in dark — bound to VitePress's isDark.

Verified light + dark: wordmark resolves rgb(196,42,108) in light, logos swap correctly, build green.

- tokens.css: light --text-accent #A52260 -> #C42A6C — a vivid beetroot
  pink (was a livid/dull magenta), still WCAG-AA on white (~5.08:1).
  Applies to the landing wordmark/eyebrows/tags and to docs links in light.
- Landing.vue: project-card logos are now scheme-aware — the inverted
  (dark-ink) -light.svg marks in light mode, cream -dark.svg in dark —
  instead of always using the dark (cream) variant.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings June 28, 2026 00:08
@btravers btravers merged commit 034d707 into main Jun 28, 2026
1 check passed

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

Polishes the site’s light-mode visuals by improving the primary text accent color and making project-card logos automatically switch between light/dark variants based on VitePress theme state.

Changes:

  • Updated the light theme --text-accent color to a more vivid magenta (#C42A6C).
  • Made project logos scheme-aware by switching from hardcoded *-dark.svg paths to a computed *-{light|dark}.svg path driven by VitePress isDark.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
packages/theme/src/tokens.css Updates the light-mode text accent token for higher visual punch while preserving the existing fill accent.
apps/website/.vitepress/theme/Landing.vue Switches project logos to use isDark to select -light.svg vs -dark.svg variants.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@btravers btravers changed the title Light mode: punchier accent + inverted project logos Light mode: brand-pink accent + inverted project logos Jun 28, 2026
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.

2 participants