Fix up drawer background (#5785)

1 files changed, 12 insertions, 2 deletions

diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx
index ae81a4eb4..6f3d82c13 100644
--- a/src/view/shell/index.tsx
+++ b/src/view/shell/index.tsx
@@ -25,7 +25,7 @@ import {useCloseAnyActiveElement} from '#/state/util'
 import {Lightbox} from '#/view/com/lightbox/Lightbox'
 import {ModalsContainer} from '#/view/com/modals/Modal'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
-import {atoms as a} from '#/alf'
+import {atoms as a, select, useTheme as useNewTheme} from '#/alf'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
@@ -36,6 +36,7 @@ import {Composer} from './Composer'
 import {DrawerContent} from './Drawer'
 
 function ShellInner() {
+  const t = useNewTheme()
   const isDrawerOpen = useIsDrawerOpen()
   const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
   const setIsDrawerOpen = useSetDrawerOpen()
@@ -101,7 +102,16 @@ function ShellInner() {
             onOpen={onOpenDrawer}
             onClose={onCloseDrawer}
             swipeEdgeWidth={winDim.width / 2}
-            swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}>
+            swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}
+            overlayStyle={{
+              backgroundColor: select(t.name, {
+                light: 'rgba(0, 57, 117, 0.1)',
+                dark: isAndroid
+                  ? 'rgba(16, 133, 254, 0.1)'
+                  : 'rgba(1, 82, 168, 0.1)',
+                dim: 'rgba(10, 13, 16, 0.8)',
+              }),
+            }}>
             <TabsNavigator />
           </Drawer>
         </ErrorBoundary>