Description
johdanike opened on Jun 25
Member
📁 Implementation Directory
components/shared/ThemeToggle.tsx
🎯 Goal
Enhance the Theme Toggle to respect the user's OS-level preferences and eliminate the Flash of Unstyled Content (FOUC).
📋 Requirements
- Check
window.matchMedia('(prefers-color-scheme: dark)') on initial load.
- Ensure the user's manual override is saved to
localStorage and prioritized over the OS preference.
- Inject a blocking script in the document
<head> to apply the theme class before React hydrates to prevent FOUC.
🔧 Technical Scope
React, Tailwind Dark Mode, DOM Manipulation
🌿 Branch
git checkout -b enhance/theme-toggle-persistence
✅ Acceptance Criteria
- Refreshing the page must load the saved theme instantly with absolutely zero flash of the opposite theme.
- Strict Layered Architecture: Implement using the Component -> Hook -> Service pattern
- Data Source: Response data must be retrieved from the backend API. No Inline Mock Objects
- Screenshot of all implementations must be included in PR
- AI-generated PR submissions are strictly disallowed
- Closes #[issue_id] with a work summary included in the PR body
- Note a default in any of this will result to issue not being closed nor merged
📌 PR Requirements
- ⚠️ Assignment is required before starting — comment to request assignment
- PR must comply fully with CONTRIBUTING.md
- AI Agent submissions are DISALLOWED and will be closed without review
- Upload a screenshot showing all unit tests passing or API response
- PR description must include: Closes #[issue_id] and a brief summary of work done
💬 Example Commit
enhance(shared): implement os-aware theme persistence and fix fouc
Description
johdanike opened on Jun 25
Member
📁 Implementation Directory
components/shared/ThemeToggle.tsx🎯 Goal
Enhance the Theme Toggle to respect the user's OS-level preferences and eliminate the Flash of Unstyled Content (FOUC).
📋 Requirements
window.matchMedia('(prefers-color-scheme: dark)')on initial load.localStorageand prioritized over the OS preference.<head>to apply the theme class before React hydrates to prevent FOUC.🔧 Technical Scope
React, Tailwind Dark Mode, DOM Manipulation
🌿 Branch
git checkout -b enhance/theme-toggle-persistence✅ Acceptance Criteria
📌 PR Requirements
💬 Example Commit
enhance(shared): implement os-aware theme persistence and fix fouc