Description
A critical UX flaw exists in the theme initialization pipeline. If a user sets their OS preference to "Dark Mode", or previously selected Dark Mode on a specific portfolio, the site experiences a severe "Flash of Unstyled Content" (FOUC) upon initial load. The browser paints the entire application in glaring white Light Mode for roughly 300 milliseconds before the React Javascript bundle finishes executing, realizes the preference is Dark Mode, and aggressively repaints the screen black. This blinding flash creates a jarring, unprofessional user experience.
Proposed Solution
- Audit the theme initialization sequence, specifically the React
useEffect hook responsible for reading localStorage or window.matchMedia.
- The issue is caused by relying on React (Client-Side Javascript) to dictate the initial paint color.
- Engineer a blocking, synchronous
<script> tag and physically inject it directly into the <head> of the index.html document, completely outside the React bundle.
- This minuscule script must instantly check
localStorage and OS preferences, and apply the data-theme="dark" attribute to the <html> root tag before the browser's HTML parser is allowed to render the <body>.
- This mathematically guarantees that the browser's very first paint is perfectly synchronized with the correct theme, entirely eliminating the blinding white flash and creating a flawless, premium loading experience.
Description
A critical UX flaw exists in the theme initialization pipeline. If a user sets their OS preference to "Dark Mode", or previously selected Dark Mode on a specific portfolio, the site experiences a severe "Flash of Unstyled Content" (FOUC) upon initial load. The browser paints the entire application in glaring white Light Mode for roughly 300 milliseconds before the React Javascript bundle finishes executing, realizes the preference is Dark Mode, and aggressively repaints the screen black. This blinding flash creates a jarring, unprofessional user experience.
Proposed Solution
useEffecthook responsible for readinglocalStorageorwindow.matchMedia.<script>tag and physically inject it directly into the<head>of theindex.htmldocument, completely outside the React bundle.localStorageand OS preferences, and apply thedata-theme="dark"attribute to the<html>root tag before the browser's HTML parser is allowed to render the<body>.