plz work

components/Global/components/favorite-button.tsx

@@ -5,7 +5,7 @@ import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
 import { useMutation } from "@tanstack/react-query";
 import { isUndefined } from "lodash";
 import { useUserData } from "../../../api/queries/favorites";
-import { Spinner, useTheme } from "tamagui";
+import { getTokens, Spinner } from "tamagui";
 import Client from "../../../api/client";
 import { usePlayerContext } from "../../..//player/provider";
 
@@ -27,8 +27,6 @@ export default function FavoriteButton({
 
     const { data, isFetching, isFetched, refetch } = useUserData(item.Id!);
 
-    const theme = useTheme();
-
     const useSetFavorite = useMutation({
         mutationFn: async (mutation: SetFavoriteMutation) => {
             return getUserLibraryApi(Client.api!)
@@ -85,7 +83,7 @@ export default function FavoriteButton({
         ) : (
             <Icon
                 name={isFavorite ? "heart" : "heart-outline"}
-                color={theme.telemagenta.val}
+                color={getTokens().color.telemagenta.val}
                 onPress={toggleFavorite}
             /> 
 

components/Global/components/item.tsx

@@ -2,7 +2,7 @@ import { usePlayerContext } from "../../../player/provider";
 import { StackParamList } from "../../../components/types";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
-import { Separator, Spacer, useTheme, View, XStack, YStack } from "tamagui";
+import { getTokens, Separator, Spacer, View, XStack, YStack } from "tamagui";
 import { Text } from "../helpers/text";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import BlurhashedImage from "./blurhashed-image";
@@ -24,8 +24,6 @@ export default function Item({
 
     const { width } = useSafeAreaFrame();
 
-    const theme = useTheme();
-
     return (
         <View flex={1}>
             <Separator />
@@ -106,7 +104,7 @@ export default function Item({
                     { item.UserData?.IsFavorite ? (
                         <Icon 
                             small
-                            color={theme.telemagenta.val}
+                            color={getTokens().color.telemagenta.val}
                             name="heart"
                         />
                     ) : (

components/Global/components/track.tsx

@@ -1,6 +1,6 @@
 import { usePlayerContext } from "../../../player/provider";
 import React from "react";
-import { Separator, Spacer, Theme, useTheme, XStack, YStack } from "tamagui";
+import { getToken, getTokens, Separator, Spacer, Theme, useTheme, XStack, YStack } from "tamagui";
 import { Text } from "../helpers/text";
 import { RunTimeTicks } from "../helpers/time-codes";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
@@ -37,13 +37,12 @@ export default function Track({
     invertedColors,
 } : TrackProps) : React.JSX.Element {
 
+    const theme = useTheme();
     const { width } = useSafeAreaFrame();
     const { nowPlaying, queue, usePlayNewQueue } = usePlayerContext();
 
     const isPlaying = nowPlaying?.item.Id === track.Id;
 
-    const theme = useTheme();
-
     return (
         <Theme name={invertedColors ? "inverted_purple" : undefined}>
             <Separator />
@@ -90,7 +89,7 @@ export default function Track({
                         />
                     ) : (
                     <Text 
-                        color={isPlaying ? theme.telemagenta : theme.color}
+                        color={isPlaying ? getTokens().color.telemagenta : theme.color}
                     >
                         { track.IndexNumber?.toString() ?? "" }
                     </Text>

components/Global/helpers/icon-card.tsx

@@ -1,4 +1,4 @@
-import { Card, useTheme, View } from "tamagui";
+import { Card, getTokens, View } from "tamagui";
 import { H2 } from "./text";
 import Icon from "./icon";
 
@@ -14,8 +14,6 @@ export default function IconCard({
     caption?: string | undefined,
 }) : React.JSX.Element {
 
-    const theme = useTheme();
-
     return (
         <View 
             alignItems="center"
@@ -31,12 +29,12 @@ export default function IconCard({
                 onPress={onPress}
             >
                 <Card.Header>
-                    <Icon color={theme.purpleDark.val} name={name} large />
+                    <Icon color={getTokens().color.purpleDark.val} name={name} large />
                 </Card.Header>
                 <Card.Footer padded>
-                    <H2 color={theme.purpleDark.val}>{ caption }</H2>
+                    <H2 color={getTokens().color.purpleDark.val}>{ caption }</H2>
                 </Card.Footer>
-                <Card.Background backgroundColor={theme.telemagenta.val}>
+                <Card.Background backgroundColor={getTokens().color.telemagenta}>
 
                 </Card.Background>
             </Card>

components/ItemDetail/component.tsx

@@ -3,7 +3,7 @@ import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import { StackParamList } from "../types";
 import TrackOptions from "./helpers/TrackOptions";
-import { ScrollView, Spacer, useTheme, View, XStack, YStack } from "tamagui";
+import { getTokens, ScrollView, Spacer, View, XStack, YStack } from "tamagui";
 import BlurhashedImage from "../Global/components/blurhashed-image";
 import { Text } from "../Global/helpers/text";
 import FavoriteButton from "../Global/components/favorite-button";
@@ -29,7 +29,6 @@ export default function ItemDetail({
     ]);
 
     const { width } = useSafeAreaFrame();
-    const theme = useTheme();
 
     switch (item.Type) {
         case "Audio": {
@@ -87,7 +86,7 @@ export default function ItemDetail({
                     <Text 
                         textAlign="center"
                         fontSize={"$6"} 
-                        color={theme.telemagenta}
+                        color={getTokens().color.telemagenta}
                         onPress={() => {
                             if (item.ArtistItems) {
 

components/Player/mini-player.tsx

@@ -1,5 +1,5 @@
 import React, {  } from "react";
-import { useTheme, View, XStack, YStack } from "tamagui";
+import { getTokens, useTheme, View, XStack, YStack } from "tamagui";
 import { usePlayerContext } from "../../player/provider";
 import { BottomTabNavigationEventMap } from "@react-navigation/bottom-tabs";
 import { NavigationHelpers, ParamListBase } from "@react-navigation/native";
@@ -56,7 +56,7 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
                         </TextTicker>
 
                         <TextTicker {...TextTickerConfig}>
-                            <Text color={theme.telemagenta}>{nowPlaying?.artist ?? ""}</Text>
+                            <Text color={getTokens().color.telemagenta}>{nowPlaying?.artist ?? ""}</Text>
                         </TextTicker>
                     </YStack>
                     

components/Player/screens/index.tsx

@@ -5,7 +5,7 @@ import { usePlayerContext } from "../../../player/provider";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import React, { useState, useEffect } from "react";
 import { SafeAreaView, useSafeAreaFrame } from "react-native-safe-area-context";
-import { YStack, XStack, Spacer, useTheme } from "tamagui";
+import { YStack, XStack, Spacer, getTokens } from "tamagui";
 import PlayPauseButton from "../helpers/buttons";
 import { H5, Text } from "../../../components/Global/helpers/text";
 import Icon from "../../../components/Global/helpers/icon";
@@ -35,8 +35,6 @@ export default function PlayerScreen({ navigation }: { navigation: NativeStackNa
 
     const { width } = useSafeAreaFrame();
 
-    const theme = useTheme();
-
     // Prevent gesture event to close player if we're seeking
     useEffect(() => {
         navigation.getParent()!.setOptions({ gestureEnabled: !seeking });
@@ -96,7 +94,7 @@ export default function PlayerScreen({ navigation }: { navigation: NativeStackNa
                             <TextTicker {...TextTickerConfig}>
                                 <Text 
                                     fontSize={"$6"}
-                                    color={theme.telemagenta}
+                                    color={getTokens().color.telemagenta}
                                     onPress={() => {
                                         if (nowPlaying!.item.ArtistItems) {
                                             navigation.navigate("Artist", {