apply theme

app/(tabs)/budget/index.tsx

@@ -7,10 +7,11 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { BudgetHeader, LoadingSymbol, Plus } from '../../../components';
 import CategoryItem from '../../../components/budget/categoryItem';
 import useFetch from '../../../hooks/useFetch';
-import { useThemeColor } from '../../../hooks/useThemeColor';
+import { useTheme } from '../../contexts/ThemeContext';
 
 export default function Page() {
-    const containerColor = useThemeColor("containerColor");
+    const {colors} = useTheme()
+    const containerColor = colors.containerColor;
 
     const [selectedPage, setSelectedPage] = useState("noPageLoaded");
 
@@ -42,7 +43,7 @@ export default function Page() {
             <BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
 
             <Plus onPress={() => {
-                router.push("./(tabs)/budget/addCategory")
+                router.push("/(tabs)/budget/addCategory")
             }}/>
 
             {isLoading ? (<LoadingSymbol/>) : (

app/(tabs)/home/index.tsx

@@ -5,7 +5,7 @@ import { FlatList } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { ExpenseItem, LoadingSymbol, Plus, SearchBar, Welcome } from '../../../components';
 import useFetch from '../../../hooks/useFetch';
-import { useThemeColor } from "../../../hooks/useThemeColor";
+
 import { addExpense, executeQuery } from "../../../services/database";
 import { useAuth } from '../../contexts/AuthContext';
 import { useRouter } from "expo-router";

components/budget/budgetHeader.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
-import { useThemeColor } from "../../hooks/useThemeColor";
 import SearchBar from "../common/SearchBar";
+import { useTheme } from "../../app/contexts/ThemeContext";
 
 type BudgetHeaderProperties = {
     selectedPage: string,
@@ -14,7 +14,8 @@ type PageSelectorButtonProperties = {
 }
 
 const BudgetHeader = (properties: BudgetHeaderProperties) => {
-    const backgroundColor = useThemeColor("backgroundColor");
+    const {colors} = useTheme();
+    const backgroundColor = colors.backgroundColor; 
 
     return (<>
         <View style={styles.containerStyle}>
@@ -38,11 +39,13 @@ const BudgetHeader = (properties: BudgetHeaderProperties) => {
 }
 
 const PageSelectorButton = (properties: PageSelectorButtonProperties) => {
-    const primaryTextColor = useThemeColor("primaryText");
-    const secondaryTextColor = useThemeColor("secondaryText");
-    const elementSelectedColor = useThemeColor("elementSelectedColor");
-    const elementDefaultColor = useThemeColor("elementDefaultColor");
-    const accentColor = useThemeColor("accentColor");
+    const {colors} = useTheme();
+
+    const primaryTextColor = colors.primaryText;
+    const secondaryTextColor = colors.secondaryText;
+    const elementSelectedColor = colors.elementSelectedColor;
+    const elementDefaultColor = colors.elementDefaultColor;
+    const accentColor = colors.accentColor;
 
     return (
         <TouchableHighlight

components/home/Welcome.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Image, Text, View, ViewProps } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 import { MARGINS, SIZES } from '../../constants/theme'
-import { useThemeColor } from '../../hooks/useThemeColor'
+import { useTheme } from '../../app/contexts/ThemeContext'
 
 type WelcomeProps = ViewProps & {name: string, image : any, onPress: () => void | undefined}
 
@@ -28,13 +28,13 @@ function getTimeOfDay(date: Date) : string {
 
 
 export default function Welcome(props: WelcomeProps) {
+  const { colors } = useTheme();
+
   const date = new Date()
   const dateString = formatDate(date)
   const timeOfDay = getTimeOfDay(date)
   const onpress = props.onPress
 
-  const textcolor = useThemeColor("primaryText")
-  //const backgroundColor: string = useThemeColor("backgroundColor")
 
   return (
     <View style={{
@@ -57,7 +57,7 @@ export default function Welcome(props: WelcomeProps) {
         </TouchableOpacity>
         <Text style={{
           fontSize: SIZES.xlarge,
-          color: textcolor
+          color: colors.primaryText
         }}>{dateString}</Text>
       </View>
       <View style={{
@@ -65,7 +65,7 @@ export default function Welcome(props: WelcomeProps) {
       }}>
         <Text style={{
           fontSize: SIZES.xlarge,
-          color: textcolor
+          color: colors.primaryText
         }}>Good {timeOfDay}, {props.name}</Text>
         </View>
     </View>

components/home/expenseItem.tsx

@@ -1,34 +1,33 @@
 import React from 'react';
 import { ColorValue, StyleSheet, Text, View } from 'react-native';
 import { SIZES } from '../../constants/theme';
-import { useThemeColor } from '../../hooks/useThemeColor';
 import CustomCard from "../common/CustomCard";
+import { useTheme } from '../../app/contexts/ThemeContext';
 
 export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
 export default function ExpenseItem(itemProps : ExpenseItemProps) {
-  const textColor = useThemeColor("primaryText");
-  const backgroundColor = useThemeColor("backgroundColor")
+  const { colors } = useTheme(); 
   return (
       <CustomCard>
         <View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
-        <View style={[styles.textSection, {backgroundColor: backgroundColor}]}>
+        <View style={[styles.textSection, {backgroundColor: colors.backgroundColor}]}>
           <Text style={{
             fontSize: SIZES.normal,
-            color: textColor
+            color: colors.primaryText
           }} numberOfLines={1}>{itemProps.category}</Text>
           <Text style={{
             fontSize: SIZES.large,
-            color: textColor
+            color: colors.primaryText
           }} numberOfLines={1}>{itemProps.title}</Text>
           <Text style={{
             fontSize: SIZES.small,
-            color: textColor
+            color: colors.primaryText
           }} numberOfLines={1}>{itemProps.date}</Text>
         </View>
-        <View style={[styles.valueSection, {backgroundColor: backgroundColor}]}>
+        <View style={[styles.valueSection, {backgroundColor: colors.backgroundColor}]}>
           <Text style={{
             fontSize: SIZES.xxLarge,
-            color: textColor
+            color: colors.primaryText
           }} numberOfLines={1}>{itemProps.value}</Text>
         </View>
        

services/database.ts

@@ -143,7 +143,7 @@ export const DEV_populateDatabase = async () => {
 
         for(let i=0; i < 5; i++){
             let random = Math.floor(Math.random() * colors.length);
-            await addCategory(`Category ${i}`, colors[random], "budget")
+            await addCategory(`Category ${i}`, colors[random], "budget", 50)
         }
         const result = await executeQuery({sql:"SELECT * from category", args:[]})
         let categories: {[column: string]: any}[];