diff --git a/web/src/features/perses-dashboards/components/PersesWrapper.tsx b/web/src/features/perses-dashboards/components/PersesWrapper.tsx
index e125c724a..54359fa58 100644
--- a/web/src/features/perses-dashboards/components/PersesWrapper.tsx
+++ b/web/src/features/perses-dashboards/components/PersesWrapper.tsx
@@ -6,6 +6,8 @@ import {
   chart_color_blue_300,
   chart_color_blue_400,
   chart_color_blue_500,
+  t_color_gray_10,
+  t_color_gray_90,
   t_color_gray_95,
   t_color_white,
   t_global_background_color_100,
@@ -373,6 +375,7 @@ export function useRemotePluginLoader(): PluginLoader {
 export function PersesWrapper({ children, project }: PersesWrapperProps) {
   const { theme } = usePatternFlyTheme();
   const navigate = useNavigate();
+  const isDark = theme === 'dark';
 
   const muiTheme = getTheme(theme, {
     shape: {
@@ -384,6 +387,13 @@ export function PersesWrapper({ children, project }: PersesWrapperProps) {
   const chartsTheme: PersesChartsTheme = generateChartsTheme(muiTheme, {
     echartsTheme: {
       color: patternflyChartsMultiUnorderedPalette,
+      tooltip: {
+        backgroundColor: isDark ? t_color_gray_10.value : t_global_background_color_400.value,
+        borderColor: isDark ? t_color_gray_10.value : t_global_background_color_400.value,
+        textStyle: {
+          color: isDark ? t_color_gray_90.value : t_color_white.value,
+        },
+      },
     },
     thresholds: {
       defaultColor: patternflyBlue300,