Allowing a user to choose system (adaptive), light or dark theme

[peterjskaltsis]

Hi there, I have an app where the user can choose for the app theme to follow the system theme (adaptive in unistyles) or choose for it to be set to light or dark mode (I store this preference in mmkv).

The docs suggest not to use both useInitialTheme and adaptiveThemes: true. I was wondering if there's a recommended way to support this & how I would select it on app open whilst reducing flickers between light/dark modes?

[peterjskaltsis]

I suppose this might be related to #287?

[jpudysz]

Simply don't initially set adaptiveThemes and initialTheme. During runtime check user preference with MMKV and either set initial theme or enable adaptive themes. All the APIs are available in UnistylesRuntime.

[peterjskaltsis]

Thank you for the prompt reply.

I've tried doing this in my app layout:

import 'src/lib/styles/unistyles';
// ...

export default function RootLayout () {
  const [initialTheme] = useMMKVString('theme');
  useEffect(() => {
    console.log('🌗 Theme —', initialTheme);
    if (initialTheme === 'system' || initialTheme === undefined) {
      // No theme or system theme, so we enable adaptive themes.
      UnistylesRuntime.setAdaptiveThemes(true);
      Appearance.setColorScheme(null);
    } else {
      UnistylesRuntime.setAdaptiveThemes(false);
      UnistylesRuntime.setTheme(initialTheme as keyof UnistylesThemes);
      Appearance.setColorScheme(initialTheme as keyof UnistylesThemes);
    }
  }, [initialTheme]);
  // ...

Though, with no initialTheme or config set in unistyles.ts, I get an error:

// Register breakpoints and themes.
UnistylesRegistry.addBreakpoints(breakpoints)
.addThemes({
  dark: darkTheme,
  light: lightTheme,
})

Error:

Error: Your themes are registered, but you didn't select the initial theme

[jpudysz]

useEffect fires soon after the view is rendered, so you need to handle it earlier. Also, keep in mind that the useStyles hook will trigger without any theme.

You don’t need to use MMKV this way. Simply move this logic outside the React context. Get the MMKV value without the hook, and everything will work as expected.

You just need to resolve the settings before the first useStyles hook is called.

[peterjskaltsis]

Thank you for the back & forth @jpudysz 🙏 I got this working by moving the logic out of the hook