theme: Provide name in ThemeData; switch to context in MessageList

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

This is helpful if the theme ever changes, by causing the component
to re-render rather than get the colors out of sync.  That currently
isn't possible while a `MessageList` is mounted, because the theme
can only change by navigating to the settings screen; but it will
become possible with #4009 via the OS-level theme changing.

Author: BigHeadCreations

docs/architecture/react.md

@@ -141,20 +141,19 @@ doc](https://reactjs.org/docs/context.html)):
 > [...])
 > is not subject to the shouldComponentUpdate method
 
-We also confirmed this behavior experimentally, in a 2020 version of
-`MessageList` which used `ThemeContext` to get the theme colors.
-(Since 1ba871910, `MessageList` uses a transparent background and so
-doesn't need the theme; since 4fa2418b8 it doesn't mention
-`ThemeContext`.)  That component re-`render`ed when the theme changed,
-*even though its `shouldComponentUpdate` always returned `false`*.
-This didn't cause a live problem because the UI doesn't
-allow changing the theme while a `MessageList` is in the navigation
-stack. If it were possible, it would be a concern: setting a short
-interval to automatically toggle the theme, we see that the message
-list's color scheme changes as we'd want it to, but we also see the
-bad effects that `shouldComponentUpdate` returning `false` is meant to
-prevent: losing the scroll position, mainly (but also, we expect,
-discarding the image cache, etc.).
+Concretely, this means that our `MessageList` component updates
+(re-`render`s) when the theme changes, since it's a `ThemeContext`
+consumer, *even though its `shouldComponentUpdate` always returns
+`false`*.  This generally isn't a problem because the UI for
+changing our own theme setting can't appear while a `MessageList` is
+in the navigation stack; so the theme can change only once we have
+#4009, via the OS-level theme changing (either automatically on
+schedule, or because the user changed it in system settings.)  When
+this does happen we see that the message list's color scheme changes
+as we'd want it to, but we also see the bad effects that
+`shouldComponentUpdate` returning `false` is meant to prevent:
+losing the scroll position, mainly (but also, we expect, discarding
+the image cache, etc.).
 
 ### The exception: `MessageList`
 

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

@@ -16,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,
@@ -123,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[] = [];
@@ -176,10 +181,10 @@ class MessageListInner extends React.Component<Props> {
     const contentHtml = messageListElementsForShownMessages
       .map(element => messageListElementHtml({ backgroundData, element, _ }))
       .join('');
-    const { auth, theme } = backgroundData;
+    const { auth } = backgroundData;
     const html: string = getHtml(
       contentHtml,
-      theme,
+      this.context.themeName,
       {
         scrollMessageId: initialScrollMessageId,
         auth,