fix FOUC on refresh

[Lendemor]

No description provided.

[codspeed-hq]

CodSpeed Performance Report

Merging #5608 will not alter performance

_{Comparing lendemor/fix_flicker (2b281fd) with main (c9c4203)}

Summary

✅ 8 untouched benchmarks

[greptile-apps]

Greptile Summary

This PR implements a comprehensive fix for Flash of Unstyled Content (FOUC) that occurs when users refresh pages with saved theme preferences. The solution involves two coordinated changes:

Backend Changes (reflex/compiler/utils.py): A new preload_color_theme() function is imported and injected as the very first component in the document head. This creates a synchronous JavaScript script that runs immediately during page load, before any React components hydrate, to read the saved theme from localStorage and apply it to prevent visual flashing.

Frontend Changes (reflex/.templates/web/utils/react-theme.js): The ThemeProvider component now uses an isInitialized state flag to prevent unnecessary localStorage writes during the initial theme loading phase. This eliminates the read-write cycle that was occurring on first render when the component loaded the saved theme from localStorage.

The fix follows a standard pattern used by theme management libraries like next-themes, where a blocking script applies themes before React hydration occurs. This ensures users never see the wrong theme flash when refreshing pages. The two-phase approach in the React component (load first, then mark as initialized for future saves) maintains proper theme persistence while avoiding the initial write that was contributing to the FOUC issue.

Confidence score: 4/5

• This is a well-implemented solution to a common web development problem using established patterns
• The fix addresses both the cause (late React hydration) and prevents side effects (unnecessary localStorage writes)
• The reflex/compiler/utils.py file needs attention to ensure the preload_color_theme import and function work correctly

_{2 files reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}

[adhami3310]

1. we are removing other class names by setting ours
2. it seems classname would expect a resolved theme, not the theme preference, but unsure how that makes a difference or how it's being used