Landing: light + dark mode with a header toggle#5
Merged
Conversation
The bespoke landing was dark-only. Make it scheme-aware (light surface / text / border / accent values scoped to .btv), keep VitePress's default system appearance, and add a sun/moon toggle in the header wired to VitePress's isDark so visitors can override light/dark (persisted). Code blocks stay dark terminals in both schemes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR updates the bespoke VitePress landing page to support light/dark appearance consistently by integrating with VitePress’s built-in appearance state and adding landing-scoped theme variables.
Changes:
- Adds a header sun/moon toggle wired to VitePress
useData().isDark(persisted by VitePress). - Introduces landing-scoped light-mode CSS variable overrides (while keeping the existing dark look as the default token baseline).
- Adjusts several landing component styles (glass header, hover surfaces, pills, footer, and code-block styling) to be scheme-aware.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <a class="navlink nav-hide" href="#philosophy">Philosophy</a> | ||
| <a class="navlink nav-hide" href="#projects" style="margin-right:6px">Projects</a> | ||
| <ClientOnly> | ||
| <button type="button" class="btv-toggle" :title="isDark ? 'Switch to light' : 'Switch to dark'" :aria-label="isDark ? 'Switch to light theme' : 'Switch to dark theme'" @click="toggleAppearance"> |
btravers
added a commit
that referenced
this pull request
Jun 27, 2026
- style.css: inline code (--vp-code-color) now uses --text-accent so it stays readable on the scheme-aware code inset (was --bt-pink-soft, which was low-contrast on the light code wash). [Copilot, PR #6] - Landing.vue: add aria-pressed to the appearance toggle so assistive tech announces the current state. [Copilot, PR #5] Co-Authored-By: Claude Opus 4.8 (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
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.
Follow-up to the merged landing PR (this commit was stranded after that merge).
Makes the bespoke landing scheme-aware:
appearance: true, so the landing follows the visitor's OS preference.isDarklets visitors override light/dark (persisted). Needed because the landing useslayout: false, so VitePress's own nav toggle isn't present..btv(light surfaces/text/borders + a deeper-pink accent for contrast on white). Code blocks stay dark "terminal" panels in both modes. The shared@btravstack/themepackage is untouched.Verified: system dark + system light render correctly and the toggle flips the theme; lockfile unchanged (
--frozen-lockfileclean);turbo buildpasses.🤖 Generated with Claude Code