Skip to content

fix: make the hero code pane theme-aware, not always dark #1183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vivek7405 merged 7 commits into from
Jul 30, 2026
+7 −32
Merged

fix: make the hero code pane theme-aware, not always dark #1183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3a0541c
fix: make the hero code pane theme-aware, not always dark
vivek7405 Jul 30, 2026
1a3a4ab
fix: narrow the hero code pane relative to the live demo
vivek7405 Jul 30, 2026
556f305
fix: narrow the hero code pane further
vivek7405 Jul 30, 2026
6752b8f
fix: dial back the hero pane split, shrink overall stage width
vivek7405 Jul 30, 2026
4f1381a
fix: split the hero code pane and live pane evenly
vivek7405 Jul 30, 2026
dc43842
fix: align home page code blocks with the /docs recessed surface
vivek7405 Jul 30, 2026
d5ce725
fix: align the copy bar's base color with the code block surface
vivek7405 Jul 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 6 additions & 20 deletions website/app/page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ LikeButton.register('like-button');
// The panel to the right is this file, server-rendered
// and upgraded in place. Click it.`;

const WIN = 'flex flex-col flex-1 m-0 min-w-0 max-w-full rounded-2xl overflow-hidden border border-border bg-bg-elev shadow-[var(--shadow)]';
const WIN = 'flex flex-col flex-1 m-0 min-w-0 max-w-full rounded-2xl overflow-hidden border border-border bg-bg-subtle shadow-[var(--shadow)]';
const WINBAR = 'flex items-center gap-1.5 h-10 px-3.5 border-b border-border bg-[color-mix(in_oklch,var(--color-bg-sunken)_60%,var(--color-bg-elev))]';
const WINNAME = 'ml-2 font-mono font-medium text-xs leading-none text-fg-subtle';
const DOTS = html`<span class="w-2.5 h-2.5 rounded-full bg-[#ff5f57]"></span><span class="w-2.5 h-2.5 rounded-full bg-[#febc2e]"></span><span class="w-2.5 h-2.5 rounded-full bg-[#28c840]"></span>`;
Expand All @@ -117,7 +117,7 @@ export default function LandingPage() {
the three syntax hues need a dark override. */
:root {
--editor-bg: var(--bg-elev);
--editor-sidebar-bg: var(--bg-sunken);
--editor-sidebar-bg: var(--bg-subtle);
--editor-tab-bg: var(--bg-sunken);
--editor-active-tab-bg: var(--bg-elev);
--editor-status-bg: var(--bg-sunken);
Expand Down Expand Up @@ -158,20 +158,6 @@ export default function LandingPage() {
the page a reader is invited to click, so it is sized as a control
rather than as an inline badge, and it is the single surface where the
brand accent appears as a hover state. */
.stage-code { background: oklch(0.09 0.005 60); }
.stage-code > div:first-child {
background: oklch(0.13 0.006 60);
border-color: oklch(1 0 0 / 0.09);
}
.stage-code > div:first-child span:last-child { color: oklch(0.62 0.01 60); }
.stage-code pre {
color: oklch(0.95 0.005 70);
--code-tag: oklch(0.78 0.13 250);
--code-attr: oklch(0.66 0.16 150);
--code-str: oklch(0.80 0.15 145);
--code-text: oklch(0.95 0.005 70);
--code-punc: oklch(0.68 0.01 60);
}
.hero-stage like-button button {
gap: 0.5rem;
padding: 0.7rem 1.25rem;
Expand Down Expand Up @@ -227,8 +213,8 @@ export default function LandingPage() {
</p>
</div>

<div class="hero-stage max-w-6xl mx-auto grid grid-cols-1 wide:grid-cols-[1.12fr_0.88fr] rounded-2xl overflow-hidden border border-border-strong bg-bg-sunken shadow-[var(--shadow)]">
<div class="stage-code min-w-0 border-b wide:border-b-0 wide:border-r border-border">
<div class="hero-stage max-w-5xl mx-auto grid grid-cols-1 wide:grid-cols-2 rounded-2xl overflow-hidden border border-border-strong bg-bg-sunken shadow-[var(--shadow)]">
<div class="min-w-0 border-b wide:border-b-0 wide:border-r border-border bg-bg-subtle">
<div class=${WINBAR}>${DOTS}<span class=${WINNAME}>components/like-button.ts</span></div>
<pre class="scroll-thin m-0 p-5 overflow-x-auto font-mono text-xs leading-[1.72] [tab-size:2] text-left" tabindex="0" aria-label="like-button component source"><code>${highlight(HERO_SAMPLE)}</code></pre>
</div>
Expand Down Expand Up @@ -398,7 +384,7 @@ export default function LandingPage() {
<span class="text-xs font-medium leading-none text-fg-subtle">Full-stack</span>
<h3 class="font-display font-bold text-lg leading-[1.25] m-0">Pages + API + components</h3>
<p class="m-0 text-sm leading-[1.6] text-fg-muted">SSR pages, web components, server actions, Drizzle, streaming, and a browsable feature gallery. Auth (login, sessions, a protected route) ships as a gallery card. The default.</p>
<pre class="scroll-thin m-0 px-3.5 py-3 overflow-x-auto rounded-lg border border-border bg-bg-sunken font-mono text-xs leading-[1.6] text-fg-muted" tabindex="0" aria-label="Example files">app/page.ts
<pre class="scroll-thin m-0 px-3.5 py-3 overflow-x-auto rounded-lg border border-border bg-bg-subtle font-mono text-xs leading-[1.6] text-fg-muted" tabindex="0" aria-label="Example files">app/page.ts
components/counter.ts
actions/posts.server.ts</pre>
<div class="cmd-foot pt-2 mt-auto font-mono text-xs leading-[1.6] text-fg-muted max-w-full min-w-0"><copy-cmd>npm create webjs@latest my-app</copy-cmd></div>
Expand All @@ -407,7 +393,7 @@ actions/posts.server.ts</pre>
<span class="text-xs font-medium leading-none text-fg-subtle">Backend (API)</span>
<h3 class="font-display font-bold text-lg leading-[1.25] m-0">Route handlers + Database</h3>
<p class="m-0 text-sm leading-[1.6] text-fg-muted">A backend-only app, no UI or SSR. File-based route handlers, modules, middleware, rate limiting, WebSockets, a database, and a backend-features gallery.</p>
<pre class="scroll-thin m-0 px-3.5 py-3 overflow-x-auto rounded-lg border border-border bg-bg-sunken font-mono text-xs leading-[1.6] text-fg-muted" tabindex="0" aria-label="Example files">app/api/users/route.ts
<pre class="scroll-thin m-0 px-3.5 py-3 overflow-x-auto rounded-lg border border-border bg-bg-subtle font-mono text-xs leading-[1.6] text-fg-muted" tabindex="0" aria-label="Example files">app/api/users/route.ts
app/api/chat/route.ts
middleware.ts</pre>
<div class="cmd-foot pt-2 mt-auto font-mono text-xs leading-[1.6] text-fg-muted max-w-full min-w-0"><copy-cmd>npm create webjs@latest my-api -- --template api</copy-cmd></div>
Expand Down
2 changes: 1 addition & 1 deletion website/lib/design/recipes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export const BTN_GHOST = `${BTN_BASE} text-fg border-border-strong bg-[color-mix
* proportionally right for something 10px taller.
*/
export const INSTALL =
`flex items-center gap-2 w-fit max-w-full mx-auto px-4 py-3.5 text-left font-mono text-sm leading-[1.6] text-fg-muted rounded-2xl border border-border bg-[color-mix(in_oklch,var(--color-bg-sunken)_70%,transparent)] backdrop-blur-sm shadow-[var(--shadow-sm)]`;
`flex items-center gap-2 w-fit max-w-full mx-auto px-4 py-3.5 text-left font-mono text-sm leading-[1.6] text-fg-muted rounded-2xl border border-border bg-[color-mix(in_oklch,var(--color-bg-subtle)_70%,transparent)] backdrop-blur-sm shadow-[var(--shadow-sm)]`;

/* ---------------------------------------------------------------------------
Layout.
Expand Down
11 changes: 0 additions & 11 deletions website/public/input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,17 +255,6 @@
.t-num { color: oklch(0.55 0.12 215); }
.t-punc{ color: var(--fg-muted); }
.t-id { color: var(--fg); }
/* The hero stage's source pane is a dark editor in BOTH themes, so it takes
the dark token set unconditionally (the theme-scoped rules below cannot
reach it in light mode). */
.stage-code .t-str { color: oklch(0.80 0.14 150); }
.stage-code .t-kw { color: oklch(0.76 0.14 295); }
.stage-code .t-fn { color: oklch(0.75 0.13 250); }
.stage-code .t-type{ color: oklch(0.80 0.10 200); }
.stage-code .t-num { color: oklch(0.72 0.12 215); }
.stage-code .t-id { color: oklch(0.95 0.005 70); }
.stage-code .t-punc{ color: oklch(0.68 0.01 60); }
.stage-code .t-com { color: oklch(0.55 0.01 60); font-style: italic; }

:root[data-theme='dark'] .t-str { color: oklch(0.80 0.14 150); }
:root[data-theme='dark'] .t-kw { color: oklch(0.76 0.14 295); }
Expand Down
Loading