How to implement theme select with 3 values? (System, Dark, Light)

[EliasGit117]

My attempt.

Theme store

import { create } from 'zustand';
import { createJSONStorage, persist } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

type TTheme = 'light' | 'dark' | 'system';

interface IThemeStoreState {
  theme: TTheme;
}

interface IThemeStoreActions {
  setTheme: (theme: TTheme) => void;
}

export const useThemeStore = create<IThemeStoreState & IThemeStoreActions>()(
  persist(
    (set) => ({
      theme: 'system',
      setTheme: (theme) => set({ theme })
    }),
    {
      name: 'theme-storage',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

Theme provider

import { PropsWithChildren, useEffect } from 'react';
import * as React from 'react';
import { Platform } from 'react-native';
import { setAndroidNavigationBar } from '~/lib/android-navigation-bar';
import { StatusBar } from 'expo-status-bar';
import { NAV_THEME } from '~/lib/constants';
// @ts-ignore
import { DarkTheme, DefaultTheme, Theme, ThemeProvider as RNThemeProvider } from '@react-navigation/native';
import { useThemeStore } from '~/stores/theme-store';
import { useColorScheme } from 'react-native';

interface IProps extends PropsWithChildren {

}


const LIGHT_THEME: Theme = {
  ...DefaultTheme,
  colors: NAV_THEME.light
};
const DARK_THEME: Theme = {
  ...DarkTheme,
  colors: NAV_THEME.dark
};


const ThemeProvider = ({ children }: IProps) => {
  const hasMounted = React.useRef(false);
  const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);

  const systemColorScheme = useColorScheme();
  const { theme, setTheme } = useThemeStore();
  const themeValue = theme === 'system' ? systemColorScheme ?? 'light' : theme;
  const isDarkColorScheme = themeValue === 'dark';

  useIsomorphicLayoutEffect(() => {
    if (hasMounted.current)
      return;

    if (Platform.OS === 'web')
      // Adds the background color to the html element to prevent white background on overscroll.
     document.documentElement.classList.add('bg-background');

    setAndroidNavigationBar(themeValue).then();
    setIsColorSchemeLoaded(true);
    hasMounted.current = true;
  }, []);

  useEffect(() => {
    if (!hasMounted.current)
      return;

    setAndroidNavigationBar(themeValue).then();
  }, [theme, systemColorScheme]);

  if (!isColorSchemeLoaded) {
    return null;
  }

  return (
    <RNThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
      <StatusBar style={isDarkColorScheme ? 'light' : 'dark'}/>
      {children}
    </RNThemeProvider>
  );
};

export default ThemeProvider;


const useIsomorphicLayoutEffect =
  Platform.OS === 'web' && typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;