fix: make the hero code pane theme-aware, not always dark - #1183
Merged
Conversation
The hero's components/like-button.ts pane hardcoded a near-black background and dark syntax colors unconditionally, so light theme showed what read as an unstyled black box, inconsistent with every other code window on the page and with /docs. Reproduced on the Railway origin directly, so this was a genuine defect in the shipped code, not the Cloudflare cache staleness found in the same QA pass. Drop the .stage-code overrides and let the pane pick up bg-bg-elev plus the shared .t-* token classes, the same theme-aware pattern the "whole stack, in three files" code windows already use. The removed CSS custom properties (--code-tag etc.) were dead weight: the highlight() tokenizer renders .t-* classes, not those vars, so they were never read by the markup that actually fills the pane. Closes #1182
vivek7405
marked this pull request as draft
July 30, 2026 07:36
The components/like-button.ts pane was wider than the live-demo pane (1.12fr vs 0.88fr); the source is short enough that the extra width just added empty space. Flip the split to 0.92fr/1.08fr, still wide enough that the longest sample line does not wrap.
0.92fr/1.08fr still read close to even; move to 0.8fr/1.2fr so the code pane is clearly narrower than the live-demo pane while keeping them side by side. The longest sample line still fits with no wrap.
The previous 0.8fr/1.2fr split overcorrected; back off to 0.88fr/1.12fr, a modest step down from 0.92fr/1.08fr rather than another large jump. Also shrink the stage's own container from max-w-6xl to max-w-5xl (a single step down Tailwind's built-in scale) per a separate request to reduce the combined LHS+RHS width, not just their split.
Use grid-cols-2 (Tailwind's built-in even-split utility) instead of an arbitrary fr ratio, so the two panes are exactly equal width.
The whole-stack code windows, the hero pane, the mock panels under 'Modern full-stack, on web standards', and the file-list blocks under 'Start where you are' all used bg-elev (a raised surface) or bg-sunken (a much deeper recess), while /docs code blocks use bg-subtle. A code block reads as recessed into the page, not raised above it, which is why /docs had it right and the home page was the outlier. Switch all four surfaces to bg-subtle. --editor-bg (the small nested pill/tag accents inside the Modern full-stack panels) is left on bg-elev so those inner elements keep visible contrast against their now-recessed container.
The INSTALL recipe (the npm create copy bar shown on the home, why-webjs, and what-is-webjs pages, plus cta-panel.ts) mixed bg-sunken into transparent, a darker base than the bg-subtle now used by every code block on the same pages. Switch the base to bg-subtle, keeping the 70% mix and backdrop-blur so it still reads as a floating pill over the hero gradient rather than a flat card.
vivek7405
marked this pull request as ready for review
July 30, 2026 08:34
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.
Summary
components/like-button.tscode pane hardcoded a near-black background and dark syntax colors in BOTH themes, so light theme showed what read as an unstyled black box..stage-codeoverrides inapp/page.tsandpublic/input.css; the pane now usesbg-bg-elev+ the shared.t-*token classes, same as every other code window on the page and in/docs.Test plan
webjs checkcleannpm test(unit + browser), 35/35 browser tests pass.stage-codereferences, none foundCloses #1182