Dark Mode Implementation

created by Bob Smith at Jan 10, 2026, 10:00 AM

Users have been requesting dark mode for a while now. We should discuss the best approach before implementing.

Options:

  1. CSS custom properties (variables) with theme switching
  2. Tailwind's dark: variant with class-based toggling
  3. Separate CSS files per theme

Considerations:

  • Performance (CSS size, switching speed)
  • Developer experience (ease of adding new components)
  • User preference persistence
  • System preference detection

I'm leaning toward option 2 since we're already using Tailwind, but open to other ideas.

Resolution Summary

We'll use CSS custom properties with a data-theme attribute on the html element. Tailwind's dark: variant will handle most cases, with custom properties for complex components. User preference stored in localStorage with system preference as fallback.

Activity

TU
Test UserJan 10, 2026, 11:15 AM

Have we considered using Tailwind's built-in dark mode support? We could use the `class` strategy and toggle a `.dark` class on the root.

BS
Bob SmithJan 10, 2026, 11:30 AM

That's what I was thinking. The `media` strategy won't work for us since we want users to be able to override their system preference.

AJ
Alice JohnsonJan 10, 2026, 02:00 PM

Quick note: we should also handle the flash of incorrect theme on page load. I've seen this done with a small inline script in the <head> that reads localStorage before the body renders.

TU
Test UserJan 10, 2026, 02:20 PM

Great catch! We definitely don't want that FOUC. I'll make sure to include that in the implementation.

BS
Bob SmithJan 11, 2026, 09:00 AM

I think we have a plan. Let me summarize and create the task.

Bob Smith changed status from open to resolved

Jan 11, 2026, 09:05 AM