Skip to content

feat: implement dark mode support#3

Open
Julianemeka wants to merge 1 commit into
mainfrom
feat/dark-mode-223
Open

feat: implement dark mode support#3
Julianemeka wants to merge 1 commit into
mainfrom
feat/dark-mode-223

Conversation

@Julianemeka
Copy link
Copy Markdown
Owner

@Julianemeka Julianemeka commented Jun 1, 2026

Closes Vera3289#223

Changes

  • Add inline script in index.html that reads localStorage and prefers-color-scheme before first paint — eliminates flash of unstyled content
  • useDarkMode hook in App.tsx handles all runtime behavior:
    • Detects system preference via prefers-color-scheme media query
    • Manual toggle persisted in localStorage under key paystream-dark
    • Listens for OS-level theme changes (only when no manual override is set)
    • Applies data-theme attribute to <html> element
  • All components styled for both modes via CSS custom properties in [data-theme='dark'] block

@Julianemeka
feat: implement dark mode support (Vera3289#223)
953d175 
- Add inline script to index.html to apply theme before first paint,
  preventing flash of unstyled content on load
- useDarkMode hook (App.tsx) already handles:
  - prefers-color-scheme media query detection
  - Manual toggle persisted in localStorage
  - OS-level change listener (when no manual override set)
  - data-theme attribute applied to <html> for CSS variable switching
- CSS already has full [data-theme='dark'] variable overrides for all components
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Implement dark mode support

1 participant

@Julianemeka