useTheme applied globally

app/(tabs)/_layout.tsx

@@ -4,29 +4,25 @@ import { StyleSheet } from "react-native";
 import { FontAwesome } from "@expo/vector-icons";
 import { Redirect } from "expo-router";
 import React, { useEffect } from "react";
-import { useThemeColor } from "../../hooks/useThemeColor";
+import { useTheme } from "../contexts/ThemeContext";
 import { useAuth } from "../contexts/AuthContext";
 
 export default function Layout() {
-    // const selectedColor: string = useThemeColor( "tabIconSelected");
-    // const defaultColor: string = useThemeColor("tabIconDefault");
-    // const backgroundColor: string = useThemeColor("backgroundColor");
-    // const tabBarColor: string = useThemeColor("tabBarColor");
     const {authState} = useAuth()
-
+    const {colors} = useTheme()
     const styles = StyleSheet.create({
         sceneContainer: {
-            backgroundColor: useThemeColor("containerColor"),
+            backgroundColor: colors.containerColor,
         },
         tabBar: {
-            backgroundColor: useThemeColor("backgroundColor"),
-            borderTopColor: useThemeColor("backgroundColor"),
+            backgroundColor: colors.backgroundColor,
+            borderTopColor: colors.backgroundColor
         }
     });
 
     const screenOptions = {
-            tabBarActiveTintColor: useThemeColor( "tabIconSelected"),
-            tabBarInactiveTintColor: useThemeColor("tabIconDefault"),
+            tabBarActiveTintColor: colors.tabIconSelected,
+            tabBarInactiveTintColor: colors.tabIconDefault,
             headerShown: false,
             tabBarStyle: styles.tabBar,
     }

app/(tabs)/home/_layout.tsx

@@ -2,7 +2,6 @@ import { Stack } from "expo-router";
 
 import { View, Text } from 'react-native'
 import React from 'react'
-import { useThemeColor } from "../../../hooks/useThemeColor";
 import { useTheme } from "../../contexts/ThemeContext";
 
 

app/(tabs)/home/index.tsx

@@ -5,7 +5,6 @@ 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 } from "../../../services/database";
 import { useAuth } from '../../contexts/AuthContext';
 import { useRouter } from "expo-router";

app/(tabs)/home/userSettings.tsx

@@ -1,6 +1,5 @@
 import { View, Text, StyleSheet, Image, Appearance } from 'react-native'
 import React, { useState } from 'react'
-import { useThemeColor } from '../../../hooks/useThemeColor'
 import { SIZES } from '../../../constants/theme'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { ButtonSetting, ToggleSetting } from '../../../components'
@@ -9,18 +8,13 @@ import { deleteExpenses, DEV_populateDatabase } from '../../../services/database
 import { useAuth } from '../../contexts/AuthContext'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 
-const generateStyles = (): void => {
-  styles.text = {
-    color: useThemeColor('primaryText')
-  }
-}
 
 export default function userSettings() {
   const {onLogout} = useAuth();
   const {theme, colors, isSystemTheme, applyTheme, applySystemTheme} = useTheme();
 
-  const backgroundColor = useThemeColor("backgroundColor");
-  styles.text = {...styles.text, color: useThemeColor("primaryText")}
+  const backgroundColor = colors.backgroundColor
+  styles.text = {...styles.text, color: colors.primaryText}
   
   const [systemTheme, setSystemTheme] = useState<boolean>(isSystemTheme!)
   const [darkMode, setDarkMode] = useState<boolean>(theme === "dark" ? true : false)