diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart
index cc2eb942ff..9ee48c4e53 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart
@@ -132,7 +132,13 @@ class _CalloutBlockComponentWidgetState
     if (colorString == null) {
       return Colors.transparent;
     }
-    return colorString.toColor();
+
+    final brightness = Theme.of(context).brightness;
+    final bool isDarkMode = brightness == Brightness.dark;
+
+    final Color bgColor = colorString.toColor();
+
+    return isDarkMode ? bgColor.withOpacity(0.3) : bgColor;
   }
 
   // get the emoji of the note block from the node's attributes or default to '📌'