Skip to content

Add dark mode and a theme switcher to the landing page and docs - #2237

Open
leoisadev1 wants to merge 1 commit into
UsefulSoftwareCo:v2from
leoisadev1:exe-9-dark-mode
Open

leoisadev1 wants to merge 1 commit into
UsefulSoftwareCo:v2from
leoisadev1:exe-9-dark-mode

Conversation

@leoisadev1

Copy link
Copy Markdown

Summary

The landing page and the docs only had a light theme. Both now follow the system theme, and a System / Light / Dark switcher in the footer lets visitors override it. The choice is saved under Blume's own blume-theme key, so picking a theme on the landing page also applies on the docs.

 apps/marketing/src/
 ├── styles/
+│   ├── dark-theme.css      # dark values for the shared tokens, also imported by the docs
 │   └── global.css          # hardcoded greys become tone-* tokens
 ├── components/
+│   ├── ThemeSwitch.astro   # System / Light / Dark, rendered in SiteFooter and LegalLayout
 │   └── …                   # hex colors → tokens, motion colors via color-mix()
 └── layouts/Layout.astro    # sets data-theme before first paint
 apps/docs/
 ├── theme.css               # maps Blume's dark variables to the marketing tokens
 └── blume.config.ts         # mode: "system", dark accent

Light mode is unchanged. Monochrome logos (GitHub, X, Cursor and others) are inverted in dark mode, and Shiki code blocks use github-dark.

Evidence

Before (light, the only theme) After (dark)
Landing, light Landing, dark
Docs, light Docs, dark
Footer switcher Mobile landing, dark Mobile docs, dark
Footer with the theme switcher Mobile landing, dark Mobile docs, dark
  • Light mode: screenshots at six scroll positions match v2 pixel for pixel, apart from anti-aliasing on the agent logo chips.
  • Switcher: checked in a headless browser on the landing page, docs, and privacy page. Choosing Light or Dark survives client-side navigation and reloads, Dark overrides a light OS setting, and System follows OS changes live.
  • Dark mode: checked the landing sections, download menu, testimonials dialog, pricing, blog, privacy, and on the docs the articles, code blocks, search, and step numbers.
  • astro build, blume build, oxlint, oxfmt --check, and typecheck pass for both apps.

Not tested: one choice carrying over between the landing page and docs. Locally they run on separate ports, which are separate origins. On executor.sh they share an origin, so the shared localStorage key should cover both.

/about-executor, /google-workspace, and /experiments stay light on purpose.

Merge Danger

Door: two-way. Reverting the commit restores the light-only pages, and the only stored state is an optional localStorage key.

Blast radius: every marketing page and the docs. The riskiest part is the hex → token codemod across the landing components. Light mode was diffed against v2 to catch that.

Created with Claude Opus 5.5 in T3 Code.

Both sites follow the system theme by default. A System / Light / Dark
switcher in the footer stores the choice under Blume's blume-theme key,
so one choice covers the landing page and the docs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@leoisadev1
leoisadev1 marked this pull request as ready for review October 9, 2026 17:00

This branch has not been deployed

No deployments
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