Add possibility to select system color scheme

src/constants/theme.ts

@@ -88,7 +88,8 @@ const breakpoints = {
 export const theme = extendTheme({
   breakpoints,
   config: {
-    useSystemColorMode: true,
+    useSystemColorMode: false,
+    initialColorMode: 'light',
   },
   colors: { ...commonColors, ...ProjectColors },
   space,

src/contexts/ColorSchemeContext.ts

@@ -0,0 +1,14 @@
+import { colorSchemesList } from '~constants'
+import createGenericContext from '~utils/createGenericContext'
+
+export type SettingColorSchemeName = typeof colorSchemesList[number]
+export type ColorSchemeName = Exclude<SettingColorSchemeName, 'system'>
+
+export type ColorSchemeContextType = {
+  colorSchemeSetting: SettingColorSchemeName
+  colorScheme: ColorSchemeName
+  setColorSchemeSetting: (newColorScheme: SettingColorSchemeName) => void
+}
+
+export const [useColorScheme, ColorSchemeContextProvider] =
+  createGenericContext<ColorSchemeContextType>('ColorSchemeContext')

src/contexts/index.ts

@@ -1 +1,2 @@
 export * from './AuthContext'
+export * from './ColorSchemeContext'

src/providers/ColorSchemeProvider.tsx

@@ -0,0 +1,73 @@
+import { useAsyncStorage } from '@react-native-async-storage/async-storage'
+import { FC, PropsWithChildren, useEffect } from 'react'
+import { useColorScheme as useRNColorScheme } from 'react-native'
+
+import { colorSchemes, ASYNC_STORAGE_KEYS } from '~constants'
+import {
+  ColorSchemeContextProvider,
+  ColorSchemeContextType,
+  SettingColorSchemeName,
+} from '~contexts'
+import { useState, useMemo, useCallback, useColorMode } from '~hooks'
+
+const defaultColorScheme = colorSchemes.LIGHT
+
+export const ColorSchemeProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { setItem, getItem } = useAsyncStorage(ASYNC_STORAGE_KEYS.COLOR_SCHEME)
+  const systemColorScheme = useRNColorScheme()
+
+  const { setColorMode } = useColorMode()
+  const [colorSchemeSetting, setColorSchemeSetting] = useState<SettingColorSchemeName>(
+    colorSchemes.SYSTEM
+  )
+
+  const colorScheme =
+    (colorSchemeSetting === 'system' ? systemColorScheme : colorSchemeSetting) || defaultColorScheme
+
+  useEffect(() => {
+    const getInitialColorScheme = async () => {
+      getItem((error, savedColorScheme) => {
+        if (!error && savedColorScheme) {
+          setColorSchemeSetting(savedColorScheme as SettingColorSchemeName)
+        } else if (systemColorScheme) {
+          // For old devices it's possible that system color scheme name is null or undefined
+          setColorSchemeSetting(systemColorScheme)
+        } else {
+          setColorSchemeSetting(defaultColorScheme)
+        }
+      })
+    }
+
+    getInitialColorScheme()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+    setColorMode(colorScheme)
+  }, [setColorMode, colorScheme])
+
+  const setNewColorSchemeSetting = useCallback(
+    (newColorScheme: SettingColorSchemeName) => {
+      const oldColorScheme = colorSchemeSetting
+      setColorSchemeSetting(newColorScheme)
+      setItem(newColorScheme, (error) => {
+        if (error) {
+          setColorSchemeSetting(oldColorScheme)
+        }
+        // TODO: Handle error
+      })
+    },
+    [colorSchemeSetting, setItem]
+  )
+
+  const value: ColorSchemeContextType = useMemo(
+    () => ({
+      colorScheme,
+      colorSchemeSetting,
+      setColorSchemeSetting: setNewColorSchemeSetting,
+    }),
+    [colorScheme, colorSchemeSetting, setNewColorSchemeSetting]
+  )
+
+  return <ColorSchemeContextProvider value={value}>{children}</ColorSchemeContextProvider>
+}

src/providers/Providers.tsx

@@ -6,12 +6,12 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { QueryClientProvider, QueryClient } from 'react-query'
 
 import { AuthProvider } from './AuthProvider'
+import { ColorSchemeProvider } from './ColorSchemeProvider'
 import { NotificationsProvider } from './NotificatedProvider'
 
 import { AppLoading, WebWrapper } from '~components'
 import { theme, nativeBaseConfig } from '~constants'
 import { useAppStateActive } from '~hooks'
-import { colorModeManager } from '~services'
 import { checkForUpdates } from '~utils'
 
 const queryClient = new QueryClient({})
@@ -20,18 +20,20 @@ export const Providers = ({ children }: { children: ReactNode }): JSX.Element =>
   useAppStateActive(checkForUpdates, false)
 
   return (
-    <NativeBaseProvider theme={theme} colorModeManager={colorModeManager} config={nativeBaseConfig}>
-      {/* NativeBaseProvider includes SafeAreaProvider so that we don't have to include it in a root render tree */}
+    // NativeBaseProvider includes SafeAreaProvider so that we don't have to include it in a root render tree
+    <NativeBaseProvider theme={theme} config={nativeBaseConfig}>
       {/* @ts-expect-error: error comes from a react-native-notificated library which doesn't have declared children in types required in react 18 */}
       <NotificationsProvider>
         <QueryClientProvider client={queryClient}>
           <AuthProvider>
             <AppLoading>
-              <GestureHandlerRootView style={styles.gestureHandlerRootView}>
-                <BottomSheetModalProvider>
-                  <WebWrapper>{children}</WebWrapper>
-                </BottomSheetModalProvider>
-              </GestureHandlerRootView>
+              <ColorSchemeProvider>
+                <GestureHandlerRootView style={styles.gestureHandlerRootView}>
+                  <BottomSheetModalProvider>
+                    <WebWrapper>{children}</WebWrapper>
+                  </BottomSheetModalProvider>
+                </GestureHandlerRootView>
+              </ColorSchemeProvider>
             </AppLoading>
           </AuthProvider>
         </QueryClientProvider>

src/screens/SettingsScreen.tsx

@@ -1,37 +1,35 @@
-import { ScrollView, Text, Button, Center, ColorMode } from 'native-base'
+import { ScrollView, Text, Button, Center } from 'native-base'
 
 import { Version, Spacer } from '~components'
-import { useAuth, useCallback, useColorMode, useTranslation } from '~hooks'
+import { colorSchemesList } from '~constants'
+import { useColorScheme } from '~contexts'
+import { useAuth, useTranslation } from '~hooks'
 import { noop } from '~utils'
 
 export const SettingsScreen = (): JSX.Element => {
   const { t } = useTranslation()
-  const { colorMode, setColorMode } = useColorMode()
+  const { setColorSchemeSetting, colorSchemeSetting } = useColorScheme()
   const { signOut } = useAuth()
 
-  const handleColorSchemeSettingChange = useCallback(
-    (colorScheme: ColorMode) => () => setColorMode(colorScheme),
-    [setColorMode]
-  )
-
   return (
     <ScrollView>
       <Center flex={1}>
         <Text fontSize="2xl" bold mb={2}>
-          {t('settings_screen.current_theme', { theme: colorMode })}
+          {t('settings_screen.current_theme', { theme: colorSchemeSetting })}
         </Text>
-        {(['light', 'dark'] as ColorMode[]).map((scheme) => {
-          const isSelected = scheme === colorMode
+        {colorSchemesList.map((scheme) => {
+          const isSelected = scheme === colorSchemeSetting
 
           return (
             <Button
               size="lg"
               width="64"
               key={scheme}
               mb={2}
-              onPress={handleColorSchemeSettingChange(scheme)}
+              onPress={() => setColorSchemeSetting(scheme)}
             >
-              {`${scheme}${isSelected ? t('settings_screen.selected') : ''}`}
+              {scheme}
+              {isSelected ? ' - selected' : ''}
             </Button>
           )
         })}

src/services/index.ts

@@ -1,5 +1,4 @@
 export * from './api'
-export * from './ColorSchemeManager'
 export * from './MockedServerService'
 export * from './requests'
 export * from './TokenService'