Small Changes (delete index.js)

app/_layout.tsx

@@ -3,20 +3,19 @@ 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 tabBarColor: string = useThemeColor("tabBarColor");
 
     const styles = StyleSheet.create({
         sceneContainer: {
             backgroundColor: backgroundColor,
-            position: "absolute",
         },
-        view: {
-            backgroundColor: "red",
+        tabBar: {
+            backgroundColor: tabBarColor,
         }
     });
 
@@ -24,12 +23,11 @@ export default function Layout() {
             tabBarActiveTintColor: selectedColor,
             tabBarInactiveTintColor: defaultColor,
             headerShown: false,
+            tabBarStyle: styles.tabBar,
     }
 
     return (
-        <Tabs sceneContainerStyle={styles.sceneContainer} initialRouteName={"index"} screenOptions={{tabBarBackground: () => {
-            return <View style={styles.view}/>;
-        }}}>
+        <Tabs sceneContainerStyle={styles.sceneContainer} initialRouteName={"index"} screenOptions={screenOptions}>
             <Tabs.Screen name="budget" options={
                 {
                     tabBarLabel: "Budget",

app/index.tsx

@@ -1,12 +1,7 @@
 import { StyleSheet, View, Text } from 'react-native';
+import {useThemeColor} from "../hooks/hooks";
 
 export default function Page() {
-    return (
-        <View style={styles.container}>
-            <Text style={styles.text}>Home</Text>
-        </View>
-        );
-}
 
     const styles = StyleSheet.create({
         container: {
@@ -15,7 +10,16 @@ const styles = StyleSheet.create({
             justifyContent: "center",
         },
         text: {
+            color: useThemeColor("color"),
             fontSize: 70,
             fontWeight: "bold"
         }
     });
+
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.text}>Home</Text>
+        </View>
+        );
+}

constants/colors.ts

@@ -1,20 +1,32 @@
 export default {
     light: {
+        primaryText: "#000000",
+        secondaryText: "#404040",
+        interactiveText: "#0645AD",
+
+
+
         tabIconDefault: "gray",
-        tabIconSelected: "orange",
-        color: "orange",
-        contrastColor: "",
-        accentColor: "",
+        tabIconSelected: "#ED7D31",
+        color: "#000000",
+        accentColor: "#ED7D31",
         backgroundColor: "#ffffff",
         tabBarColor: "gray",
     },
     dark: {
-        tabIconDefault: "gray",
-        tabIconSelected: "orange",
-        color: "#1B9AAA",
-        contrastColor: "",
-        accentColor: "",
-        backgroundColor: "lightgray",
-        tabBarColor: "gray",
+        // Text
+        primaryText: "#FFFFFF",
+        secondaryText: "#B3B3B3",
+        interactiveText: "#0645AD",
+
+        // Tabs
+        tabIconDefault: "#FFFFFF",
+        tabIconSelected: "#ED7D31",
+
+        // 
+        color: "#FFFFFF",
+        accentColor: "#ED7D31",
+        backgroundColor: "#181818",
+        tabBarColor: "#121212",
     }
 }

index.js

@@ -1 +0,0 @@
-import "expo-router/entry";