diff --git a/frontend/app_flowy/lib/plugins/doc/presentation/plugins/horizontal_rule_node_widget.dart b/frontend/app_flowy/lib/plugins/doc/presentation/plugins/horizontal_rule_node_widget.dart
index c38cc0846c..c3d4cbeb35 100644
--- a/frontend/app_flowy/lib/plugins/doc/presentation/plugins/horizontal_rule_node_widget.dart
+++ b/frontend/app_flowy/lib/plugins/doc/presentation/plugins/horizontal_rule_node_widget.dart
@@ -38,9 +38,11 @@ ShortcutEventHandler _insertHorzaontalRule = (editorState, event) {
 
 SelectionMenuItem horizontalRuleMenuItem = SelectionMenuItem(
   name: () => 'Horizontal rule',
-  icon: const Icon(
+  icon: (editorState, onSelected) => Icon(
     Icons.horizontal_rule,
-    color: Colors.black,
+    color: onSelected
+        ? editorState.editorStyle.selectionMenuItemSelectedIconColor
+        : editorState.editorStyle.selectionMenuItemIconColor,
     size: 18.0,
   ),
   keywords: ['horizontal rule'],
diff --git a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/selection_menu/selection_menu_item_widget.dart b/frontend/app_flowy/packages/appflowy_editor/lib/src/render/selection_menu/selection_menu_item_widget.dart
index cc92b60da0..912d9447ff 100644
--- a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/selection_menu/selection_menu_item_widget.dart
+++ b/frontend/app_flowy/packages/appflowy_editor/lib/src/render/selection_menu/selection_menu_item_widget.dart
@@ -50,7 +50,7 @@ class _SelectionMenuItemWidgetState extends State<SelectionMenuItemWidget> {
             widget.item.name(),
             textAlign: TextAlign.left,
             style: TextStyle(
-              color: widget.isSelected || _onHover
+              color: (widget.isSelected || _onHover)
                   ? editorStyle.selectionMenuItemSelectedTextColor
                   : editorStyle.selectionMenuItemTextColor,
               fontSize: 12.0,
diff --git a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/editor_style.dart b/frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/editor_style.dart
index 892c274474..30e4465bf8 100644
--- a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/editor_style.dart
+++ b/frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/editor_style.dart
@@ -93,9 +93,9 @@ class EditorStyle extends ThemeExtension<EditorStyle> {
       selectionMenuItemIconColor:
           selectionMenuItemIconColor ?? this.selectionMenuItemIconColor,
       selectionMenuItemSelectedTextColor: selectionMenuItemSelectedTextColor ??
-          selectionMenuItemSelectedTextColor,
+          this.selectionMenuItemSelectedTextColor,
       selectionMenuItemSelectedIconColor: selectionMenuItemSelectedIconColor ??
-          selectionMenuItemSelectedIconColor,
+          this.selectionMenuItemSelectedIconColor,
       selectionMenuItemSelectedColor:
           selectionMenuItemSelectedColor ?? this.selectionMenuItemSelectedColor,
       textPadding: textPadding ?? textPadding,