apply theme

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>