diff --git a/web/settings/appearance-change-modal.react.js b/web/settings/appearance-change-modal.react.js
--- a/web/settings/appearance-change-modal.react.js
+++ b/web/settings/appearance-change-modal.react.js
@@ -4,56 +4,70 @@
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
+import { useUpdateThemePreference } from 'lib/hooks/theme.js';
 
 import css from './appearance-change-modal.css';
 import Modal from '../modals/modal.react.js';
+import { useSelector } from '../redux/redux-utils.js';
 
 function AppearanceChangeModal(): React.Node {
-  const { popModal } = useModalContext();
+  const globalThemeInfo = useSelector(state => state.globalThemeInfo);
+  const updateThemePreference = useUpdateThemePreference();
 
-  const [selectedMode, setSelectedMode] = React.useState('dark');
+  const { popModal } = useModalContext();
 
   const onClickLightModeButton = React.useCallback(
-    () => setSelectedMode('light'),
-    [],
+    () => updateThemePreference('light'),
+    [updateThemePreference],
   );
 
   const onClickDarkModeButton = React.useCallback(
-    () => setSelectedMode('dark'),
-    [],
+    () => updateThemePreference('dark'),
+    [updateThemePreference],
   );
 
   const lightModeButtonClassName = classNames({
     [css.button]: true,
-    [css.selectedButton]: selectedMode === 'light',
+    [css.selectedButton]: globalThemeInfo.preference === 'light',
   });
 
   const darkModeButtonClassName = classNames({
     [css.button]: true,
-    [css.selectedButton]: selectedMode === 'dark',
+    [css.selectedButton]: globalThemeInfo.preference === 'dark',
   });
 
-  return (
-    <Modal name="Appearance" onClose={popModal}>
-      <div className={css.container}>
-        <h1 className={css.header}>App theme</h1>
-        <div className={css.buttonContainer}>
-          <div
-            className={lightModeButtonClassName}
-            onClick={onClickLightModeButton}
-          >
-            Light
-          </div>
-          <div
-            className={darkModeButtonClassName}
-            onClick={onClickDarkModeButton}
-          >
-            Dark
+  const appearanceChangeModal = React.useMemo(
+    () => (
+      <Modal name="Appearance" onClose={popModal}>
+        <div className={css.container}>
+          <h1 className={css.header}>App theme</h1>
+          <div className={css.buttonContainer}>
+            <div
+              className={lightModeButtonClassName}
+              onClick={onClickLightModeButton}
+            >
+              Light
+            </div>
+            <div
+              className={darkModeButtonClassName}
+              onClick={onClickDarkModeButton}
+            >
+              Dark
+            </div>
           </div>
         </div>
-      </div>
-    </Modal>
+      </Modal>
+    ),
+    [
+      darkModeButtonClassName,
+      lightModeButtonClassName,
+      onClickDarkModeButton,
+      onClickLightModeButton,
+      popModal,
+    ],
   );
+
+  return appearanceChangeModal;
 }
 
 export default AppearanceChangeModal;