Fix up drawer background (#5785)

1 files changed, 13 insertions, 3 deletions

diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx
index eeb1f13dd..84d6994b3 100644
--- a/src/view/shell/index.web.tsx
+++ b/src/view/shell/index.web.tsx
@@ -16,7 +16,7 @@ import {useCloseAllActiveElements} 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} from '#/alf'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
@@ -25,6 +25,7 @@ import {Composer} from './Composer.web'
 import {DrawerContent} from './Drawer'
 
 function ShellInner() {
+  const t = useTheme()
   const isDrawerOpen = useIsDrawerOpen()
   const setDrawerOpen = useSetDrawerOpen()
   const {isDesktop} = useWebMediaQueries()
@@ -65,7 +66,17 @@ function ShellInner() {
           }}
           accessibilityLabel={_(msg`Close navigation footer`)}
           accessibilityHint={_(msg`Closes bottom navigation bar`)}>
-          <View style={styles.drawerMask}>
+          <View
+            style={[
+              styles.drawerMask,
+              {
+                backgroundColor: select(t.name, {
+                  light: 'rgba(0, 57, 117, 0.1)',
+                  dark: 'rgba(1, 82, 168, 0.1)',
+                  dim: 'rgba(10, 13, 16, 0.8)',
+                }),
+              },
+            ]}>
             <View style={styles.drawerContainer}>
               <DrawerContent />
             </View>
@@ -101,7 +112,6 @@ const styles = StyleSheet.create({
     height: '100%',
     top: 0,
     left: 0,
-    backgroundColor: 'rgba(0,0,0,0.25)',
   },
   drawerContainer: {
     display: 'flex',