diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts
index 6c75a75142..d9f89716c6 100644
--- a/packages/app/src/styles/theme.ts
+++ b/packages/app/src/styles/theme.ts
@@ -17,6 +17,7 @@ export const getLightTheme = (
       pageBackground: '#fff',
       hoverBackground: '#F1F3FF',
       popoverBackground: '#fff',
+      toolTipBackground: '#6880FF',
       codeBackground: '#f2f5f9',
 
       textColor: '#3A4C5C',
@@ -79,6 +80,7 @@ export const getDarkTheme = (
         editorMode === 'edgeless'
           ? lightTheme.colors.codeBackground
           : '#505662',
+      toolTipBackground: '#1F2021',
 
       textColor: '#fff',
       edgelessTextColor: '#3A4C5C',
@@ -119,6 +121,7 @@ export const globalThemeVariables: (
     '--affine-popover-background': theme.colors.popoverBackground,
     '--affine-hover-background': theme.colors.hoverBackground,
     '--affine-code-background': theme.colors.codeBackground,
+    '--affine-tooltip-background': theme.colors.toolTipBackground,
 
     '--affine-text-color': theme.colors.textColor,
     '--affine-edgeless-text-color': theme.colors.edgelessTextColor,
diff --git a/packages/app/src/styles/types.ts b/packages/app/src/styles/types.ts
index 41f5a2362f..8d4990f4f0 100644
--- a/packages/app/src/styles/types.ts
+++ b/packages/app/src/styles/types.ts
@@ -23,6 +23,7 @@ export interface AffineTheme {
     popoverBackground: string;
     hoverBackground: string;
     codeBackground: string;
+    toolTipBackground: string;
 
     // Use for the page`s text
     textColor: string;
@@ -77,6 +78,7 @@ export interface AffineThemeCSSVariables {
   '--affine-popover-background': AffineTheme['colors']['popoverBackground'];
   '--affine-hover-background': AffineTheme['colors']['hoverBackground'];
   '--affine-code-background': AffineTheme['colors']['codeBackground'];
+  '--affine-tooltip-background': AffineTheme['colors']['toolTipBackground'];
 
   '--affine-text-color': AffineTheme['colors']['textColor'];
   '--affine-edgeless-text-color': AffineTheme['colors']['edgelessTextColor'];
diff --git a/packages/app/src/ui/tooltip/Tooltip.tsx b/packages/app/src/ui/tooltip/Tooltip.tsx
index 0bf92323ef..3ace30a449 100644
--- a/packages/app/src/ui/tooltip/Tooltip.tsx
+++ b/packages/app/src/ui/tooltip/Tooltip.tsx
@@ -8,10 +8,7 @@ const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
   return {
     boxShadow: theme.shadow.tooltip,
     padding: '4px 12px',
-    backgroundColor:
-      theme.mode === 'dark'
-        ? theme.colors.popoverBackground
-        : theme.colors.primaryColor,
+    backgroundColor: theme.colors.toolTipBackground,
     color: '#fff',
     fontSize: theme.font.xs,
   };