diff --git a/web/app-theme-wrapper.react.js b/web/app-theme-wrapper.react.js
new file mode 100644
--- /dev/null
+++ b/web/app-theme-wrapper.react.js
@@ -0,0 +1,30 @@
+// @flow
+
+import * as React from 'react';
+
+import { useSelector } from './redux/redux-utils.js';
+import css from './style.css';
+
+type Props = {
+  +children: React.Node,
+};
+
+function AppThemeWrapper(props: Props): React.Node {
+  const { children } = props;
+
+  const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
+  const theme = activeTheme ? activeTheme : 'light';
+
+  const appThemeWrapper = React.useMemo(
+    () => (
+      <div data-theme={theme} className={css.appThemeContainer}>
+        {children}
+      </div>
+    ),
+    [children, theme],
+  );
+
+  return appThemeWrapper;
+}
+
+export default AppThemeWrapper;
diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -34,6 +34,7 @@
 import { AlchemyENSCacheProvider, wagmiConfig } from 'lib/utils/wagmi-utils.js';
 
 import QrCodeLogin from './account/qr-code-login.react.js';
+import AppThemeWrapper from './app-theme-wrapper.react.js';
 import WebEditThreadAvatarProvider from './avatars/web-edit-thread-avatar-provider.react.js';
 import Calendar from './calendar/calendar.react.js';
 import Chat from './chat/chat.react.js';
@@ -366,15 +367,17 @@
     );
 
     return (
-      <App
-        {...props}
-        navInfo={navInfo}
-        entriesLoadingStatus={entriesLoadingStatus}
-        loggedIn={loggedIn}
-        activeThreadCurrentlyUnread={activeThreadCurrentlyUnread}
-        dispatch={dispatch}
-        modals={modals}
-      />
+      <AppThemeWrapper>
+        <App
+          {...props}
+          navInfo={navInfo}
+          entriesLoadingStatus={entriesLoadingStatus}
+          loggedIn={loggedIn}
+          activeThreadCurrentlyUnread={activeThreadCurrentlyUnread}
+          dispatch={dispatch}
+          modals={modals}
+        />
+      </AppThemeWrapper>
     );
   },
 );
diff --git a/web/style.css b/web/style.css
--- a/web/style.css
+++ b/web/style.css
@@ -45,7 +45,8 @@
 button svg {
   vertical-align: top;
 }
-:global(#react-root) {
+:global(#react-root),
+div.appThemeContainer {
   display: flex;
   flex-direction: column;
   height: 100%;