[REF-1994] ThemePanel: clear chakra-ui-color-mode key when using theme panel (#2799)

The ThemePanel fights with the ThemeProvider when the user color preference key differs from the `appearance` prop specified in the theme. To avoid issues when using the ThemePanel (in development), clear out the user color preference before loading the page and before unloading the page (to ensure it does not freeze on reload).

Clearing the user preference isn't ideal production behavior, but typically the
ThemePanel is only used during development for trying out different styles, and
having it not freeze the app is better dev behavior.

Fix #2650

reflex/components/radix/themes/base.py

@@ -207,6 +207,27 @@ class ThemePanel(RadixThemesComponent):
     # Whether the panel is open. Defaults to False.
     default_open: Var[bool]
 
+    def _get_imports(self) -> dict[str, list[imports.ImportVar]]:
+        return imports.merge_imports(
+            super()._get_imports(),
+            {
+                "react": [imports.ImportVar(tag="useEffect")],
+            },
+        )
+
+    def _get_hooks(self) -> str | None:
+        # The panel freezes the tab if the user color preference differs from the
+        # theme "appearance", so clear it out when theme panel is used.
+        return """
+            useEffect(() => {
+                if (typeof window !== 'undefined') {
+                    window.onbeforeunload = () => {
+                        localStorage.removeItem('chakra-ui-color-mode');
+                    }
+                    window.onbeforeunload();
+                }
+            }, [])"""
+
 
 class RadixThemesColorModeProvider(Component):
     """Next-themes integration for radix themes components."""