theme changes

app/_layout.tsx

@@ -1,32 +1,56 @@
-import { Tabs } from 'expo-router/tabs';
-import {HeaderTitle} from "@react-navigation/elements";
+import { Tabs } from "expo-router/tabs";
+import {StyleSheet, View} from "react-native"
 
 import { FontAwesome } from "@expo/vector-icons";
+import {useThemeColor} from "../hooks/hooks";
+import {color} from "ansi-fragments";
 
 export default function Layout() {
+    const selectedColor: string = useThemeColor( "tabIconSelected");
+    const defaultColor: string = useThemeColor("tabIconDefault");
+    const backgroundColor: string = useThemeColor("backgroundColor");
+
+    const styles = StyleSheet.create({
+        sceneContainer: {
+            backgroundColor: backgroundColor,
+            position: "absolute",
+        },
+        view: {
+            backgroundColor: "red",
+        }
+    });
+
+    const screenOptions = {
+            tabBarActiveTintColor: selectedColor,
+            tabBarInactiveTintColor: defaultColor,
+            headerShown: false,
+    }
+
     return (
-        <Tabs initialRouteName={"index"}>
+        <Tabs sceneContainerStyle={styles.sceneContainer} initialRouteName={"index"} screenOptions={{tabBarBackground: () => {
+            return <View style={styles.view}/>;
+        }}}>
             <Tabs.Screen name="budget" options={
                 {
                     tabBarLabel: "Budget",
-                    tabBarIcon: ({ color, size }) => (
+                    tabBarIcon: ({size, color}) => (
                         <FontAwesome name="money" size={size} color={color}/>),
                 }
             }/>
             <Tabs.Screen name="index" options={
                 {
                     tabBarLabel: "Home",
-                    tabBarIcon: ({ color, size }) => (
+                    tabBarIcon: ({size, color}) => (
                         <FontAwesome name="home" size={size} color={color}/>),
                 }
             }/>
             <Tabs.Screen name="stats" options={
                 {
                     tabBarLabel: "Stats",
-                    tabBarIcon: ({ color, size }) => (
+                    tabBarIcon: ({size, color}) => (
                         <FontAwesome name="bar-chart" size={size} color={color}/>),
                 }
             }/>
         </Tabs>
         );
-}
+}