From b8e1f83a5ce433b6c79322fe9c172dc17fcb6090 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Qu=E1=BB=91c=20Kh=C3=A1nh?= <bkdev98@gmail.com>
Date: Sun, 14 Jul 2024 14:56:25 +0700
Subject: [PATCH] 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)
---
 .../category/select-category-icon-field.tsx   |  5 ++++
 .../transaction/select-account-field.tsx      |  4 ++++
 .../transaction/select-category-field.tsx     |  4 ++++
 .../transaction/select-date-field.tsx         |  4 ++++
 .../transaction/transaction-form.tsx          |  2 +-
 .../wallet/select-account-icon-field.tsx      |  4 ++++
 .../wallet/select-currency-field.tsx          |  4 ++++
 apps/mobile/global.css                        | 24 +++++++++----------
 apps/mobile/lib/theme.ts                      |  6 ++---
 9 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/apps/mobile/components/category/select-category-icon-field.tsx b/apps/mobile/components/category/select-category-icon-field.tsx
index 652aa817..2ef82648 100644
--- 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
index 414b95c5..7b852770 100644
--- 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
index 3c50c079..d7c9a6ca 100644
--- 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
index 197c44d6..3fac88cc 100644
--- 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
index 01ef3d57..a79e2185 100644
--- 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
index 1941d711..d94d330e 100644
--- 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
index 4606efa0..06652b51 100644
--- 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
index a6734745..deb26e17 100644
--- 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
index 0d37494d..b37d79cf 100644
--- 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%)',
   },
 }