feat(mobile): improve dark mode (#116)

base on shadcn's zinc theme ![Simulator Screenshot - iPhone 15 Pro - 2024-07-14 at 14 23 27](https://github.com/user-attachments/assets/2f279966-ae3c-4007-a03c-2c263d34fc8b) ![Simulator Screenshot - iPhone 15 Pro - 2024-07-14 at 14 23 30](https://github.com/user-attachments/assets/4b69ef4d-48f1-4da4-9c3f-a998fdc1f17e)
get6pm · Jul 14, 2024 · b8e1f83 · b8e1f83
1 parent 0124b0a
commit b8e1f83
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 16 deletions.
diff --git a/apps/mobile/components/category/select-category-icon-field.tsx b/apps/mobile/components/category/select-category-icon-field.tsx
@@ -1,10 +1,12 @@
 import { BottomSheetBackdrop, BottomSheetModal } from '@gorhom/bottom-sheet'
 import { useMemo, useRef } from 'react'
 
+import { useColorScheme } from '@/hooks/useColorScheme'
 import {
   CATEGORY_EXPENSE_ICONS,
   CATEGORY_INCOME_ICONS,
 } from '@/lib/icons/category-icons'
+import { theme } from '@/lib/theme'
 import { sleep } from '@/lib/utils'
 import type { CategoryTypeType } from '@6pm/validation'
 import { useController } from 'react-hook-form'
@@ -24,6 +26,8 @@ export function SelectCategoryIconField({
   type: CategoryTypeType
 }) {
   const sheetRef = useRef<BottomSheetModal>(null)
+  const { colorScheme } = useColorScheme()
+
   const {
     field: { onChange, onBlur, value },
     // fieldState,
@@ -54,6 +58,7 @@ export function SelectCategoryIconField({
         enablePanDownToClose
         enableDismissOnClose
         keyboardBehavior="extend"
+        backgroundStyle={{ backgroundColor: theme[colorScheme].background }}
         backdropComponent={(props) => (
           <BottomSheetBackdrop
             {...props}

diff --git a/apps/mobile/components/transaction/select-account-field.tsx b/apps/mobile/components/transaction/select-account-field.tsx
@@ -15,6 +15,8 @@ import { Keyboard } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { FullWindowOverlay } from 'react-native-screens'
 
+import { useColorScheme } from '@/hooks/useColorScheme'
+import { theme } from '@/lib/theme'
 import GenericIcon from '../common/generic-icon'
 import { Button } from '../ui/button'
 import { Text } from '../ui/text'
@@ -26,6 +28,7 @@ export function SelectAccountField({
 }) {
   const { bottom } = useSafeAreaInsets()
   const { data: walletAccounts, isLoading } = useWallets()
+  const { colorScheme } = useColorScheme()
 
   const sheetRef = useRef<BottomSheetModal>(null)
   const { i18n } = useLingui()
@@ -66,6 +69,7 @@ export function SelectAccountField({
         enableDynamicSizing
         enablePanDownToClose
         keyboardBehavior="extend"
+        backgroundStyle={{ backgroundColor: theme[colorScheme].background }}
         backdropComponent={(props) => (
           <BottomSheetBackdrop
             {...props}

diff --git a/apps/mobile/components/transaction/select-category-field.tsx b/apps/mobile/components/transaction/select-category-field.tsx
@@ -13,6 +13,8 @@ import { useRef } from 'react'
 import { useController } from 'react-hook-form'
 import { FlatList, Keyboard, View } from 'react-native'
 
+import { useColorScheme } from '@/hooks/useColorScheme'
+import { theme } from '@/lib/theme'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { FullWindowOverlay } from 'react-native-screens'
 import GenericIcon from '../common/generic-icon'
@@ -26,6 +28,7 @@ export function SelectCategoryField({
 }) {
   const { bottom } = useSafeAreaInsets()
   const { data: categories = [], isLoading } = useCategories()
+  const { colorScheme } = useColorScheme()
 
   const sheetRef = useRef<BottomSheetModal>(null)
   const { i18n } = useLingui()
@@ -74,6 +77,7 @@ export function SelectCategoryField({
         enableDynamicSizing
         enablePanDownToClose
         keyboardBehavior="extend"
+        backgroundStyle={{ backgroundColor: theme[colorScheme].background }}
         backdropComponent={(props) => (
           <BottomSheetBackdrop
             {...props}

diff --git a/apps/mobile/components/transaction/select-date-field.tsx b/apps/mobile/components/transaction/select-date-field.tsx
@@ -1,4 +1,6 @@
+import { useColorScheme } from '@/hooks/useColorScheme'
 import { formatDateShort } from '@/lib/date'
+import { theme } from '@/lib/theme'
 import { sleep } from '@/lib/utils'
 import {
   BottomSheetBackdrop,
@@ -57,6 +59,7 @@ export function SelectDateField({
   onSelect?: (date?: Date) => void
 }) {
   const { bottom } = useSafeAreaInsets()
+  const { colorScheme } = useColorScheme()
   const sheetRef = useRef<BottomSheetModal>(null)
   const {
     field: { onChange, onBlur, value },
@@ -82,6 +85,7 @@ export function SelectDateField({
         enableDynamicSizing
         enablePanDownToClose
         keyboardBehavior="extend"
+        backgroundStyle={{ backgroundColor: theme[colorScheme].background }}
         backdropComponent={(props) => (
           <BottomSheetBackdrop
             {...props}

diff --git a/apps/mobile/components/transaction/transaction-form.tsx b/apps/mobile/components/transaction/transaction-form.tsx
@@ -73,7 +73,7 @@ export const TransactionForm = ({
           <View className="w-full h-24 justify-end mb-4">
             <TextTicker
               value={amount}
-              className="font-semibold text-6xl leading-tight text-center"
+              className="font-semibold text-6xl text-foreground leading-tight text-center"
               suffix={currency}
               suffixClassName="font-semibold ml-2 text-muted-foreground overflow-visible"
             />

diff --git a/apps/mobile/components/wallet/select-account-icon-field.tsx b/apps/mobile/components/wallet/select-account-icon-field.tsx
@@ -1,7 +1,9 @@
 import { BottomSheetBackdrop, BottomSheetModal } from '@gorhom/bottom-sheet'
 import { useRef } from 'react'
 
+import { useColorScheme } from '@/hooks/useColorScheme'
 import { WALLET_ICONS } from '@/lib/icons/wallet-icons'
+import { theme } from '@/lib/theme'
 import { useController } from 'react-hook-form'
 import { Keyboard } from 'react-native'
 import { FullWindowOverlay } from 'react-native-screens'
@@ -14,6 +16,7 @@ export function SelectAccountIconField({
 }: {
   onSelect?: (currency: string) => void
 }) {
+  const { colorScheme } = useColorScheme()
   const sheetRef = useRef<BottomSheetModal>(null)
   const {
     field: { onChange, onBlur, value },
@@ -37,6 +40,7 @@ export function SelectAccountIconField({
         index={0}
         enableDynamicSizing
         enablePanDownToClose
+        backgroundStyle={{ backgroundColor: theme[colorScheme].background }}
         keyboardBehavior="extend"
         backdropComponent={(props) => (
           <BottomSheetBackdrop

diff --git a/apps/mobile/components/wallet/select-currency-field.tsx b/apps/mobile/components/wallet/select-currency-field.tsx
@@ -1,6 +1,8 @@
 import { BottomSheetBackdrop, BottomSheetModal } from '@gorhom/bottom-sheet'
 import { useRef } from 'react'
 
+import { useColorScheme } from '@/hooks/useColorScheme'
+import { theme } from '@/lib/theme'
 import { useController } from 'react-hook-form'
 import { Keyboard } from 'react-native'
 import { FullWindowOverlay } from 'react-native-screens'
@@ -14,6 +16,7 @@ export function SelectCurrencyField({
   onSelect?: (currency: string) => void
 }) {
   const sheetRef = useRef<BottomSheetModal>(null)
+  const { colorScheme } = useColorScheme()
   const {
     field: { onChange, onBlur, value },
     // fieldState,
@@ -36,6 +39,7 @@ export function SelectCurrencyField({
         index={0}
         snapPoints={['50%', '87%']}
         enablePanDownToClose
+        backgroundStyle={{ backgroundColor: theme[colorScheme].background }}
         keyboardBehavior="extend"
         backdropComponent={(props) => (
           <BottomSheetBackdrop

diff --git a/apps/mobile/global.css b/apps/mobile/global.css
@@ -37,34 +37,34 @@
     }
 
     .dark:root {
-        --background: 224 71% 4%;
+        --background: 240 10% 3.9%;
         --foreground: 213 31% 91%;
 
         --muted: 240 3.7% 15.9%;
-        --muted-foreground: 215.4 16.3% 56.9%;
+        --muted-foreground: 240 5% 64.9%;
 
-        --accent: 216 34% 17%;
-        --accent-foreground: 210 40% 98%;
+        --accent: 240 3.7% 15.9%;
+        --accent-foreground: 0 0% 98%;
 
-        --popover: 224 71% 4%;
-        --popover-foreground: 215 20.2% 65.1%;
+        --popover: 240 10% 3.9%;
+        --popover-foreground: 0 0% 98%;
 
         --border: 240 3.7% 15.9%;
         --input: 240 3.7% 15.9%;
 
-        --card: 240 6% 10%;
+        --card: 240 10% 3.9%;
         --card-foreground: 213 31% 91%;
 
-        --primary: 0 0% 100%;
-        --primary-foreground: 0 0% 0%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 240 5.9% 10%;
 
         --secondary: 240 3.7% 15.9%;
-        --secondary-foreground: 210 40% 98%;
+        --secondary-foreground: 0 0% 98%;
 
         --destructive: 0 63% 31%;
-        --destructive-foreground: 210 40% 98%;
+        --destructive-foreground: 0 0% 98%;
 
-        --ring: 216 34% 17%;
+        --ring: 240 3.7% 15.9%;
 
         --radius: 0.5rem;
     }

diff --git a/apps/mobile/lib/theme.ts b/apps/mobile/lib/theme.ts
@@ -5,8 +5,8 @@ export const theme = {
     foreground: 'hsl(240, 6%, 10%)',
   },
   dark: {
-    primary: 'hsl(0 0% 100%)',
-    background: 'hsl(240, 6%, 10%)',
-    foreground: 'hsl(213, 31%, 91%)',
+    primary: 'hsl(0 0% 98%)',
+    background: 'hsl(240 10% 3.9%)',
+    foreground: 'hsl(213 31% 91%)',
   },
 }