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"),
+            backgroundColor: colors.backgroundColor,
-            borderTopColor: useThemeColor("backgroundColor"),
+            borderTopColor: colors.backgroundColor
         }
     });
 
     const screenOptions = {
-            tabBarActiveTintColor: useThemeColor( "tabIconSelected"),
+            tabBarActiveTintColor: colors.tabIconSelected,
-            tabBarInactiveTintColor: useThemeColor("tabIconDefault"),
+            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");
+  const backgroundColor = colors.backgroundColor
-  styles.text = {...styles.text, color: useThemeColor("primaryText")}
+  styles.text = {...styles.text, color: colors.primaryText}
   
   const [systemTheme, setSystemTheme] = useState<boolean>(isSystemTheme!)
   const [darkMode, setDarkMode] = useState<boolean>(theme === "dark" ? true : false)

app/login.tsx

@@ -3,16 +3,17 @@ import { Redirect } from 'expo-router';
 import React, { useState } from 'react';
 import { Button, SafeAreaView } from 'react-native';
 import { Input } from '../components';
-import { useThemeColor } from '../hooks/useThemeColor';
+import { useTheme } from "./contexts/ThemeContext";
 import { useAuth } from './contexts/AuthContext';
 
 export default function login() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("")
   const {authState, onLogin} = useAuth()
-  const backgroundColor = useThemeColor("backgroundColor")
+  const {colors} = useTheme()
-  const textColor = useThemeColor("primaryText");
+  const backgroundColor = colors.backgroundColor;
-  const elementDefaultColor = useThemeColor("elementDefaultColor")
+  const textColor = colors.primaryText
+  const elementDefaultColor = colors.elementDefaultColor
 
 
   // const {authState, onLogin} = useAuth();

components/common/CustomCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'
-import { useThemeColor } from '../../hooks/useThemeColor'
+import { useTheme } from '../../app/contexts/ThemeContext'
 
 function generateBoxShadowStyle(
   xOffset: number,
@@ -18,7 +18,7 @@ function generateBoxShadowStyle(
       shadowOffset : {width: xOffset, height: yOffset},
       shadowOpacity,
       shadowRadius,
-      backgroundColor: useThemeColor("backgroundColor")
+      backgroundColor: useTheme().colors.backgroundColor
     }
   }else if (Platform.OS === 'android'){
     styles.boxShadow = {

components/common/SearchBar.tsx

@@ -2,15 +2,16 @@ import { AntDesign } from '@expo/vector-icons';
 import React from 'react';
 import { StyleSheet, TextInput, TouchableOpacity, View, ViewProps } from 'react-native';
 import { SIZES } from '../../constants/theme';
-import { useThemeColor } from '../../hooks/useThemeColor';
+import { useTheme } from '../../app/contexts/ThemeContext';
 
 type SearchBarProps = {placeholder: string} & ViewProps
 
 export default function SearchBar(props: SearchBarProps) {
   const [isActive, setIsactive] = React.useState(false);
+  const { colors } = useTheme();
 
-  const textColor = useThemeColor("interactiveText")
+  const textColor = colors
-  const backgroundColor = useThemeColor("elementDefaultColor");
+  const backgroundColor = colors.elementDefaultColor;
 
   const handleChange = (text:string) : void  =>  {
     if(text !== ""){

components/common/plus.tsx

@@ -1,13 +1,14 @@
 import { AntDesign } from '@expo/vector-icons'
 import React from 'react'
 import { StyleSheet, TouchableOpacity, ViewProps } from 'react-native'
-import { useThemeColor } from '../../hooks/useThemeColor'
+import { useTheme } from '../../app/contexts/ThemeContext'
 
 type PlusProps = ViewProps & {onPress? : ()=> void | undefined}
 
 const Plus = (props : PlusProps) => {
-  const accentColor = useThemeColor("accentColor");
+  const {colors} = useTheme()
-  const primaryText = useThemeColor("primaryText");
+  const accentColor = colors.accentColor;
+  const primaryText = colors.primaryText;
 
   const style = StyleSheet.create({
     plus:{

components/home/Welcome/Welcome.tsx

@@ -2,7 +2,6 @@ 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}
@@ -36,7 +35,6 @@ export default function Welcome(props: WelcomeProps) {
   const onpress = props.onPress
 
   const textcolor = colors.primaryText
-  //const backgroundColor: string = useThemeColor("backgroundColor")
 
   return (
     <View style={{

components/home/expenseItem/expenseItem.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ColorValue, StyleSheet, Text, View } from 'react-native';
 import { SIZES } from '../../../constants/theme';
-import { useThemeColor } from '../../../hooks/useThemeColor';
 import { useTheme } from '../../../app/contexts/ThemeContext';
 import CustomCard from "../../common/CustomCard";
 import { SimpleDate } from '../../../util/SimpleDate';

components/home/userSettings/Setting.tsx

@@ -1,8 +1,6 @@
-import { View, Text, StyleSheet, Switch, SwitchProps, useColorScheme, TouchableOpacityProps, TouchableOpacity, ViewProps } from 'react-native'
+import { View, Text, StyleSheet, Switch, SwitchProps, useColorScheme, TouchableOpacityProps, TouchableOpacity } from 'react-native'
 import React from 'react'
 import { SIZES } from '../../../constants/theme'
-import { useThemeColor } from '../../../hooks/useThemeColor';
-import { CustomCard } from "../../"
 import { useTheme } from '../../../app/contexts/ThemeContext';
 
 interface ToggleSettingProps extends SwitchProps {

hooks/useThemeColor.ts

@@ -1,7 +1,13 @@
 import { useColorScheme } from "react-native";
 import colors from "../constants/colors";
 
+/**
+ * @deprecated use Theme context instead
+ * @param colorName 
+ * @returns 
+ */
 export function useThemeColor(colorName: keyof typeof colors.light & keyof typeof colors.dark): string {
+    console.warn("useThemeColor is depreciated. Use useTheme().colors instead")
     const theme = useColorScheme() ?? "light";
     return colors[theme][colorName];
 }