Dark Mode is Here

Dark Mode is Here

• 2 min read

Dark mode is live across the entire Brandmine platform.

Automatic Theme Switching

We respect your system preferences:

  • macOS/iOS: Settings → Display & Brightness → Dark
  • Windows: Settings → Personalization → Colors → Dark
  • Android: Settings → Display → Dark theme

The site automatically adapts. No manual toggle needed.

What We Optimized

Semantic Color System

  • ✅ All colors use CSS variables (--bg-primary, --text-primary)
  • ✅ Automatic switching based on prefers-color-scheme
  • ✅ Brand teal adjusts from #38B2AC (light) to #4FD1C5 (dark)

Contrast Validation

  • ✅ All text meets WCAG AA standards in both modes
  • ✅ Light mode teal: Only for backgrounds (fails as text)
  • ✅ Dark mode teal: Passes all tests (10.04:1 contrast ratio)

Component Coverage

  • ✅ All 50+ components support dark mode
  • ✅ Forms, modals, cards, navigation—everything
  • ✅ Edge cases: loading states, validation, empty states

Why Automatic?

User research: Most people want dark mode to match their system preferences. Adding a manual toggle creates friction (where should we store the preference? cookies? localStorage? what’s the default?).

Simplicity: One less decision for users. The system knows what you want.

Battery life: On OLED screens, dark mode can extend battery life by 30-40%.

Technical Details

Foundation: ADR-0034 documents our complete dark mode strategy.

Files:

  • assets/css/base/variables.css (color definitions)
  • assets/css/components/dark-mode.css (1310 lines of component styles)
  • docs/technical/dark-mode-colors.md (complete color reference)

Performance: Zero JavaScript required. Pure CSS with media queries.

What’s Next (Optional)

We may add a manual toggle in the future for users who want to override their system preference. For now, we’re keeping it simple.

Try it out: Switch your device to dark mode and experience Brandmine in a whole new light (or lack thereof).

Update (11 Dec)

I learned that it is a wee bit complicated so had to spend a few hours today troubleshooting and fine-tuning our dark mode setup - but now it seems to be purring like a kitten.