Page MenuHomePhabricator
Files F3400350

D9580.id32379.diff
No OneTemporary
Actions

D9580.id32379.diff
View Options

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%;

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 3, 7:02 AM (21 h, 25 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2610736
Default Alt Text
D9580.id32379.diff (2 KB)

Event Timeline