theme: Split setting/actual; add getThemeToUse as no-op

This is an NFC change except for the calls to `useColorScheme`
it adds.  We don't yet do anything with the result -- that's
coming later in this series of commits -- but it will sometimes
introduce a re-render, namely when the OS-level theme changes.

Author: BigHeadCreations

src/boot/OfflineNoticeProvider.js

@@ -1,7 +1,15 @@
 // @flow strict-local
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import type { Node } from 'react';
-import { AccessibilityInfo, View, Animated, LayoutAnimation, Platform, Easing } from 'react-native';
+import {
+  AccessibilityInfo,
+  View,
+  Animated,
+  LayoutAnimation,
+  Platform,
+  Easing,
+  useColorScheme,
+} from 'react-native';
 import NetInfo from '@react-native-community/netinfo';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
@@ -10,6 +18,7 @@ import type { DimensionValue } from 'react-native/Libraries/StyleSheet/StyleShee
 import * as logging from '../utils/logging';
 import { useDispatch, useGlobalSelector } from '../react-redux';
 import { getGlobalSession, getGlobalSettings } from '../directSelectors';
+import { getThemeToUse } from '../settings/settingsSelectors';
 import { useHasStayedTrueForMs, usePrevious } from '../reactUtils';
 import type { JSONableDict } from '../utils/jsonable';
 import { createStyleSheet } from '../styles';
@@ -148,6 +157,8 @@ const backgroundColorForTheme = (theme: ThemeName): string =>
  */
 export function OfflineNoticeProvider(props: ProviderProps): Node {
   const theme = useGlobalSelector(state => getGlobalSettings(state).theme);
+  const osScheme = useColorScheme();
+  const themeToUse = getThemeToUse(theme, osScheme);
   const _ = useContext(TranslationContext);
   const isOnline = useGlobalSelector(state => getGlobalSession(state).isOnline);
   const shouldShowUncertaintyNotice = useShouldShowUncertaintyNotice();
@@ -249,7 +260,7 @@ export function OfflineNoticeProvider(props: ProviderProps): Node {
 
           // If changing, also change the status bar color in
           // OfflineNoticePlaceholder.
-          backgroundColor: backgroundColorForTheme(theme),
+          backgroundColor: backgroundColorForTheme(themeToUse),
 
           justifyContent: 'center',
           alignItems: 'center',
@@ -262,7 +273,7 @@ export function OfflineNoticeProvider(props: ProviderProps): Node {
         },
         noticeText: { fontSize: 14 },
       }),
-    [isNoticeVisible, theme],
+    [isNoticeVisible, themeToUse],
   );
 
   /**
@@ -382,6 +393,8 @@ type PlaceholderProps = $ReadOnly<{|
  */
 export function OfflineNoticePlaceholder(props: PlaceholderProps): Node {
   const theme = useGlobalSelector(state => getGlobalSettings(state).theme);
+  const osScheme = useColorScheme();
+  const themeToUse = getThemeToUse(theme, osScheme);
   const { style: callerStyle } = props;
 
   const { isNoticeVisible, noticeContentAreaHeight } = useContext(OfflineNoticeContext);
@@ -451,7 +464,7 @@ export function OfflineNoticePlaceholder(props: PlaceholderProps): Node {
         isNoticeVisible && (
           <ZulipStatusBar
             // Should match the notice's surface; see OfflineNoticeProvider.
-            backgroundColor={backgroundColorForTheme(theme)}
+            backgroundColor={backgroundColorForTheme(themeToUse)}
           />
         )
       }

src/boot/ThemeProvider.js

@@ -2,11 +2,13 @@
 
 import React from 'react';
 import type { Node } from 'react';
+import { useColorScheme } from 'react-native';
 
 import { useGlobalSelector } from '../react-redux';
 import { getGlobalSettings } from '../directSelectors';
 import { themeData, ThemeContext } from '../styles/theme';
 import ZulipStatusBar from '../common/ZulipStatusBar';
+import { getThemeToUse } from '../settings/settingsSelectors';
 
 type Props = $ReadOnly<{|
   children: Node,
@@ -15,8 +17,11 @@ type Props = $ReadOnly<{|
 export default function ThemeProvider(props: Props): Node {
   const { children } = props;
   const theme = useGlobalSelector(state => getGlobalSettings(state).theme);
+  const osScheme = useColorScheme();
+  const themeToUse = getThemeToUse(theme, osScheme);
+
   return (
-    <ThemeContext.Provider value={themeData[theme]}>
+    <ThemeContext.Provider value={themeData[themeToUse]}>
       <ZulipStatusBar />
       {children}
     </ThemeContext.Provider>

src/boot/ZulipSafeAreaProvider.js

@@ -1,11 +1,13 @@
 // @flow strict-local
 import * as React from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { useColorScheme } from 'react-native';
 
 import { BRAND_COLOR } from '../styles';
 import { useGlobalSelector } from '../react-redux';
 import { getGlobalSettings, getIsHydrated } from '../directSelectors';
 import { themeData } from '../styles/theme';
+import { getThemeToUse } from '../settings/settingsSelectors';
 
 type Props = {|
   +children: React.Node,
@@ -27,14 +29,18 @@ export default function ZulipSafeAreaProvider(props: Props): React.Node {
   //
   // We can make this quirk virtually invisible by giving it the background
   // color used across the app.
+  const osScheme = useColorScheme();
+
   const backgroundColor = useGlobalSelector(state => {
     if (!getIsHydrated(state)) {
       // The only screen we'll be showing at this point is the loading
       // screen.  Match that screen's background.
       return BRAND_COLOR;
     }
 
-    return themeData[getGlobalSettings(state).theme].backgroundColor;
+    const theme = getGlobalSettings(state).theme;
+    const themeToUse = getThemeToUse(theme, osScheme);
+    return themeData[themeToUse].backgroundColor;
   });
 
   return <SafeAreaProvider style={{ backgroundColor }}>{props.children}</SafeAreaProvider>;

src/common/Popup.js

@@ -1,11 +1,12 @@
 /* @flow strict-local */
 import React, { useContext } from 'react';
 import type { Node } from 'react';
-import { View } from 'react-native';
+import { View, useColorScheme } from 'react-native';
 
 import { ThemeContext, createStyleSheet } from '../styles';
 import { useGlobalSelector } from '../react-redux';
 import { getGlobalSettings } from '../directSelectors';
+import { getThemeToUse } from '../settings/settingsSelectors';
 
 const styles = createStyleSheet({
   popup: {
@@ -45,8 +46,12 @@ type Props = $ReadOnly<{|
  */
 export default function Popup(props: Props): Node {
   const themeContext = useContext(ThemeContext);
+  const theme = useGlobalSelector(state => getGlobalSettings(state).theme);
+  const osScheme = useColorScheme();
+  const themeToUse = getThemeToUse(theme, osScheme);
+
   // TODO(color/theme): find a cleaner way to express this
-  const isDarkTheme = useGlobalSelector(state => getGlobalSettings(state).theme !== 'default');
+  const isDarkTheme = themeToUse !== 'default';
   return (
     <View style={[{ backgroundColor: themeContext.backgroundColor }, styles.popup]}>
       <View style={isDarkTheme && styles.overlay}>{props.children}</View>

src/common/ZulipStatusBar.js

@@ -2,14 +2,15 @@
 
 import React from 'react';
 import type { Node } from 'react';
-import { Platform, StatusBar } from 'react-native';
+import { Platform, StatusBar, useColorScheme } from 'react-native';
 // $FlowFixMe[untyped-import]
 import Color from 'color';
 
 import type { ThemeName } from '../types';
 import { useGlobalSelector } from '../react-redux';
 import { foregroundColorFromBackground } from '../utils/color';
 import { getGlobalSession, getGlobalSettings } from '../selectors';
+import { getThemeToUse } from '../settings/settingsSelectors';
 
 type BarStyle = React$ElementConfig<typeof StatusBar>['barStyle'];
 
@@ -46,9 +47,13 @@ type Props = $ReadOnly<{|
 export default function ZulipStatusBar(props: Props): Node {
   const { hidden = false } = props;
   const theme = useGlobalSelector(state => getGlobalSettings(state).theme);
+  const osScheme = useColorScheme();
+  const themeToUse = getThemeToUse(theme, osScheme);
+
   const orientation = useGlobalSelector(state => getGlobalSession(state).orientation);
   const backgroundColor = props.backgroundColor;
-  const statusBarColor = getStatusBarColor(backgroundColor, theme);
+  const statusBarColor = getStatusBarColor(backgroundColor, themeToUse);
+
   return (
     orientation === 'PORTRAIT' && (
       <StatusBar

src/nav/ZulipNavigationContainer.js

@@ -1,13 +1,15 @@
 /* @flow strict-local */
 import React, { useContext, useEffect } from 'react';
 import type { Node } from 'react';
+import { useColorScheme } from 'react-native';
 import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
 
 import { useGlobalSelector } from '../react-redux';
 import { ThemeContext } from '../styles';
 import * as NavigationService from './NavigationService';
 import { getGlobalSettings } from '../selectors';
 import AppNavigator from './AppNavigator';
+import { getThemeToUse } from '../settings/settingsSelectors';
 
 type Props = $ReadOnly<{||}>;
 
@@ -23,6 +25,8 @@ type Props = $ReadOnly<{||}>;
  */
 export default function ZulipAppContainer(props: Props): Node {
   const themeName = useGlobalSelector(state => getGlobalSettings(state).theme);
+  const osScheme = useColorScheme();
+  const themeToUse = getThemeToUse(themeName, osScheme);
 
   useEffect(
     () =>
@@ -36,11 +40,11 @@ export default function ZulipAppContainer(props: Props): Node {
 
   const themeContext = useContext(ThemeContext);
 
-  const BaseTheme = themeName === 'night' ? DarkTheme : DefaultTheme;
+  const BaseTheme = themeToUse === 'night' ? DarkTheme : DefaultTheme;
 
   const theme = {
     ...BaseTheme,
-    dark: themeName === 'night',
+    dark: themeToUse === 'night',
     colors: {
       ...BaseTheme.colors,
       primary: themeContext.color,

src/reduxTypes.js

@@ -348,11 +348,25 @@ export type RealmState = {|
   +serverEmojiData: ServerEmojiData | null,
 |};
 
-// TODO: Stop using the 'default' name. Any 'default' semantics should
-// only apply the device level, not within the app. See
-// https://github.com/zulip/zulip-mobile/issues/4009#issuecomment-619280681.
+/**
+ * The visual theme of the app.
+ *
+ * To get a ThemeName from the ThemeSetting, first check the current
+ * OS theme by calling the React Native hook useColorScheme and pass
+ * that to the helper function getThemeToUse.
+ */
 export type ThemeName = 'default' | 'night';
 
+/**
+ * The theme setting.
+ *
+ * This represents the value the user chooses in SettingsScreen.
+ *
+ * To determine the actual theme to show the user, use a ThemeName;
+ * see there for details.
+ */
+export type ThemeSetting = 'default' | 'night';
+
 /** What browser the user has set to use for opening links in messages.
  *
  * * embedded: The in-app browser
@@ -392,7 +406,7 @@ export type GlobalSettingsState = $ReadOnly<{
   // The user's chosen language, as an IETF BCP 47 language tag.
   language: string,
 
-  theme: ThemeName,
+  theme: ThemeSetting,
   browser: BrowserPreference,
 
   // TODO cut this? what was it?

src/settings/settingsSelectors.js

@@ -0,0 +1,7 @@
+/* @flow strict-local */
+import type { ColorSchemeName } from 'react-native/Libraries/Utilities/NativeAppearance';
+import type { ThemeSetting, ThemeName } from '../reduxTypes';
+
+export const getThemeToUse = (theme: ThemeSetting, osScheme: ?ColorSchemeName): ThemeName =>
+  // This is a no-op stub.  We'll give it more interesting behavior soon.
+  theme;

src/start/IosCompliantAppleAuthButton/index.js

@@ -1,14 +1,15 @@
 /* @flow strict-local */
 import React, { useState, useEffect } from 'react';
 import type { Node } from 'react';
-import { View } from 'react-native';
+import { View, useColorScheme } from 'react-native';
 import type { ViewStyle } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import * as AppleAuthentication from 'expo-apple-authentication';
 import { useGlobalSelector } from '../../react-redux';
 
 import type { SubsetProperties } from '../../generics';
 import Custom from './Custom';
 import { getGlobalSettings } from '../../selectors';
+import { getThemeToUse } from '../../settings/settingsSelectors';
 
 type Props = $ReadOnly<{|
   // See `ZulipButton`'s `style` prop, where a comment discusses this
@@ -35,6 +36,9 @@ type Props = $ReadOnly<{|
 export default function IosCompliantAppleAuthButton(props: Props): Node {
   const { style, onPress } = props;
   const theme = useGlobalSelector(state => getGlobalSettings(state).theme);
+  const osScheme = useColorScheme();
+  const themeToUse = getThemeToUse(theme, osScheme);
+
   const [isNativeButtonAvailable, setIsNativeButtonAvailable] = useState<boolean | void>(undefined);
 
   useEffect(() => {
@@ -56,7 +60,7 @@ export default function IosCompliantAppleAuthButton(props: Props): Node {
       <AppleAuthentication.AppleAuthenticationButton
         buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
         buttonStyle={
-          theme === 'default'
+          themeToUse === 'default'
             ? AppleAuthentication.AppleAuthenticationButtonStyle.WHITE_OUTLINE
             : AppleAuthentication.AppleAuthenticationButtonStyle.BLACK
         }
@@ -66,6 +70,6 @@ export default function IosCompliantAppleAuthButton(props: Props): Node {
       />
     );
   } else {
-    return <Custom style={style} onPress={onPress} theme={theme} />;
+    return <Custom style={style} onPress={onPress} theme={themeToUse} />;
   }
 }