diff --git a/frontend/app_flowy/lib/workspace/presentation/stack_page/doc/widget/toolbar/link_button.dart b/frontend/app_flowy/lib/workspace/presentation/stack_page/doc/widget/toolbar/link_button.dart
index c42967a0e1..3daa9f0679 100644
--- a/frontend/app_flowy/lib/workspace/presentation/stack_page/doc/widget/toolbar/link_button.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/stack_page/doc/widget/toolbar/link_button.dart
@@ -53,7 +53,15 @@ class _FlowyLinkStyleButtonState extends State<FlowyLinkStyleButton> {
     final theme = context.watch<AppTheme>();
     final isEnabled = !widget.controller.selection.isCollapsed;
     final pressedHandler = isEnabled ? () => _openLinkDialog(context) : null;
-    final icon = isEnabled ? svg('editor/share') : svg('editor/share', color: theme.shader4);
+    final icon = isEnabled
+        ? svg(
+            'editor/share',
+            color: theme.iconColor,
+          )
+        : svg(
+            'editor/share',
+            color: theme.disableIconColor,
+          );
 
     return FlowyIconButton(
       onPressed: pressedHandler,
diff --git a/frontend/app_flowy/lib/workspace/presentation/stack_page/doc/widget/toolbar/toolbar_icon_button.dart b/frontend/app_flowy/lib/workspace/presentation/stack_page/doc/widget/toolbar/toolbar_icon_button.dart
index c8eb8cde72..500f683355 100644
--- a/frontend/app_flowy/lib/workspace/presentation/stack_page/doc/widget/toolbar/toolbar_icon_button.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/stack_page/doc/widget/toolbar/toolbar_icon_button.dart
@@ -1,7 +1,7 @@
 import 'package:flowy_infra/image.dart';
-import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flutter/material.dart';
+import 'package:flowy_infra/theme.dart';
 import 'package:provider/provider.dart';
 
 const double defaultIconSize = 18;
@@ -29,9 +29,7 @@ class ToolbarIconButton extends StatelessWidget {
       iconPadding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
       onPressed: onPressed,
       width: width,
-      icon: isToggled == true
-          ? svg(iconName, color: Colors.white)
-          : svg(iconName),
+      icon: isToggled == true ? svg(iconName, color: Colors.white) : svg(iconName),
       fillColor: isToggled == true ? theme.main1 : theme.shader6,
       hoverColor: isToggled == true ? theme.main1 : theme.shader5,
       tooltipText: tooltipText,
diff --git a/frontend/app_flowy/packages/flowy_infra/lib/theme.dart b/frontend/app_flowy/packages/flowy_infra/lib/theme.dart
index 476f43d301..7b71e06053 100644
--- a/frontend/app_flowy/packages/flowy_infra/lib/theme.dart
+++ b/frontend/app_flowy/packages/flowy_infra/lib/theme.dart
@@ -62,6 +62,7 @@ class AppTheme {
   late Color tint9;
   late Color textColor;
   late Color iconColor;
+  late Color disableIconColor;
 
   late Color main1;
   late Color main2;
@@ -110,7 +111,8 @@ class AppTheme {
           ..main2 = const Color(0xff00b7ea)
           ..textColor = _black
           ..iconColor = _black
-          ..shadowColor = _black;
+          ..shadowColor = _black
+          ..disableIconColor = const Color(0xffbdbdbd);
 
       case ThemeType.dark:
         return AppTheme(ty: themeType, isDark: true)
@@ -144,7 +146,8 @@ class AppTheme {
           ..main2 = const Color(0xff009cc7)
           ..textColor = _white
           ..iconColor = _white
-          ..shadowColor = _white;
+          ..shadowColor = _white
+          ..disableIconColor = const Color(0xff333333);
     }
   }