UnistylesRuntime.colorScheme is not update
chanphiromsok opened this issue · comments
Description
switch theme to dark or light not update correctly
export const useSwitchTheme = () => {
const themeColor = UnistylesRuntime.colorScheme;
const switchTheme = useNonReactiveCallback(() => {
UnistylesRuntime.setTheme(themeColor === 'light' ? 'dark' : 'light');
});
const switchToDarkTheme = useCallback(() => {
UnistylesRuntime.setTheme('dark');
}, []);
const switchToLightTheme = useCallback(() => {
UnistylesRuntime.setTheme('light');
}, []);
return {
switchTheme,
themeColor,
switchToDarkTheme,
switchToLightTheme,
};
};
Steps to reproduce
click switch color schema based on UnistylesRuntime.colorScheme light or dark but after setTheme value is not updated
is this intent not to be reactive update ?
Snack or a link to a repository (optional)
No response
Unistyles version
react-native-unistyles": "^2.0.0-rc.3
React Native version
0.72.6
Platforms
Android
Engine
Hermes
Architecture
Paper (old)
Hey 👋
colorScheme
has nothing to do with your theme.
colorScheme
is your device's preferred color, like light
or dark
.
On the other hand, theme
is your current theme.
Even though you may have the same names for colorScheme
and theme
, one doesn't update the other. To update colorScheme,
you need to change device settings.
If you want your theme
to change automatically based on the color scheme, please refer to the theming section: https://reactnativeunistyles.vercel.app/reference/theming/#adaptive-themes
The correct code should be:
export const useSwitchTheme = () => {
const themeColor = UnistylesRuntime.themeName;
const switchTheme = useNonReactiveCallback(() => {
UnistylesRuntime.setTheme(themeColor === 'light' ? 'dark' : 'light');
});
const switchToDarkTheme = useCallback(() => {
UnistylesRuntime.setTheme('dark');
}, []);
const switchToLightTheme = useCallback(() => {
UnistylesRuntime.setTheme('light');
}, []);
return {
switchTheme,
themeColor,
switchToDarkTheme,
switchToLightTheme,
};
};
More info: https://reactnativeunistyles.vercel.app/reference/unistyles-runtime/#getters
Hey 👋
colorScheme
has nothing to do with your theme.
colorScheme
is your device's preferred color, likelight
ordark
.On the other hand,
theme
is your current theme.Even though you may have the same names for
colorScheme
andtheme
, one doesn't update the other. To updatecolorScheme,
you need to change device settings.If you want your
theme
to change automatically based on the color scheme, please refer to the theming section: https://reactnativeunistyles.vercel.app/reference/theming/#adaptive-themesThe correct code should be:
export const useSwitchTheme = () => { const themeColor = UnistylesRuntime.themeName; const switchTheme = useNonReactiveCallback(() => { UnistylesRuntime.setTheme(themeColor === 'light' ? 'dark' : 'light'); }); const switchToDarkTheme = useCallback(() => { UnistylesRuntime.setTheme('dark'); }, []); const switchToLightTheme = useCallback(() => { UnistylesRuntime.setTheme('light'); }, []); return { switchTheme, themeColor, switchToDarkTheme, switchToLightTheme, }; };More info: https://reactnativeunistyles.vercel.app/reference/unistyles-runtime/#getters
thanks you