From 77d551f7812d67dd21da97d624145bc7f9e98e5a Mon Sep 17 00:00:00 2001 From: Masen Furer Date: Wed, 6 Mar 2024 15:32:08 -0800 Subject: [PATCH] [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 | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py index 590dd5089..e76cdfb67 100644 --- a/reflex/components/radix/themes/base.py +++ b/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."""