tamagui theming

components/Album/component.tsx

@@ -83,7 +83,7 @@ export default function Album(props: AlbumProps): React.JSX.Element {
 
                 <XStack justifyContent="flex-end">
                     <Text 
-                        color={"$gray10"} 
+                        color={"$purpleGray"} 
                         style={{ display: "block"}}
                         >
                         Total Runtime: 

components/ItemDetail/component.tsx

@@ -104,7 +104,7 @@ export default function ItemDetail({
                         
                     <Text 
                         fontSize={"$6"} 
-                        color={"$gray10"}
+                        color={"$purpleGray"}
                     >
                         { item.Album ?? "" }
                     </Text>

components/Player/screens/index.tsx

@@ -114,7 +114,7 @@ export default function PlayerScreen({ navigation }: { navigation: NativeStackNa
 
                             <Text 
                                 fontSize={"$6"} 
-                                color={"$gray10"}
+                                color={"$purpleGray"}
                             >
                                 { nowPlaying!.album ?? "" }
                             </Text>

components/Playlist/component.tsx

@@ -74,7 +74,7 @@ export default function Playlist(props: PlaylistProps): React.JSX.Element {
 
                 <XStack justifyContent="flex-end">
                     <Text 
-                        color={"$gray10"} 
+                        color={"$purpleGray"} 
                         style={{ display: "block"}}
                     >
                         Total Runtime:

tamagui.config.ts

@@ -1,7 +1,18 @@
-import { animations, tokens, themes, media, shorthands } from '@tamagui/config/v3'
-import { createTamagui } from 'tamagui' // or '@tamagui/core'
+import { animations, tokens as TamaguiTokens, media, shorthands } from '@tamagui/config/v3'
+import { createTamagui, createTokens } from 'tamagui' // or '@tamagui/core'
 import { headingFont, bodyFont } from './fonts.config'
 
+const tokens = createTokens({
+  ...TamaguiTokens,
+  color: {
+    purpleDark: "#070217",
+    purple: "#100538",
+    purpleGray: "#B5AADC",
+    white: "#ffffff",
+    black: "#000000"
+  },
+})
+
 const jellifyConfig = createTamagui({
     animations,
     fonts:{
@@ -11,7 +22,16 @@ const jellifyConfig = createTamagui({
     media,
     shorthands,
     tokens,
-    themes,
+    themes: {
+      dark: {
+        background: tokens.color.purpleDark,
+        color: tokens.color.white
+      },
+      light: {
+        background: tokens.color.white,
+        color: tokens.color.purpleDark
+      }
+    }
 });
 
 export type JellifyConfig = typeof jellifyConfig