theme: add ThemeSetting type and calc ThemeName in MessageList

In addition to the ThemeName type, this adds a ThemeSetting type that
matches the setting from the SettingsScreen. In order to make the
MessageList correctly follow the ThemeSetting, we compute a ThemeName
in MessageList based off of the ThemeSetting and the current OS theme.

Fixes #4009.

Author: BigHeadCreations

src/reduxTypes.js

@@ -349,11 +349,26 @@ export type RealmState = {|
 /**
  * The theme of the app.
  *
- * * auto: follow the OS theme setting
  * * light
  * * dark
+ *
+ * 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 = 'light' | 'dark';
+
+/**
+ * The theme setting.
+ *
+ * * ThemeName: either 'light' or 'dark'
+ * * auto: follow the OS theme setting
+ *
+ * This value matches what is set in the SettingsScreen.
+ *
  */
-export type ThemeName = 'auto' | 'light' | 'dark';
+export type ThemeSetting = ThemeName | 'auto';
 
 /** What browser the user has set to use for opening links in messages.
  *
@@ -394,7 +409,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/webview/MessageList.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { Platform, NativeModules } from 'react-native';
 import { WebView } from 'react-native-webview';
+import { getColorScheme } from 'react-native/Libraries/Utilities/Appearance';
 
 import { connectActionSheet } from '../react-native-action-sheet';
 import type {
@@ -177,9 +178,15 @@ class MessageListInner extends React.Component<Props> {
       .map(element => messageListElementHtml({ backgroundData, element, _ }))
       .join('');
     const { auth, theme } = backgroundData;
+    const osScheme = getColorScheme();
+    let themeToUse = theme;
+    if (themeToUse === 'auto') {
+      themeToUse = osScheme === 'light' || osScheme == null ? 'light' : 'dark';
+    }
+
     const html: string = getHtml(
       contentHtml,
-      theme,
+      themeToUse,
       {
         scrollMessageId: initialScrollMessageId,
         auth,

src/webview/backgroundData.js

@@ -12,7 +12,7 @@ import type {
   PerAccountState,
   Subscription,
   Stream,
-  ThemeName,
+  ThemeSetting,
   UserId,
   User,
   UserOrBot,
@@ -63,7 +63,7 @@ export type BackgroundData = $ReadOnly<{|
   streams: Map<number, Stream>,
   subscriptions: Map<number, Subscription>,
   unread: UnreadState,
-  theme: ThemeName,
+  theme: ThemeSetting,
   twentyFourHourTime: boolean,
   userSettingStreamNotification: boolean,
   displayEmojiReactionUsers: boolean,