feat(mobile): dynamic theme

get6pm · Sep 18, 2024 · dd22471 · dd22471
1 parent 94db47e
commit dd22471
Show file tree

Hide file tree

Showing 63 changed files with 597 additions and 160 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -20,5 +20,13 @@
     "posthog",
     "svix",
     "tanstack"
-  ]
-}
+  ],
+  "emeraldwalk.runonsave": {
+    "commands": [
+      {
+        "match": "\\.(ts|tsx|js|jsx|html)$",
+        "cmd": "pnpm @biomejs/biome lint ${file} --apply-unsafe"
+      }
+    ]
+  }
+}
diff --git a/apps/mobile/app/(app)/(tabs)/_layout.tsx b/apps/mobile/app/(app)/(tabs)/_layout.tsx
@@ -1,6 +1,5 @@
 import { TabBar } from '@/components/common/tab-bar'
-import { useColorScheme } from '@/hooks/useColorScheme'
-import { theme } from '@/lib/theme'
+import { useColorPalette } from '@/hooks/use-color-palette'
 import { useUser } from '@clerk/clerk-expo'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
@@ -12,7 +11,7 @@ import Purchases from 'react-native-purchases'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export default function TabLayout() {
-  const { colorScheme } = useColorScheme()
+  const { getColor } = useColorPalette()
   const { i18n } = useLingui()
   const { user } = useUser()
   const { width } = useWindowDimensions()
@@ -40,15 +39,15 @@ export default function TabLayout() {
       tabBar={(props) => <TabBar {...props} />}
       screenOptions={{
         headerShadowVisible: false,
-        tabBarActiveTintColor: theme[colorScheme ?? 'light'].background,
+        tabBarActiveTintColor: getColor('--background'),
         tabBarShowLabel: false,
         tabBarStyle: {
           position: 'absolute',
           borderWidth: 1,
           borderTopWidth: 1,
-          backgroundColor: theme[colorScheme ?? 'light'].background,
-          borderColor: theme[colorScheme ?? 'light'].border,
-          borderTopColor: theme[colorScheme ?? 'light'].border,
+          backgroundColor: getColor('--background'),
+          borderColor: getColor('--border'),
+          borderTopColor: getColor('--border'),
           bottom: bottom ? 36 : 16,
           marginHorizontal: (width - (8 * 5 + 48 * 4 + 16)) / 2,
           paddingVertical: 0,
@@ -59,10 +58,10 @@ export default function TabLayout() {
         headerTitleStyle: {
           fontFamily: 'Haskoy-Medium',
           fontSize: 16,
-          color: theme[colorScheme ?? 'light'].primary,
+          color: getColor('--foreground'),
         },
         headerStyle: {
-          backgroundColor: theme[colorScheme ?? 'light'].background,
+          backgroundColor: getColor('--background'),
         },
       }}
     >

diff --git a/apps/mobile/app/(app)/(tabs)/budgets.tsx b/apps/mobile/app/(app)/(tabs)/budgets.tsx
@@ -154,8 +154,8 @@ export default function BudgetsScreen() {
     navigation.setOptions({
       headerRight: () => (
         <Link href={isExceeded ? '/paywall' : '/budget/new-budget'} asChild>
-          <Button size="sm" variant="secondary" className="mr-6 h-10">
-            <PlusIcon className="size-6 text-primary" />
+          <Button size="sm" variant="outline" className="mr-6 h-10">
+            <PlusIcon className="size-6 text-foreground" />
             <Text>{t(i18n)`New budget`}</Text>
           </Button>
         </Link>
@@ -201,7 +201,7 @@ export default function BudgetsScreen() {
   ].filter(({ data }) => data.length)
 
   return (
-    <View className="flex-1 bg-card">
+    <View className="flex-1 bg-background">
       <View
         className="absolute w-full"
         onLayout={(ev) => {
@@ -241,7 +241,7 @@ export default function BudgetsScreen() {
         keyExtractor={(item) => item.id}
         renderItem={({ item: budget }) => <BudgetItem budget={budget} />}
         renderSectionHeader={({ section: { title } }) => (
-          <Text className="bg-card px-6 py-2 text-muted-foreground">
+          <Text className="bg-background px-6 py-2 text-muted-foreground">
             {title}
           </Text>
         )}

diff --git a/apps/mobile/app/(app)/(tabs)/index.tsx b/apps/mobile/app/(app)/(tabs)/index.tsx
@@ -94,7 +94,7 @@ export default function HomeScreen() {
   }, [transactions])
 
   return (
-    <View className="flex-1 bg-card" style={{ paddingTop: top }}>
+    <View className="flex-1 bg-background" style={{ paddingTop: top }}>
       <HomeHeader
         walletAccountId={walletAccountId}
         onWalletAccountChange={setWalletAccountId}
@@ -128,7 +128,7 @@ export default function HomeScreen() {
             </View>
           ) : null
         }
-        className="flex-1 bg-card"
+        className="flex-1 bg-background"
         contentContainerStyle={{ paddingBottom: bottom + 80 }}
         // refreshing={isRefetching}
         // onRefresh={handleRefresh}
@@ -138,7 +138,7 @@ export default function HomeScreen() {
           <TransactionItem transaction={transaction} />
         )}
         renderSectionHeader={({ section: { title, sum } }) => (
-          <View className="mx-6 flex-row justify-between border-muted-foreground/20 border-b bg-card py-2 pt-4 align-center">
+          <View className="mx-6 flex-row justify-between border-muted-foreground/20 border-b bg-background py-2 pt-4 align-center">
             <Text className="text-muted-foreground">{title}</Text>
             <AmountFormat
               amount={sum}

diff --git a/apps/mobile/app/(app)/(tabs)/settings.tsx b/apps/mobile/app/(app)/(tabs)/settings.tsx
@@ -91,11 +91,11 @@ export default function SettingsScreen() {
   }
 
   return (
-    <View className="flex-1 bg-card">
+    <View className="flex-1 bg-background">
       <ScrollView
         contentContainerClassName="py-4 gap-4"
         contentContainerStyle={{ paddingBottom: bottom + 80 }}
-        className="bg-card"
+        className="bg-background"
       >
         <ProfileCard />
         {!isPro && (
@@ -121,7 +121,7 @@ export default function SettingsScreen() {
                 label={t(i18n)`Wallet accounts`}
                 icon={WalletCardsIcon}
                 rightSection={
-                  <ChevronRightIcon className="h-5 w-5 text-primary" />
+                  <ChevronRightIcon className="h-5 w-5 text-foreground" />
                 }
               />
             </Link>
@@ -130,7 +130,7 @@ export default function SettingsScreen() {
                 label={t(i18n)`Categories`}
                 icon={ShapesIcon}
                 rightSection={
-                  <ChevronRightIcon className="h-5 w-5 text-primary" />
+                  <ChevronRightIcon className="h-5 w-5 text-foreground" />
                 }
               />
             </Link>
@@ -169,7 +169,7 @@ export default function SettingsScreen() {
                 label={t(i18n)`Appearance`}
                 icon={SwatchBookIcon}
                 rightSection={
-                  <ChevronRightIcon className="h-5 w-5 text-primary" />
+                  <ChevronRightIcon className="h-5 w-5 text-foreground" />
                 }
               />
             </Link>
@@ -178,7 +178,7 @@ export default function SettingsScreen() {
                 label={t(i18n)`App icon`}
                 icon={PencilRulerIcon}
                 rightSection={
-                  <ChevronRightIcon className="h-5 w-5 text-primary" />
+                  <ChevronRightIcon className="h-5 w-5 text-foreground" />
                 }
               />
             </Link>
@@ -191,7 +191,7 @@ export default function SettingsScreen() {
                     <Text className="text-muted-foreground uppercase">
                       {t(i18n)`${language}`}
                     </Text>
-                    <ChevronRightIcon className="h-5 w-5 text-primary" />
+                    <ChevronRightIcon className="h-5 w-5 text-foreground" />
                   </View>
                 }
               />
@@ -238,7 +238,7 @@ export default function SettingsScreen() {
                 label={t(i18n)`Seed transactions`}
                 icon={BeanIcon}
                 rightSection={
-                  <ChevronRightIcon className="h-5 w-5 text-primary" />
+                  <ChevronRightIcon className="h-5 w-5 text-foreground" />
                 }
                 onPress={startSeed}
               />
@@ -248,15 +248,15 @@ export default function SettingsScreen() {
                 label={t(i18n)`Privacy policy`}
                 icon={ScrollTextIcon}
                 rightSection={
-                  <ChevronRightIcon className="h-5 w-5 text-primary" />
+                  <ChevronRightIcon className="h-5 w-5 text-foreground" />
                 }
               />
             </Link>
             <MenuItem
               label={t(i18n)`Terms of use`}
               icon={BookTypeIcon}
               rightSection={
-                <ChevronRightIcon className="h-5 w-5 text-primary" />
+                <ChevronRightIcon className="h-5 w-5 text-foreground" />
               }
               onPress={() =>
                 Linking.openURL(
@@ -269,31 +269,31 @@ export default function SettingsScreen() {
                 label={t(i18n)`Send feedback`}
                 icon={MessageSquareQuoteIcon}
                 rightSection={
-                  <ChevronRightIcon className="h-5 w-5 text-primary" />
+                  <ChevronRightIcon className="h-5 w-5 text-foreground" />
                 }
               />
             </Link>
             {/* <MenuItem
               label={t(i18n)`Rate 6pm on App Store`}
               icon={StarIcon}
               rightSection={
-                <ChevronRightIcon className="h-5 w-5 text-primary" />
+                <ChevronRightIcon className="h-5 w-5 text-foreground" />
               }
               disabled
             /> */}
             <MenuItem
               label={t(i18n)`Share with friends`}
               icon={Share2Icon}
               rightSection={
-                <ChevronRightIcon className="h-5 w-5 text-primary" />
+                <ChevronRightIcon className="h-5 w-5 text-foreground" />
               }
               onPress={handleShare}
             />
             <MenuItem
               label={t(i18n)`Proudly open source`}
               icon={GithubIcon}
               rightSection={
-                <ChevronRightIcon className="h-5 w-5 text-primary" />
+                <ChevronRightIcon className="h-5 w-5 text-foreground" />
               }
               onPress={() => Linking.openURL('https://github.com/sixpm-ai/6pm')}
             />

diff --git a/apps/mobile/app/(app)/_layout.tsx b/apps/mobile/app/(app)/_layout.tsx
@@ -1,10 +1,9 @@
 import { AuthLocal } from '@/components/auth/auth-local'
 import { BackButton } from '@/components/common/back-button'
+import { useColorPalette } from '@/hooks/use-color-palette'
 import { useLocalAuth } from '@/hooks/use-local-auth'
 import { useScheduleNotificationTrigger } from '@/hooks/use-schedule-notification'
 import { useUserMetadata } from '@/hooks/use-user-metadata'
-import { useColorScheme } from '@/hooks/useColorScheme'
-import { theme } from '@/lib/theme'
 import { useUser } from '@clerk/clerk-expo'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
@@ -14,7 +13,7 @@ import { View } from 'react-native'
 export default function AuthenticatedLayout() {
   const { isLoaded, isSignedIn } = useUser()
   const { onboardedAt } = useUserMetadata()
-  const { colorScheme } = useColorScheme()
+  const { getColor } = useColorPalette()
   const { i18n } = useLingui()
   const { shouldAuthLocal, setShouldAuthLocal } = useLocalAuth()
   useScheduleNotificationTrigger()
@@ -36,15 +35,15 @@ export default function AuthenticatedLayout() {
         screenOptions={{
           headerShown: true,
           headerBackTitleVisible: false,
-          headerTintColor: theme[colorScheme ?? 'light'].primary,
+          headerTintColor: getColor('--foreground'),
           headerShadowVisible: false,
           headerTitleStyle: {
             fontFamily: 'Haskoy-Medium',
             fontSize: 16,
-            color: theme[colorScheme ?? 'light'].primary,
+            color: getColor('--foreground'),
           },
           headerStyle: {
-            backgroundColor: theme[colorScheme ?? 'light'].background,
+            backgroundColor: getColor('--background'),
           },
           headerLeft: () => <BackButton />,
         }}
@@ -61,7 +60,7 @@ export default function AuthenticatedLayout() {
             presentation: 'modal',
             headerTitle: '',
             headerStyle: {
-              backgroundColor: theme[colorScheme ?? 'light'].muted,
+              backgroundColor: getColor('--muted'),
             },
             // headerShown: false,
           }}

diff --git a/apps/mobile/app/(app)/app-icon.tsx b/apps/mobile/app/(app)/app-icon.tsx
@@ -56,7 +56,7 @@ export default function AppearanceScreen() {
           setSelected(item.name)
           toast.success(t(i18n)`App icon updated!`)
         }}
-        className="flex-1 flex-row items-center justify-center gap-4 bg-card px-6 py-2 active:bg-muted/50"
+        className="flex-1 flex-row items-center justify-center gap-4 bg-background px-6 py-2 active:bg-muted/50"
       >
         <View className="flex-1 flex-row items-center gap-4">
           <Image
@@ -89,7 +89,7 @@ export default function AppearanceScreen() {
           </Text>
         </View>
       }
-      className="bg-card"
+      className="bg-background"
       renderItem={renderDynamicIcon}
       contentContainerClassName="py-4"
     />