diff --git a/native/navigation/tooltip.react.js b/native/navigation/tooltip.react.js
--- a/native/navigation/tooltip.react.js
+++ b/native/navigation/tooltip.react.js
@@ -781,7 +781,7 @@
     borderRightWidth: 1,
   },
   items: {
-    backgroundColor: 'panelBackground',
+    backgroundColor: 'tooltipBackground',
     borderRadius: 5,
     overflow: 'hidden',
   },
@@ -803,14 +803,14 @@
     borderRightColor: 'transparent',
     borderRightWidth: 10,
     borderStyle: 'solid',
-    borderTopColor: 'panelBackground',
+    borderTopColor: 'tooltipBackground',
     borderTopWidth: 10,
     height: 10,
     top: Platform.OS === 'android' ? -1 : 0,
     width: 10,
   },
   triangleUp: {
-    borderBottomColor: 'panelBackground',
+    borderBottomColor: 'tooltipBackground',
     borderBottomWidth: 10,
     borderLeftColor: 'transparent',
     borderLeftWidth: 10,
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -80,6 +80,7 @@
   tabBarActiveTintColor: '#7E57C2',
   vibrantGreenButton: '#00C853',
   vibrantRedButton: '#F53100',
+  tooltipBackground: '#E0E0E0',
 });
 export type Colors = $Exact<typeof light>;
 
@@ -153,6 +154,7 @@
   tabBarActiveTintColor: '#AE94DB',
   vibrantGreenButton: '#00C853',
   vibrantRedButton: '#F53100',
+  tooltipBackground: '#1F1F1F',
 });
 const colors = { light, dark };