diff --git a/frontend/app_flowy/packages/appflowy_editor/lib/src/service/context_menu/context_menu.dart b/frontend/app_flowy/packages/appflowy_editor/lib/src/service/context_menu/context_menu.dart
index 80fceb03d1..92b43abdbb 100644
--- a/frontend/app_flowy/packages/appflowy_editor/lib/src/service/context_menu/context_menu.dart
+++ b/frontend/app_flowy/packages/appflowy_editor/lib/src/service/context_menu/context_menu.dart
@@ -30,26 +30,43 @@ class ContextMenu extends StatelessWidget {
     final children = <Widget>[];
     for (var i = 0; i < items.length; i++) {
       for (var j = 0; j < items[i].length; j++) {
+        var onHover = false;
         children.add(
-          Material(
-            child: InkWell(
-              hoverColor: const Color(0xFFE0F8FF),
-              customBorder: RoundedRectangleBorder(
-                borderRadius: BorderRadius.circular(6),
-              ),
-              onTap: () {
-                items[i][j].onPressed(editorState);
-                onPressed();
-              },
-              child: Padding(
-                padding: const EdgeInsets.all(8.0),
-                child: Text(
-                  items[i][j].name,
-                  textAlign: TextAlign.start,
-                  style: const TextStyle(fontSize: 14),
+          StatefulBuilder(
+            builder: (BuildContext context, setState) {
+              return Material(
+                color: editorState.editorStyle.selectionMenuBackgroundColor,
+                child: InkWell(
+                  hoverColor:
+                      editorState.editorStyle.selectionMenuItemSelectedColor,
+                  customBorder: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(6),
+                  ),
+                  onTap: () {
+                    items[i][j].onPressed(editorState);
+                    onPressed();
+                  },
+                  onHover: (value) => setState(() {
+                    onHover = value;
+                  }),
+                  child: Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: Text(
+                      items[i][j].name,
+                      textAlign: TextAlign.start,
+                      style: TextStyle(
+                        fontSize: 14,
+                        color: onHover
+                            ? editorState
+                                .editorStyle.selectionMenuItemSelectedTextColor
+                            : editorState
+                                .editorStyle.selectionMenuItemTextColor,
+                      ),
+                    ),
+                  ),
                 ),
-              ),
-            ),
+              );
+            },
           ),
         );
       }
@@ -67,7 +84,7 @@ class ContextMenu extends StatelessWidget {
           minWidth: 140,
         ),
         decoration: BoxDecoration(
-          color: Colors.white,
+          color: editorState.editorStyle.selectionMenuBackgroundColor,
           boxShadow: [
             BoxShadow(
               blurRadius: 5,