Add dark mode support #110

New issue

Closed

opened 2026-08-01 00:11:39 +02:00 by myrmidex · 0 comments

myrmidex commented

2026-08-01 00:11:39 +02:00

Owner

Summary

The app is light-only. There are zero dark: variants anywhere in resources/views/, and darkMode is not configured in tailwind.config.js.

Users browsing with a dark OS/browser theme get a fully light UI — bright white cards and modals against their otherwise dark environment.

Current state

No dark: variants in any view
No darkMode strategy configured
All surfaces hardcoded: bg-white, text-gray-900, border-gray-300, etc.

Why this surfaced

Discovered while fixing #108. The modal backdrop originally used bg-gray-500/75 — a mid-grey tuned for light UIs — which in dark mode read as a washed-out haze rather than a dim. Changing it to bg-gray-900/50 backdrop-blur-sm improved things in both themes, but the modal panel itself is still bg-white, so it remains a bright card on a dark page.

That fix treated the symptom. This ticket is the actual cause.

Scope

This is a broad visual change touching effectively every view:

Configure a darkMode strategy (class recommended, so a toggle is possible; media if following the OS is sufficient)
Add dark: variants across all surfaces, text, borders, and form controls
Theme the shared x-form-modal component and the Breeze x-modal
Decide on toggle vs. OS-follow; if toggle, persist the preference
Verify contrast ratios in both themes

Affected areas

Layouts: layouts/app.blade.php, layouts/guest.blade.php, layouts/onboarding.blade.php
All Livewire views: dashboard, feeds, channels, routes, articles, settings, onboarding
Components: form-modal, modal, dropdown, page-header, text-input, buttons, notification-bell
Profile partials

Notes

Tailwind v4 handles dark mode differently from v3 — the strategy is configured via CSS (@variant dark) rather than the darkMode key in the config file. Check the v4 dark mode docs before starting.

Worth doing after #109 (renamed utility migration), so the utility scale is consistent first.

## Summary The app is light-only. There are **zero `dark:` variants** anywhere in `resources/views/`, and `darkMode` is not configured in `tailwind.config.js`. Users browsing with a dark OS/browser theme get a fully light UI — bright white cards and modals against their otherwise dark environment. ## Current state - No `dark:` variants in any view - No `darkMode` strategy configured - All surfaces hardcoded: `bg-white`, `text-gray-900`, `border-gray-300`, etc. ## Why this surfaced Discovered while fixing #108. The modal backdrop originally used `bg-gray-500/75` — a mid-grey tuned for light UIs — which in dark mode read as a washed-out haze rather than a dim. Changing it to `bg-gray-900/50 backdrop-blur-sm` improved things in both themes, but the modal panel itself is still `bg-white`, so it remains a bright card on a dark page. That fix treated the symptom. This ticket is the actual cause. ## Scope This is a broad visual change touching effectively every view: - Configure a `darkMode` strategy (`class` recommended, so a toggle is possible; `media` if following the OS is sufficient) - Add `dark:` variants across all surfaces, text, borders, and form controls - Theme the shared `x-form-modal` component and the Breeze `x-modal` - Decide on toggle vs. OS-follow; if toggle, persist the preference - Verify contrast ratios in both themes ## Affected areas - Layouts: `layouts/app.blade.php`, `layouts/guest.blade.php`, `layouts/onboarding.blade.php` - All Livewire views: dashboard, feeds, channels, routes, articles, settings, onboarding - Components: `form-modal`, `modal`, `dropdown`, `page-header`, `text-input`, buttons, `notification-bell` - Profile partials ## Notes Tailwind v4 handles dark mode differently from v3 — the strategy is configured via CSS (`@variant dark`) rather than the `darkMode` key in the config file. Check the [v4 dark mode docs](https://tailwindcss.com/docs/dark-mode) before starting. Worth doing *after* #109 (renamed utility migration), so the utility scale is consistent first.