diff --git a/components/PlayButton.tsx b/components/PlayButton.tsx
index df3b64cd..b5409af0 100644
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -226,7 +226,7 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
     backgroundColor: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.average, endColor.value.average]
+      [startColor.value.primary, endColor.value.primary]
     ),
   }));
 
@@ -279,7 +279,7 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
         </View>
 
         <Animated.View
-          style={[animatedAverageStyle]}
+          style={[animatedAverageStyle, { opacity: 0.5 }]}
           className="absolute w-full h-full top-0 left-0 rounded-xl"
         />
         <View
diff --git a/hooks/useImageColors.ts b/hooks/useImageColors.ts
index 7f15b4b0..3541c09d 100644
--- a/hooks/useImageColors.ts
+++ b/hooks/useImageColors.ts
@@ -28,7 +28,7 @@ export const useImageColors = (
             secondary = colors.muted;
           } else if (colors.platform === "ios") {
             primary = colors.primary;
-            secondary = colors.detail;
+            secondary = colors.secondary;
             average = colors.background;
           }
 
diff --git a/utils/atoms/primaryColor.ts b/utils/atoms/primaryColor.ts
index 99dbc709..1e1ebdf8 100644
--- a/utils/atoms/primaryColor.ts
+++ b/utils/atoms/primaryColor.ts
@@ -48,6 +48,19 @@ const calculateRelativeLuminance = (rgb: number[]): number => {
   return 0.2126 * r + 0.7152 * g + 0.0722 * b;
 };
 
+const isCloseToBlack = (color: string): boolean => {
+  const r = parseInt(color.slice(1, 3), 16);
+  const g = parseInt(color.slice(3, 5), 16);
+  const b = parseInt(color.slice(5, 7), 16);
+
+  // Check if the color is very dark (close to black)
+  return r < 20 && g < 20 && b < 20;
+};
+
+const adjustToNearBlack = (color: string): string => {
+  return "#212121"; // A very dark gray, almost black
+};
+
 const baseThemeColorAtom = atom<ThemeColors>({
   primary: "#FFFFFF",
   secondary: "#000000",
@@ -59,12 +72,15 @@ export const itemThemeColorAtom = atom(
   (get) => get(baseThemeColorAtom),
   (get, set, update: Partial<ThemeColors>) => {
     const currentColors = get(baseThemeColorAtom);
-    const newColors = { ...currentColors, ...update };
+    let newColors = { ...currentColors, ...update };
+
+    // Adjust primary color if it's too close to black
+    if (newColors.primary && isCloseToBlack(newColors.primary)) {
+      newColors.primary = adjustToNearBlack(newColors.primary);
+    }
 
     // Recalculate text color if primary color changes
-    if (update.average) {
-      newColors.text = calculateTextColor(update.average);
-    }
+    if (update.primary) newColors.text = calculateTextColor(newColors.primary);
 
     set(baseThemeColorAtom, newColors);
   }