diff --git a/.agents/skills/webjs/references/styling.md b/.agents/skills/webjs/references/styling.md index d28cfa5a1..18f8e3200 100644 --- a/.agents/skills/webjs/references/styling.md +++ b/.agents/skills/webjs/references/styling.md @@ -109,6 +109,19 @@ The default stack is a static compiled Tailwind stylesheet (`css:build` compiles **Two halves.** (1) `public/input.css` MAPS token names into Tailwind with `@theme inline` (`--color-background: var(--background)`), so `bg-background` resolves to `var(--background)`. That is infrastructure; leave it. (2) The root layout (`app/layout.ts`) DEFINES the values as plain CSS custom properties in a ` -
- - - WebJs Gallery - - + + +
+
+ + + + WebJs + Gallery + + +
-
- ${children} -
+ +
+
+ ${children} +
+ + + +
`; diff --git a/gallery/app/page.ts b/gallery/app/page.ts index 0b3dbeef0..9bd376eaa 100644 --- a/gallery/app/page.ts +++ b/gallery/app/page.ts @@ -24,7 +24,12 @@ export default function Home() {
-

+ +

Explore the gallery

@@ -36,7 +41,7 @@ export default function Home() {

- Feature Cards + Feature Demos

${features.length} single-concept demos diff --git a/gallery/components/theme-toggle.ts b/gallery/components/theme-toggle.ts index e2b65195b..186a0accd 100644 --- a/gallery/components/theme-toggle.ts +++ b/gallery/components/theme-toggle.ts @@ -31,9 +31,17 @@ export class ThemeToggle extends WebComponent { } catch {} if (next === 'system') delete document.documentElement.dataset.theme; else document.documentElement.dataset.theme = next; - // Mirror the effective theme onto the .dark class too. data-theme drives the - // app palette blocks; the .dark class is what the @webjsdev/ui kit's dark: - // variants read, so both signals must move together (see the skill's references/styling.md). + // Mirror the effective theme onto the .dark class too. data-theme drives + // everything this app actually reads: the palette blocks in app/layout.ts + // and the @custom-variant dark in public/input.css, which is keyed off + // [data-theme] so the logo swap still works with JavaScript off. The .dark + // class is inert HERE, since this app imports only tailwindcss and never + // the kit theme CSS that defines the &:is(.dark *) form. Kept only so the + // two signals do not visibly disagree while the reader is clicking. It is + // NOT a working kit-compatibility path: this runs only on a click, the + // bootstrap in app/layout.ts writes data-theme alone, so on every page load + // the class is absent whatever the stored theme is. A demo that adds a kit + // component needs the class written at bootstrap too. const osLight = window.matchMedia('(prefers-color-scheme: light)').matches; const dark = next === 'dark' || (next === 'system' && !osLight); document.documentElement.classList.toggle('dark', dark); @@ -45,7 +53,7 @@ export class ThemeToggle extends WebComponent { const icon = t === 'light' ? ICONS.sun : t === 'dark' ? ICONS.moon : ICONS.system; return html`