Merge pull request #31636 from margelo/@chrispader/dark-sign-in-page

`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

@@ -1,23 +1,26 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
-import CONST from '@src/CONST';
-import darkTheme from './default';
-import lightTheme from './light';
 import ThemeContext from './ThemeContext';
-import useThemePreference from './useThemePreference';
+import Themes from './Themes';
+import {ThemePreferenceWithoutSystem} from './types';
+import useThemePreferenceWithStaticOverride from './useThemePreferenceWithStaticOverride';
 
 const propTypes = {
     /** Rendered child component */
     children: PropTypes.node.isRequired,
 };
 
-function ThemeProvider(props: React.PropsWithChildren) {
-    const themePreference = useThemePreference();
+type ThemeProviderProps = React.PropsWithChildren & {
+    theme?: ThemePreferenceWithoutSystem;
+};
+
+function ThemeProvider({children, theme: staticThemePreference}: ThemeProviderProps) {
+    const themePreference = useThemePreferenceWithStaticOverride(staticThemePreference);
 
-    const theme = useMemo(() => (themePreference === CONST.THEME.LIGHT ? lightTheme : darkTheme), [themePreference]);
+    const theme = useMemo(() => Themes[themePreference], [themePreference]);
 
-    return <ThemeContext.Provider value={theme}>{props.children}</ThemeContext.Provider>;
+    return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
 }
 
 ThemeProvider.propTypes = propTypes;

src/styles/themes/Themes.ts

@@ -0,0 +1,11 @@
+import CONST from '@src/CONST';
+import darkTheme from './default';
+import lightTheme from './light';
+import {ThemeColors, ThemePreferenceWithoutSystem} from './types';
+
+const Themes = {
+    [CONST.THEME.LIGHT]: lightTheme,
+    [CONST.THEME.DARK]: darkTheme,
+} satisfies Record<ThemePreferenceWithoutSystem, ThemeColors>;
+
+export default Themes;

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);
 

src/styles/themes/useThemePreferenceWithStaticOverride.ts

@@ -0,0 +1,14 @@
+import {ThemePreferenceWithoutSystem} from './types';
+import useThemePreference from './useThemePreference';
+
+const useThemePreferenceWithStaticOverride = (staticThemePreference: ThemePreferenceWithoutSystem | undefined) => {
+    const dynamicThemePreference = useThemePreference();
+
+    // If the "theme" prop is provided, we'll want to use a hardcoded/static theme instead of the currently selected dynamic theme
+    // This is used for example on the "SignInPage", because it should always display in dark mode.
+    const themePreference = staticThemePreference ?? dynamicThemePreference;
+
+    return themePreference;
+};
+
+export default useThemePreferenceWithStaticOverride;