Repository navigation
v1.4.0
Added
-
An appearance preference — light, dark or system — on the profile page of all three stacks (#26). The stubs already carried 315
dark:classes, but nothing could reach them:dark:followedprefers-color-scheme, so an application took whatever the operating system said. The choice is stored inlocalStorage, and system follows the device and tracks it live.Each stylesheet now redefines the variant, since Tailwind v4 no longer configures dark mode in JavaScript:
@custom-variant dark (&:where(.dark, .dark *));
The layouts apply the resulting
darkclass in an inline<head>script before first paint, so the page never flashes the wrong theme. A consequence worth knowing: the theme now depends on JavaScript, so with scripting disabled an application always renders light where it previously followed the operating system.
Fixed
- Dark mode gaps that were already broken for anyone whose operating system was set to dark, and which the preference control made obvious. React's
AuthenticatedLayoutcarried onedark:class where Vue's had fifteen, leaving a white navigation bar and header above a dark page; the missing variants are ported from the Vue layout. Four wrappers lackeddark:bg-gray-900, leaving a light grey page behind dark cards — hotwire's application layout, React'sAuthenticatedLayoutandGuestLayout, and the Inertia ERB wrappers for both stacks.
Full Changelog: v1.3.1...v1.4.0