UnistylesRuntime.colorScheme is not update

[Chanphirom Sok]

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)

[Jacek Pudysz]

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

[Chanphirom Sok]

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

thanks you