i want to handle like whit but, the code not run on browerser the first time
useTask$(({ track }) => {
track(() => themeAppearance.value);
if (isBrowser) {
const savedTheme = localStorage.getItem("themeApp");
console.log("from local storage", savedTheme);
if (savedTheme) {
themeAppearance.value =
savedTheme === "dark" ? ThemeTypes.Dark : ThemeTypes.Ligth;
return;
}
}
});
only if i change the themeAppearance with the button with this function from useThemeHook
const toggleAppearance$ = $(() => {
console.log(themeAppearance.value);
if (themeAppearance.value === ThemeTypes.Dark) {
themeAppearance.value = ThemeTypes.Ligth;
backGroundPrimaryColor.value = BackdrounColor.Ligth;
backGroundSecondaryColor.value = BackdrounColor.Ligth;
textColorPrimary.value = TextColor.HardTextLigthBackground;
textColorSecondary.value = TextColor.LigthTextLigthBackground;
localStorage.setItem("themeApp", ThemeTypes.Ligth);
return;
}
if (
themeAppearance.value === ThemeTypes.Ligth &&
panelBackground === "solid"
) {
themeAppearance.value = ThemeTypes.Dark;
backGroundPrimaryColor.value = BackdrounColor.DarkPrimarySolid;
backGroundSecondaryColor.value = BackdrounColor.DarkSecondarySolid;
textColorPrimary.value = TextColor.HardTextDarkBackground;
textColorSecondary.value = TextColor.LigthTextDarkBackground;
localStorage.setItem("themeApp", ThemeTypes.Dark);
return;
}
if (
themeAppearance.value === ThemeTypes.Ligth &&
panelBackground === "translucent"
) {
themeAppearance.value = ThemeTypes.Dark;
backGroundPrimaryColor.value = BackdrounColor.DarkPrimaryTranslucent;
backGroundSecondaryColor.value = BackdrounColor.DarkSecondaryTranslucent;
textColorPrimary.value = TextColor.HardTextDarkBackground;
textColorSecondary.value = TextColor.LigthTextDarkBackground;
localStorage.setItem("themeApp", ThemeTypes.Dark);
return;
}
});
i tried to use visible task but, don't work forme beacause runs after the first render so it's goin to be a bad user experience its first render with default theme dark and then change to ligth saved theme