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,33 +4,36 @@
 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 (