Last Updated: November 21, 2025
Focus Areas
| Focus |
|---|
Toggle `.dark` on `
`
|
Define colors via CSS variables
|
Commands & Queries
html.classList.toggle('dark')
Switch theme
@media (prefers-color-scheme: dark)
Respect OS
bg-white dark:bg-gray-900
Style per theme
Summary
Class-based dark mode keeps Tailwind components consistent.
💡 Pro Tip:
Store preference in state (localStorage) and respect `prefers-color-scheme`.