Theming

The scaffold ships with themes: all in src/styles/styles.css — every daisyUI theme is bundled into the CSS. The active theme is set per-page via <html data-theme={site.theme ?? "light"}>.

Trade-off: bigger CSS bundle, zero JS to switch themes. Trim options in site.schema.json (and styles.css) for production.

The sections/Theme/Theme.astro section wraps a subset of nodes in a <div data-theme="...">. Use it to invert colors mid-page (e.g. light hero, dark CTA).

Add a folder under packages/ui/src/theme-library/<id>/ with theme.json (palette) and <id>.theme.css (one @plugin "daisyui/theme" block). Run node packages/ui/scripts/generate-theme-library.mjs to regenerate preview.svg thumbnails.

New projects start from the Default starter. Article.astro owns max-w and padding. The Theme section is available as a thin data-theme wrapper and should not add a second max-width on top of Article.