adjust bottom sheet for dark theme

Author: vercia

src/contexts/ColorSchemeContext.ts

@@ -7,6 +7,7 @@ export type ColorSchemeName = Exclude<SettingColorSchemeName, 'system'>
 export type ColorSchemeContextType = {
   colorSchemeSetting: SettingColorSchemeName
   colorScheme: ColorSchemeName
+  isDarkTheme: boolean
   setColorSchemeSetting: (newColorScheme: SettingColorSchemeName) => void
 }
 

src/design-system/bottomSheets/BottomSheet.tsx

@@ -1,5 +1,6 @@
 import { Box } from '@baca/design-system/components/Box'
-import { useSafeAreaInsets } from '@baca/hooks'
+import { useColorScheme } from '@baca/contexts'
+import { useSafeAreaInsets, useTheme } from '@baca/hooks'
 import {
   BottomSheetModal,
   BottomSheetBackdrop,
@@ -26,6 +27,8 @@ export const BottomSheet = ({
   bottomSheetRef,
 }: BottomSheetProps) => {
   const { top } = useSafeAreaInsets()
+  const { isDarkTheme } = useColorScheme()
+  const { colors } = useTheme()
 
   const handleClose = useCallback(() => {
     bottomSheetRef?.current?.snapToPosition(-1)
@@ -44,6 +47,12 @@ export const BottomSheet = ({
       snapPoints={[screenHeight - top - 24]}
       backdropComponent={renderBackdrop}
       enableDynamicSizing
+      backgroundStyle={{
+        backgroundColor: isDarkTheme ? colors.bg.primary : 'green',
+      }}
+      handleIndicatorStyle={{
+        backgroundColor: isDarkTheme ? colors.alpha.black[100] : colors.alpha.white[100],
+      }}
     >
       <BottomSheetView>
         <BottomSheetHeader

src/providers/ColorSchemeProvider.tsx

@@ -54,10 +54,13 @@ export const ColorSchemeProvider: FC<PropsWithChildren> = ({ children }) => {
     [colorSchemeSetting, setItem]
   )
 
+  const isDarkTheme = useMemo(() => colorScheme === 'dark', [colorSchemeSetting])
+
   const value: ColorSchemeContextType = useMemo(
     () => ({
       colorScheme,
       colorSchemeSetting,
+      isDarkTheme,
       setColorSchemeSetting: setNewColorSchemeSetting,
     }),
     [colorScheme, colorSchemeSetting, setNewColorSchemeSetting]