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