SignInPage always dark mode

src/pages/signin/SignInModal.js

@@ -2,6 +2,8 @@ import React from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Navigation from '@libs/Navigation/Navigation';
+import ThemeProvider from '@styles/themes/ThemeProvider';
+import ThemeStylesProvider from '@styles/ThemeStylesProvider';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import SignInPage from './SignInPage';
@@ -10,7 +12,7 @@ const propTypes = {};
 
 const defaultProps = {};
 
-function SignInModal() {
+function SignInModalInner() {
     const styles = useThemeStyles();
     if (!Session.isAnonymousUser()) {
         // Sign in in RHP is only for anonymous users
@@ -23,14 +25,24 @@ function SignInModal() {
             style={[styles.highlightBG]}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID={SignInModal.displayName}
+            testID={SignInModalInner.displayName}
         >
             <HeaderWithBackButton onBackButtonPress={Navigation.dismissModal} />
             <SignInPage isInModal />
         </ScreenWrapper>
     );
 }
 
+function SignInModal() {
+    return (
+        <ThemeProvider theme="dark">
+            <ThemeStylesProvider>
+                <SignInModalInner />
+            </ThemeStylesProvider>
+        </ThemeProvider>
+    );
+}
+
 SignInModal.propTypes = propTypes;
 SignInModal.defaultProps = defaultProps;
 SignInModal.displayName = 'SignInModal';

src/styles/ThemeStylesProvider.tsx

@@ -3,9 +3,7 @@ import {stylesGenerator} from './styles';
 import useTheme from './themes/useTheme';
 import ThemeStylesContext from './ThemeStylesContext';
 
-type ThemeStylesProviderProps = {
-    children: React.ReactNode;
-};
+type ThemeStylesProviderProps = React.PropsWithChildren;
 
 function ThemeStylesProvider({children}: ThemeStylesProviderProps) {
     const theme = useTheme();

src/styles/themes/ThemeProvider.tsx

@@ -5,19 +5,24 @@ import CONST from '@src/CONST';
 import darkTheme from './default';
 import lightTheme from './light';
 import ThemeContext from './ThemeContext';
+import {ThemePreferenceWithoutSystem} from './types';
 import useThemePreference from './useThemePreference';
 
 const propTypes = {
     /** Rendered child component */
     children: PropTypes.node.isRequired,
 };
 
-function ThemeProvider(props: React.PropsWithChildren) {
+type ThemeProviderProps = React.PropsWithChildren & {
+    theme?: ThemePreferenceWithoutSystem;
+};
+
+function ThemeProvider({children, theme: themePreferenceProp}: ThemeProviderProps) {
     const themePreference = useThemePreference();
 
-    const theme = useMemo(() => (themePreference === CONST.THEME.LIGHT ? lightTheme : darkTheme), [themePreference]);
+    const theme = useMemo(() => ((themePreferenceProp ?? themePreference) === CONST.THEME.LIGHT ? lightTheme : darkTheme), [themePreference, themePreferenceProp]);
 
-    return <ThemeContext.Provider value={theme}>{props.children}</ThemeContext.Provider>;
+    return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
 }
 
 ThemeProvider.propTypes = propTypes;

src/styles/themes/types.ts

@@ -1,5 +1,10 @@
+import CONST from '@src/CONST';
+
 type Color = string;
 
+type ThemePreference = (typeof CONST.THEME)[keyof typeof CONST.THEME];
+type ThemePreferenceWithoutSystem = Exclude<ThemePreference, 'system'>;
+
 type ThemeColors = {
     // Figma keys
     appBG: Color;
@@ -86,4 +91,4 @@ type ThemeColors = {
     PAGE_BACKGROUND_COLORS: Record<string, Color>;
 };
 
-export {type ThemeColors, type Color};
+export {type ThemePreference, type ThemePreferenceWithoutSystem, type ThemeColors, type Color};

src/styles/themes/useThemePreference.ts

@@ -2,11 +2,10 @@ import {useContext, useEffect, useState} from 'react';
 import {Appearance, ColorSchemeName} from 'react-native';
 import {PreferredThemeContext} from '@components/OnyxProvider';
 import CONST from '@src/CONST';
-
-type ThemePreference = typeof CONST.THEME.LIGHT | typeof CONST.THEME.DARK;
+import {ThemePreferenceWithoutSystem} from './types';
 
 function useThemePreference() {
-    const [themePreference, setThemePreference] = useState<ThemePreference>(CONST.THEME.DEFAULT);
+    const [themePreference, setThemePreference] = useState<ThemePreferenceWithoutSystem>(CONST.THEME.DEFAULT);
     const [systemTheme, setSystemTheme] = useState<ColorSchemeName>();
     const preferredThemeFromStorage = useContext(PreferredThemeContext);