SignInPage always dark mode

src/pages/signin/SignInPage.js

@@ -14,6 +14,8 @@ import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import Performance from '@libs/Performance';
 import * as StyleUtils from '@styles/StyleUtils';
+import ThemeProvider from '@styles/themes/ThemeProvider';
+import ThemeStylesProvider from '@styles/ThemeStylesProvider';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as Session from '@userActions/Session';
@@ -135,7 +137,7 @@ function getRenderOptions({hasLogin, hasValidateCode, account, isPrimaryLogin, i
     };
 }
 
-function SignInPage({credentials, account, isInModal, activeClients, preferredLocale}) {
+function SignInPageInner({credentials, account, isInModal, activeClients, preferredLocale}) {
     const styles = useThemeStyles();
     const {translate, formatPhoneNumber} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -269,18 +271,30 @@ function SignInPage({credentials, account, isInModal, activeClients, preferredLo
         </View>
     );
 }
+SignInPageInner.propTypes = propTypes;
+SignInPageInner.defaultProps = defaultProps;
+SignInPageInner.displayName = 'SignInPage';
 
-SignInPage.propTypes = propTypes;
-SignInPage.defaultProps = defaultProps;
-SignInPage.displayName = 'SignInPage';
+function SignInPage(props) {
+    return (
+        <ThemeProvider theme={CONST.THEME.DARK}>
+            <ThemeStylesProvider>
+                <SignInPageInner
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...props}
+                />
+            </ThemeStylesProvider>
+        </ThemeProvider>
+    );
+}
 
 export default withOnyx({
     account: {key: ONYXKEYS.ACCOUNT},
     credentials: {key: ONYXKEYS.CREDENTIALS},
-    /** 
-  This variable is only added to make sure the component is re-rendered 
-  whenever the activeClients change, so that we call the 
-  ActiveClientManager.isClientTheLeader function 
+    /**
+  This variable is only added to make sure the component is re-rendered
+  whenever the activeClients change, so that we call the
+  ActiveClientManager.isClientTheLeader function
   everytime the leader client changes.
   We use that function to prevent repeating code that checks which client is the leader.
   */

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,26 @@ 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: staticThemePreference}: ThemeProviderProps) {
     const themePreference = useThemePreference();
 
-    const theme = useMemo(() => (themePreference === CONST.THEME.LIGHT ? lightTheme : darkTheme), [themePreference]);
+    const isLightTheme = (staticThemePreference ?? themePreference) === CONST.THEME.LIGHT;
+
+    const theme = useMemo(() => (isLightTheme ? lightTheme : darkTheme), [isLightTheme]);
 
-    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);