theme: MessageList get theme data from context instead of props

Change the way `MessageList` updates its theme. It now gets
its ThemeData information from the `ThemeContext` instead of
its props.

Author: BigHeadCreations

src/styles/theme.js

@@ -5,6 +5,7 @@ import type { Context } from 'react';
 import type { ThemeName } from '../reduxTypes';
 
 export type ThemeData = {|
+  themeName: ThemeName,
   color: string,
   backgroundColor: string,
   cardColor: string,
@@ -13,6 +14,7 @@ export type ThemeData = {|
 
 export const themeData: {| [name: ThemeName | 'light']: ThemeData |} = {
   night: {
+    themeName: 'night',
     color: 'hsl(210, 11%, 85%)',
     backgroundColor: 'hsl(212, 28%, 18%)',
     cardColor: 'hsl(212, 31%, 21%)',
@@ -21,6 +23,7 @@ export const themeData: {| [name: ThemeName | 'light']: ThemeData |} = {
     dividerColor: 'hsla(0, 0%, 100%, 0.12)',
   },
   light: {
+    themeName: 'default',
     color: 'hsl(0, 0%, 20%)',
     backgroundColor: 'white',
     cardColor: 'hsl(0, 0%, 97%)',

src/webview/MessageList.js

@@ -2,7 +2,6 @@
 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 {
@@ -17,6 +16,8 @@ import type {
   EditMessage,
 } from '../types';
 import { assumeSecretlyGlobalState } from '../reduxTypes';
+import type { ThemeData } from '../styles';
+import { ThemeContext } from '../styles';
 import { connect } from '../react-redux';
 import {
   getCurrentTypingUsers,
@@ -38,7 +39,6 @@ import { caseNarrow, isConversationNarrow } from '../utils/narrow';
 import { type BackgroundData, getBackgroundData } from './backgroundData';
 import { ensureUnreachable } from '../generics';
 import { renderSinglePageWebView } from './SinglePageWebView';
-import { getThemeToUse } from '../settings/settingsSelectors';
 
 type OuterProps = $ReadOnly<{|
   narrow: Narrow,
@@ -125,6 +125,9 @@ const webviewAssetsUrl = new URL('webview/', assetsUrl);
 const baseUrl = new URL('index.html', webviewAssetsUrl);
 
 class MessageListInner extends React.Component<Props> {
+  static contextType = ThemeContext;
+  context: ThemeData;
+
   webviewRef = React.createRef<React$ElementRef<typeof WebView>>();
   sendInboundEventsIsReady: boolean;
   unsentInboundEvents: WebViewInboundEvent[] = [];
@@ -178,12 +181,10 @@ class MessageListInner extends React.Component<Props> {
     const contentHtml = messageListElementsForShownMessages
       .map(element => messageListElementHtml({ backgroundData, element, _ }))
       .join('');
-    const { auth, theme } = backgroundData;
-    const osScheme = getColorScheme();
-    const themeToUse = getThemeToUse(theme, osScheme);
+    const { auth } = backgroundData;
     const html: string = getHtml(
       contentHtml,
-      themeToUse,
+      this.context.themeName,
       {
         scrollMessageId: initialScrollMessageId,
         auth,