alouette

Re-theme a subtree with accents (brand, danger, info, success, warning) and light/dark modes. Use the accent prop, AccentScope, or ScopedTheme; children always consume base tokens (bg-surface, text-accent, text-sharp, text-muted, border-muted). Tokens are className-only: alouette exports no JS token-read hook. Read the current mode with useCurrentMode. For an accent that toggles at runtime without remounting, use StableAccentScope; inside a portal (a modal or any other overlay), where the scope escapes the themed subtree, use PortalAccentScope. All three, and the pressables, take accent="neutral": the plain mode theme, which drops an inherited accent; with variant="soft" it makes a Button the secondary beside an accented one. A stored light/dark choice is a ColorModePreference ("light" | "dark" | "system") resolved by useResolvedColorMode and applied by the app through ScopedTheme. Load when applying colors, accents or dark mode, or when shipping a custom palette.