Make /workspaces/ system-themed with a custom dark palette#788
Merged
Conversation
Until now the page force-pinned the light tokens regardless of the
visitor's actual theme preference, which is rough at night.
Two changes:
1. The wrapper class is renamed `ws-force-light` → `ws-page-scope` and
now defines two token sets:
- default (no `.light` on <html>): a near-neutral, very-dark-gray
palette specific to this page
- `html.light .ws-page-scope`: the existing light palette, unchanged
The page now follows whatever theme the global Nav toggle has set,
the same way every other marketing page does.
2. The dark palette is intentionally NOT the global Plannotator dark
theme. It uses near-zero chroma (`oklch(0.X 0 0)`) for surfaces
(background 0.13, card 0.17, muted 0.22, border 0.27) so the
landing page reads as a clean dark-gray sheet — Linear/Vercel
energy rather than the warmer blue-tinted dark used in the docs
and the editor. Primary stays violet (oklch(0.75 0.18 280)) so the
OSS-commitment stamp and submit button still pop.
Every existing rule on the page already uses var(--background),
var(--card), var(--border), etc., plus relative-color tweaks like
`oklch(from var(--primary) l c h / 0.5)` — so they automatically
pick up the right values in both modes with no further changes.
Generated with [Devin](https://cli.devin.ai/docs)
Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Three follow-ups based on visual review of the new dark mode: - Bg/card/muted/border ladder lifted ~2 L-points and given a touch of warm chroma (0.01 at hue 55) — page reads as dark walnut / leather instead of stark neutral charcoal. - --secondary (Today / Next / Compound labels) dropped from oklch(0.70 0.15 180) to oklch(0.62 0.08 180) — same teal hue, desaturated and slightly dimmer so the row recedes. - --primary (Join button, OSS contributor stamp, focus ring) dropped from oklch(0.75 0.18 280) to oklch(0.65 0.10 280) — same violet hue, dialed down to a dusty plum. Light mode is unchanged — still inheriting .theme-plannotator.light. Generated with [Devin](https://cli.devin.ai/docs) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.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
1 participant
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.
Until now /workspaces/ pinned the light tokens regardless of the visitor's saved theme, which is rough at night. This makes the page system-responsive AND gives it a custom dark palette so we don't have to settle for the default site-dark colors.
What changed
The wrapper class
ws-force-lightis renamed tows-page-scopeand now defines two token sets:.lighton<html>) — a near-neutral, very-dark-gray palette specific to this page (backgroundoklch(0.13 0 0), cardoklch(0.17 0 0), mutedoklch(0.22 0 0), borderoklch(0.27 0 0)). Near-zero chroma so it reads as a clean dark-gray sheet — Linear/Vercel energy rather than the warmer blue-tinted dark used in the docs and the editor.html.light .ws-page-scope— the existing light palette, unchanged.Primary stays violet (
oklch(0.75 0.18 280)) so the OSS-commitment stamp and submit button still pop.What stays the same
.lighton<html>for explicit-light and system+light; otherwise dark applies..ws-page-scopeonly (Astro adds adata-astro-cid-…attribute to both the selector and the wrapper div).var(--background),var(--card),var(--border), etc., plus relative-color tweaks likeoklch(from var(--primary) l c h / 0.5)— so they pick up the right values in either mode with no per-rule changes.Verification
bun run build:marketingsucceeds. The built CSS contains both selectors with the right tokens:Generated with Devin