3d98261a51
Uses Tailwind v4 class-based dark mode with a Stimulus controller for toggling. Respects prefers-color-scheme as default, prevents FOUC with an inline script, and persists the user's choice in localStorage. All views updated with dark: variants for backgrounds, text, borders, badges, buttons, and form inputs. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
24 lines
657 B
CSS
24 lines
657 B
CSS
@import "tailwindcss";
|
|
@plugin "@tailwindcss/forms";
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@layer base {
|
|
.dark input:where([type="text"], [type="email"], [type="password"], [type="number"], [type="url"], [type="tel"], [type="search"]),
|
|
.dark textarea,
|
|
.dark select {
|
|
background-color: var(--color-gray-800);
|
|
border-color: var(--color-gray-600);
|
|
color: var(--color-gray-100);
|
|
}
|
|
|
|
.dark input::placeholder,
|
|
.dark textarea::placeholder {
|
|
color: var(--color-gray-400);
|
|
}
|
|
|
|
.dark input:where([type="checkbox"], [type="radio"]) {
|
|
background-color: var(--color-gray-700);
|
|
border-color: var(--color-gray-500);
|
|
}
|
|
}
|