feat: add config-driven DaisyUI theming system with ThemeToggle component#30
Open
mzngo wants to merge 1 commit into
Open
feat: add config-driven DaisyUI theming system with ThemeToggle component#30mzngo wants to merge 1 commit into
mzngo wants to merge 1 commit into
Conversation
…nent - Add ThemeConfig interface and theme.light / theme.dark fields to BrandingConfig in branding.config.ts. Defaults to 'corporate' (light) and 'business' (dark). - Add ThemeToggle component (Sun/Moon swap button, DaisyUI swap-rotate) that persists the user's preference to localStorage and syncs with system prefers-color-scheme. - Add an anti-FODT inline script in Layout.astro that runs before first paint, reading the configured theme names from data-theme-light / data-theme-dark attributes on <html> so the correct theme is applied before any content renders. - Update global.css @plugin config to declare the two configured themes explicitly, keeping the CSS bundle lean (only included themes are compiled).
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
Implements Phase 1.3 of the roadmap: a config-driven light/dark theming system using DaisyUI v5's built-in theme support.
Problem
The starter had no theming system — it used DaisyUI's default theme with no way to customize it or let users toggle between light and dark mode. Anyone forking the starter would need to figure out DaisyUI theming from scratch, and the site would show a flash of the wrong theme on first load for users whose system preference differed from the default.
Changes
branding.config.tsThemeConfiginterface withlightanddarkfields (any DaisyUI v5 theme name)themefield toBrandingConfig— omitting it gracefully falls back to'light'/'dark'corporate(light) andbusiness(dark) as polished, professional starting themessrc/components/ThemeToggle.astro(new)swap swap-rotatebutton with Sun/Moon Lucide iconsdata-theme-light/data-theme-darkattributes on<html>, keeping the component decoupled frombranding.config.tsat runtimelocalStorage; syncs withprefers-color-schemewhen no saved preference existssrc/layouts/Layout.astrobrandingConfig.themeasdata-theme-light/data-theme-darkattributes on<html>is:inlinescript that runs before first paint to setdata-themecorrectly, preventing any flash of the wrong theme (FODT)src/components/Header.astro<ThemeToggle />in thenavbar-endslot, next to the CTA buttonsrc/styles/global.css@plugin "daisyui"to explicitly list only the two configured themes (corporate --default,business --prefersdark)branding.config.tsBenefits
localStoragebranding.config.tsis all a customizer needs to doaria-label; Sun/Moon icons clearly communicate stateValidation
npm run lint— ✅ no errorsnpm run check— ✅ 0 errors, 0 warningsnpm run build— ✅ builds cleanly, all pages generatedReferences