adapt Themes

src/styles/themes/ThemeProvider.tsx

@@ -18,7 +18,7 @@ type ThemeProviderProps = React.PropsWithChildren & {
 function ThemeProvider({children, theme: staticThemePreference}: ThemeProviderProps) {
     const themePreference = useThemePreferenceWithStaticOverride(staticThemePreference);
 
-    const theme = useMemo(() => Themes[themePreference], [themePreference]);
+    const theme = useMemo(() => Themes[themePreference].theme, [themePreference]);
 
     return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
 }

src/styles/themes/Themes.ts

@@ -3,9 +3,12 @@ import darkTheme from './default';
 import lightTheme from './light';
 import {ThemeColors, ThemePreferenceWithoutSystem} from './types';
 
+// There might be more themes than just "dark" and "light".
+// Still, status bar, scrollbar and other components might need to adapt based on if the theme is overly light or dark
+// e.g. the StatusBar displays either "light-content" or "dark-content" based on the theme
 const Themes = {
-    [CONST.THEME.LIGHT]: lightTheme,
-    [CONST.THEME.DARK]: darkTheme,
-} satisfies Record<ThemePreferenceWithoutSystem, ThemeColors>;
+    [CONST.THEME.LIGHT]: {theme: lightTheme, isLight: true},
+    [CONST.THEME.DARK]: {theme: darkTheme, isLight: false},
+} satisfies Record<ThemePreferenceWithoutSystem, {theme: ThemeColors; isLight: boolean}>;
 
 export default Themes;