Added theme components. Reorganized them. Prepping for Tech Tracker Rewrite

constants/Colors.ts

@@ -1,26 +1,50 @@
-/**
- * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
- * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
- */
-
-const tintColorLight = '#0a7ea4';
+// Dark mode colors
+const dark = '#2e2f3d';
 const tintColorDark = '#fff';
+const iconColorDark = '#9BA1A6';
+
+// Light mode colors
+const light = '#ECEDEE';
+const tintColorLight = '#0a7ea4';
+const iconColorLight = '#687076';
 
 export const Colors = {
   light: {
-    text: '#11181C',
-    background: '#fff',
+    text: dark,
+    background: light,
     tint: tintColorLight,
-    icon: '#687076',
-    tabIconDefault: '#687076',
+    icon: iconColorLight,
+    tabIconDefault: iconColorLight,
     tabIconSelected: tintColorLight,
+    
+    // New colors
+    card: '#ffffff',
+    border: '#d0d7de',
+    notification: '#f85149',
+    placeholder: '#8b949e',
+    inactive: '#afb8c1',
+    subtle: '#f6f8fa',
+    error: '#e5484d',
+    success: '#46954a',
+    warning: '#daaa3f'
   },
   dark: {
-    text: '#ECEDEE',
-    background: '#151718',
+    text: light,
+    background: dark,
     tint: tintColorDark,
-    icon: '#9BA1A6',
-    tabIconDefault: '#9BA1A6',
+    icon: iconColorDark,
+    tabIconDefault: iconColorDark,
     tabIconSelected: tintColorDark,
+    
+    // New colors
+    card: '#3a3b4a',
+    border: '#444c56',
+    notification: '#ff6a69',
+    placeholder: '#636e7b',
+    inactive: '#4d5560',
+    subtle: '#272934',
+    error: '#ff6369',
+    success: '#3fb950',
+    warning: '#d29922'
   },
 };