dkam/clinch
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark mode with toggle and localStorage persistence

Browse Source 
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>
This commit is contained in:
Dan Milne
2026-03-22 00:37:58 +11:00
parent 43958f50ce
commit 3d98261a51
38 changed files with 744 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/assets/tailwind/application.css
View File

@@ -1,3 +1,23 @@
@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);
}
}