Feat(appflowy_flutter): dark mode improvement for generic area/widgets (#2099)

* chore: update color scheme for dark mode

* chore: update dark color scheme

1. update the background color for side bar, surface and divider in dark mode
2. comment out dandelion and lavender theme temporarily

* chore: update top bar BGcolor and icon color

* chore: update text color

* chore: update share button color on the top bar

* chore: add tooltip theme data in global

* chore: add hint and tertiary color and update font size pop up menu style

* chore: update all the semibold texts color

* chore: update all the hover color

* chore: update setting BG color

* chore: add FlowySvg to get the icon color through current theme

1. Add FlowySvg widget
2. Update all the icons those have hover effect to FlowySvg
3. Recover shader1 for the text color when it is in hovered

* chore: update side bar UI

1. Update AddButton hover style
2. Update MenuAppHeader icon color and its hover style
3. Update NewAppButton(New page) font color
4. Update MenuUser username font color

* chore: update SettingsDialog style in dart mode

    1. Update title and text color
    2. Update the hover color on FlowyTextButton
    3. Update the LanguageSelectorDropdown background color and hover enter color

* chore: update NewAppButton icon in dark mode

* chore: update default icon color

* chore: rename the hover color and update ViewSectionItem hover color from default theme color

* chore: add question bubble background color

* chore: update cover image button color

* chore: remove fixed icon color on _AddCoverButton

* chore: put Dandelion and Lavender color scheme back with basic modification

* fix: delete unused import files and deprecated field

* chore: add comma and put color back

* chore: update AppFlowyPopover background color

* chore: remove the hover color on primary and secondary button

* chore: update shadow color in dark mode

* chore: update SettingsMenuElement hover effect

* chore: update the text color in DropdownMenuItem

frontend/appflowy_flutter/assets/images/home/new_app_dark.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="8" fill="#00BCF0"/>
+<rect x="7.5" y="4" width="1" height="8" rx="0.5" fill="#131720"/>
+<rect x="12" y="7.5" width="1" height="8" rx="0.5" transform="rotate(90 12 7.5)" fill="#131720"/>
+</svg>

frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/board_page.dart

@@ -184,7 +184,7 @@ class _BoardContentState extends State<BoardContent> {
         width: 20,
         child: svgWidget(
           "home/add",
-          color: Theme.of(context).colorScheme.onSurface,
+          color: Theme.of(context).iconTheme.color,
         ),
       ),
       onAddButtonClick: () {
@@ -207,7 +207,7 @@ class _BoardContentState extends State<BoardContent> {
         width: 20,
         child: svgWidget(
           "home/add",
-          color: Theme.of(context).colorScheme.onSurface,
+          color: Theme.of(context).iconTheme.color,
         ),
       ),
       title: FlowyText.medium(

frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/toolbar/board_setting.dart

@@ -113,7 +113,7 @@ class _SettingItem extends StatelessWidget {
         },
         leftIcon: svgWidget(
           action.iconName(),
-          color: Theme.of(context).colorScheme.onSurface,
+          color: Theme.of(context).iconTheme.color,
         ),
       ),
     );

frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_day.dart

@@ -203,7 +203,7 @@ class _NewEventButton extends StatelessWidget {
       iconPadding: EdgeInsets.zero,
       icon: svgWidget(
         "home/add",
-        color: Theme.of(context).colorScheme.onSurface,
+        color: Theme.of(context).iconTheme.color,
       ),
       width: 22,
     );

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/choicechip/choicechip.dart

@@ -43,7 +43,7 @@ class ChoiceChipButton extends StatelessWidget {
         radius: const BorderRadius.all(Radius.circular(14)),
         leftIcon: svgWidget(
           filterInfo.fieldInfo.fieldType.iconName(),
-          color: Theme.of(context).colorScheme.onSurface,
+          color: Theme.of(context).iconTheme.color,
         ),
         rightIcon: _ChoicechipFilterDesc(filterDesc: filterDesc),
         hoverColor: AFThemeExtension.of(context).lightGreyHover,

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/create_filter_list.dart

@@ -162,7 +162,7 @@ class _FilterPropertyCell extends StatelessWidget {
       onTap: () => onTap(fieldInfo),
       leftIcon: svgWidget(
         fieldInfo.fieldType.iconName(),
-        color: Theme.of(context).colorScheme.onSurface,
+        color: Theme.of(context).iconTheme.color,
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/disclosure_button.dart

@@ -34,7 +34,7 @@ class _DisclosureButtonState extends State<DisclosureButton> {
           width: 20,
           icon: svgWidget(
             "editor/details",
-            color: Theme.of(context).colorScheme.onSurface,
+            color: Theme.of(context).iconTheme.color,
           ),
           onPressed: () => controller.show(),
         );

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/filter_menu.dart

@@ -76,7 +76,7 @@ class _AddFilterButtonState extends State<AddFilterButton> {
           hoverColor: AFThemeExtension.of(context).lightGreyHover,
           leftIcon: svgWidget(
             "home/add",
-            color: Theme.of(context).colorScheme.onSurface,
+            color: Theme.of(context).iconTheme.color,
           ),
           onTap: () => popoverController.show(),
         ),

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/footer/grid_footer.dart

@@ -19,7 +19,7 @@ class GridAddRowButton extends StatelessWidget {
       onTap: () => context.read<GridBloc>().add(const GridEvent.createRow()),
       leftIcon: svgWidget(
         "home/add",
-        color: Theme.of(context).colorScheme.onSurface,
+        color: Theme.of(context).iconTheme.color,
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell.dart

@@ -168,7 +168,7 @@ class FieldCellButton extends StatelessWidget {
       onTap: onTap,
       leftIcon: svgWidget(
         field.fieldType.iconName(),
-        color: Theme.of(context).colorScheme.onSurface,
+        color: Theme.of(context).iconTheme.color,
       ),
       radius: BorderRadius.zero,
       text: FlowyText.medium(

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_list.dart

@@ -61,7 +61,7 @@ class FieldTypeCell extends StatelessWidget {
         onTap: () => onSelectField(fieldType),
         leftIcon: svgWidget(
           fieldType.iconName(),
-          color: Theme.of(context).colorScheme.onSurface,
+          color: Theme.of(context).iconTheme.color,
         ),
       ),
     );

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_option_editor.dart

@@ -116,11 +116,11 @@ class _SwitchFieldButton extends StatelessWidget {
       margin: GridSize.typeOptionContentInsets,
       leftIcon: svgWidget(
         bloc.state.field.fieldType.iconName(),
-        color: Theme.of(context).colorScheme.onSurface,
+        color: Theme.of(context).iconTheme.color,
       ),
       rightIcon: svgWidget(
         "grid/more",
-        color: Theme.of(context).colorScheme.onSurface,
+        color: Theme.of(context).iconTheme.color,
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/grid_header.dart

@@ -182,7 +182,7 @@ class CreateFieldButton extends StatelessWidget {
         onTap: () {},
         leftIcon: svgWidget(
           "home/add",
-          color: Theme.of(context).colorScheme.onSurface,
+          color: Theme.of(context).iconTheme.color,
         ),
       ),
       popupBuilder: (BuildContext popover) {

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/date.dart

@@ -153,7 +153,7 @@ class DateFormatButton extends StatelessWidget {
         onHover: onHover,
         rightIcon: svgWidget(
           "grid/more",
-          color: Theme.of(context).colorScheme.onSurface,
+          color: Theme.of(context).iconTheme.color,
         ),
       ),
     );
@@ -184,7 +184,7 @@ class TimeFormatButton extends StatelessWidget {
         onHover: onHover,
         rightIcon: svgWidget(
           "grid/more",
-          color: Theme.of(context).colorScheme.onSurface,
+          color: Theme.of(context).iconTheme.color,
         ),
       ),
     );

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart

@@ -61,7 +61,7 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
                 margin: GridSize.typeOptionContentInsets,
                 rightIcon: svgWidget(
                   "grid/more",
-                  color: Theme.of(context).colorScheme.onSurface,
+                  color: Theme.of(context).iconTheme.color,
                 ),
                 text: Row(
                   children: [

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option.dart

@@ -194,7 +194,7 @@ class _OptionCellState extends State<_OptionCell> {
             padding: const EdgeInsets.symmetric(horizontal: 6.0),
             child: svgWidget(
               "grid/details",
-              color: Theme.of(context).colorScheme.onSurface,
+              color: Theme.of(context).iconTheme.color,
             ),
           ),
         ],
@@ -251,7 +251,7 @@ class _AddOptionButton extends StatelessWidget {
           },
           leftIcon: svgWidget(
             "home/add",
-            color: Theme.of(context).colorScheme.onSurface,
+            color: Theme.of(context).iconTheme.color,
           ),
         ),
       ),

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option_editor.dart

@@ -106,7 +106,7 @@ class _DeleteTag extends StatelessWidget {
         text: FlowyText.medium(LocaleKeys.grid_selectOption_deleteTag.tr()),
         leftIcon: svgWidget(
           "grid/delete",
-          color: Theme.of(context).colorScheme.onSurface,
+          color: Theme.of(context).iconTheme.color,
         ),
         onTap: () {
           context

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/row/action.dart

@@ -67,7 +67,7 @@ class _ActionCell extends StatelessWidget {
         },
         leftIcon: svgWidget(
           action.iconName(),
-          color: Theme.of(context).colorScheme.onSurface,
+          color: Theme.of(context).iconTheme.color,
         ),
       ),
     );

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/create_sort_list.dart

@@ -161,7 +161,7 @@ class _SortPropertyCell extends StatelessWidget {
       onTap: () => onTap(fieldInfo),
       leftIcon: svgWidget(
         fieldInfo.fieldType.iconName(),
-        color: Theme.of(context).colorScheme.onSurface,
+        color: Theme.of(context).iconTheme.color,
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_editor.dart

@@ -125,7 +125,7 @@ class _SortItem extends StatelessWidget {
       hoverColor: AFThemeExtension.of(context).lightGreyHover,
       icon: svgWidget(
         "home/close",
-        color: Theme.of(context).colorScheme.onSurface,
+        color: Theme.of(context).iconTheme.color,
       ),
     );
 
@@ -187,7 +187,7 @@ class _AddSortButtonState extends State<_AddSortButton> {
           onTap: () => _popoverController.show(),
           leftIcon: svgWidget(
             "home/add",
-            color: Theme.of(context).colorScheme.onSurface,
+            color: Theme.of(context).iconTheme.color,
           ),
         ),
       ),
@@ -222,7 +222,7 @@ class _DeleteSortButton extends StatelessWidget {
             },
             leftIcon: svgWidget(
               "editor/delete",
-              color: Theme.of(context).colorScheme.onSurface,
+              color: Theme.of(context).iconTheme.color,
             ),
           ),
         );

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_menu.dart

@@ -61,7 +61,7 @@ class SortChoiceChip extends StatelessWidget {
     final text = LocaleKeys.grid_settings_sort.tr();
     final leftIcon = svgWidget(
       "grid/setting/sort",
-      color: Theme.of(context).colorScheme.onSurface,
+      color: Theme.of(context).iconTheme.color,
     );
 
     return SizedBox(

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_group.dart

@@ -82,7 +82,7 @@ class _GridGroupCell extends StatelessWidget {
         text: FlowyText.medium(fieldInfo.name),
         leftIcon: svgWidget(
           fieldInfo.fieldType.iconName(),
-          color: Theme.of(context).colorScheme.onSurface,
+          color: Theme.of(context).iconTheme.color,
         ),
         rightIcon: rightIcon,
         onTap: () {

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_property.dart

@@ -96,7 +96,7 @@ class _GridPropertyCellState extends State<_GridPropertyCell> {
   Widget build(BuildContext context) {
     final checkmark = svgWidget(
       widget.fieldInfo.visibility ? 'home/show' : 'home/hide',
-      color: Theme.of(context).colorScheme.onSurface,
+      color: Theme.of(context).iconTheme.color,
     );
 
     return SizedBox(
@@ -118,7 +118,7 @@ class _GridPropertyCellState extends State<_GridPropertyCell> {
         text: FlowyText.medium(widget.fieldInfo.name),
         leftIcon: svgWidget(
           widget.fieldInfo.fieldType.iconName(),
-          color: Theme.of(context).colorScheme.onSurface,
+          color: Theme.of(context).iconTheme.color,
         ),
         rightIcon: FlowyIconButton(
           hoverColor: Colors.transparent,

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_setting.dart

@@ -78,7 +78,7 @@ class _SettingItem extends StatelessWidget {
         onTap: () => onAction(action),
         leftIcon: svgWidget(
           action.iconName(),
-          color: Theme.of(context).colorScheme.onSurface,
+          color: Theme.of(context).iconTheme.color,
         ),
       ),
     );

frontend/appflowy_flutter/lib/plugins/database_view/widgets/card/card.dart

@@ -232,7 +232,7 @@ class _CardMoreOption extends StatelessWidget with CardAccessory {
       padding: const EdgeInsets.all(3.0),
       child: svgWidget(
         'grid/details',
-        color: Theme.of(context).colorScheme.onSurface,
+        color: Theme.of(context).iconTheme.color,
       ),
     );
   }
@@ -254,7 +254,7 @@ class _CardEditOption extends StatelessWidget with CardAccessory {
       padding: const EdgeInsets.all(3.0),
       child: svgWidget(
         'editor/edit',
-        color: Theme.of(context).colorScheme.onSurface,
+        color: Theme.of(context).iconTheme.color,
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/accessory/cell_accessory.dart

@@ -7,7 +7,6 @@ import 'package:flowy_infra/size.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 import '../cell_builder.dart';
 
@@ -69,7 +68,6 @@ class _PrimaryCellAccessoryState extends State<PrimaryCellAccessory>
   Widget build(BuildContext context) {
     return Tooltip(
       message: LocaleKeys.tooltip_openAsPage.tr(),
-      textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
       child: svgWidget(
         "grid/expander",
         color: Theme.of(context).colorScheme.primary,

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart

@@ -137,7 +137,7 @@ class _ChecklistOptionCellState extends State<_ChecklistOptionCell> {
       iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2),
       icon: svgWidget(
         "editor/details",
-        color: Theme.of(context).colorScheme.onSurface,
+        color: Theme.of(context).iconTheme.color,
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_editor.dart

@@ -173,13 +173,13 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
             leftChevronPadding: EdgeInsets.zero,
             leftChevronIcon: svgWidget(
               "home/arrow_left",
-              color: Theme.of(context).colorScheme.onSurface,
+              color: Theme.of(context).iconTheme.color,
             ),
             rightChevronPadding: EdgeInsets.zero,
             rightChevronMargin: EdgeInsets.zero,
             rightChevronIcon: svgWidget(
               "home/arrow_right",
-              color: Theme.of(context).colorScheme.onSurface,
+              color: Theme.of(context).iconTheme.color,
             ),
             headerMargin: const EdgeInsets.only(bottom: 8.0),
           ),
@@ -254,7 +254,7 @@ class _IncludeTimeButton extends StatelessWidget {
                 children: [
                   svgWidget(
                     "grid/clock",
-                    color: Theme.of(context).colorScheme.onSurface,
+                    color: Theme.of(context).iconTheme.color,
                   ),
                   const HSpace(4),
                   FlowyText.medium(LocaleKeys.grid_field_includeTime.tr()),
@@ -387,7 +387,7 @@ class _DateTypeOptionButton extends StatelessWidget {
                 margin: GridSize.typeOptionContentInsets,
                 rightIcon: svgWidget(
                   "grid/more",
-                  color: Theme.of(context).colorScheme.onSurface,
+                  color: Theme.of(context).iconTheme.color,
                 ),
               ),
             ),

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart

@@ -116,7 +116,7 @@ class SelectOptionTag extends StatelessWidget {
               hoverColor: Colors.transparent,
               icon: svgWidget(
                 'home/close',
-                color: Theme.of(context).colorScheme.onSurface,
+                color: Theme.of(context).iconTheme.color,
               ),
             ),
         ],

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart

@@ -277,7 +277,7 @@ class _SelectOptionCellState extends State<_SelectOptionCell> {
             iconPadding: const EdgeInsets.symmetric(horizontal: 6.0),
             icon: svgWidget(
               "editor/details",
-              color: Theme.of(context).colorScheme.onSurface,
+              color: Theme.of(context).iconTheme.color,
             ),
           ),
         ],

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/url_cell.dart

@@ -213,7 +213,7 @@ class _EditURLAccessoryState extends State<_EditURLAccessory>
       offset: const Offset(0, 8),
       child: svgWidget(
         "editor/edit",
-        color: Theme.of(context).colorScheme.onSurface,
+        color: Theme.of(context).iconTheme.color,
       ),
       popupBuilder: (BuildContext popoverContext) {
         return URLEditorPopover(
@@ -246,7 +246,7 @@ class _CopyURLAccessoryState extends State<_CopyURLAccessory>
   Widget build(BuildContext context) {
     return svgWidget(
       "editor/copy",
-      color: Theme.of(context).colorScheme.onSurface,
+      color: Theme.of(context).iconTheme.color,
     );
   }
 

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_detail.dart

@@ -103,7 +103,7 @@ class _CloseButton extends StatelessWidget {
       iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2),
       icon: svgWidget(
         "home/close",
-        color: Theme.of(context).colorScheme.onSurface,
+        color: Theme.of(context).iconTheme.color,
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/document/presentation/banner.dart

@@ -34,7 +34,8 @@ class DocumentBanner extends StatelessWidget {
                   contentPadding: EdgeInsets.zero,
                   bgColor: Colors.transparent,
                   hoverColor: Theme.of(context).colorScheme.primary,
-                  downColor: Theme.of(context).colorScheme.primaryContainer,
+                  highlightColor:
+                      Theme.of(context).colorScheme.primaryContainer,
                   outlineColor: Colors.white,
                   borderRadius: Corners.s8Border,
                   onPressed: onRestore,
@@ -50,7 +51,7 @@ class DocumentBanner extends StatelessWidget {
                   contentPadding: EdgeInsets.zero,
                   bgColor: Colors.transparent,
                   hoverColor: Theme.of(context).colorScheme.primaryContainer,
-                  downColor: Theme.of(context).colorScheme.primary,
+                  highlightColor: Theme.of(context).colorScheme.primary,
                   outlineColor: Colors.white,
                   borderRadius: Corners.s8Border,
                   onPressed: onDelete,

frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_switcher.dart

@@ -32,6 +32,7 @@ class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
           FlowyText.semibold(
             LocaleKeys.moreAction_fontSize.tr(),
             fontSize: 12,
+            color: Theme.of(context).colorScheme.tertiary,
           ),
           const SizedBox(
             height: 5,
@@ -43,9 +44,8 @@ class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
               _updateSelectedFontSize(_fontSizes[index].item2);
             },
             borderRadius: const BorderRadius.all(Radius.circular(5)),
-            selectedBorderColor: Theme.of(context).colorScheme.primaryContainer,
-            selectedColor: Theme.of(context).colorScheme.onSurface,
-            fillColor: Theme.of(context).colorScheme.primaryContainer,
+            selectedColor: Theme.of(context).colorScheme.tertiary,
+            fillColor: Theme.of(context).colorScheme.primary,
             color: Theme.of(context).hintColor,
             constraints: const BoxConstraints(
               minHeight: 40.0,

frontend/appflowy_flutter/lib/plugins/document/presentation/more/more_button.dart

@@ -28,7 +28,7 @@ class DocumentMoreButton extends StatelessWidget {
       child: svgWidget(
         'editor/details',
         size: const Size(18, 18),
-        color: Theme.of(context).colorScheme.onSurface,
+        color: Theme.of(context).iconTheme.color,
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/base/built_in_page_widget.dart

@@ -119,7 +119,7 @@ class _BuiltInPageWidgetState extends State<BuiltInPageWidget> {
             iconPadding: const EdgeInsets.all(3),
             icon: svgWidget(
               'common/information',
-              color: Theme.of(context).colorScheme.onSurface,
+              color: Theme.of(context).iconTheme.color,
             ),
           ),
           // Name
@@ -143,7 +143,7 @@ class _BuiltInPageWidgetState extends State<BuiltInPageWidget> {
                 iconPadding: const EdgeInsets.all(3),
                 icon: svgWidget(
                   'common/settings',
-                  color: Theme.of(context).colorScheme.onSurface,
+                  color: Theme.of(context).iconTheme.color,
                 ),
                 onPressed: () => controller.show(),
               );

frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/base/link_to_page_widget.dart

@@ -149,7 +149,7 @@ class _LinkToPageMenuState extends State<LinkToPageMenu> {
                     FlowyButton(
                       leftIcon: svgWidget(
                         _iconName(value),
-                        color: Theme.of(context).colorScheme.onSurface,
+                        color: Theme.of(context).iconTheme.color,
                       ),
                       text: FlowyText.regular(value.name),
                       onTap: () => widget.onSelected(app.value1, value),

frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/change_cover_popover.dart

@@ -104,15 +104,24 @@ class _ChangeCoverPopoverState extends State<ChangeCoverPopover> {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        FlowyText.semibold(LocaleKeys.document_plugins_cover_colors.tr()),
+        FlowyText.semibold(
+          LocaleKeys.document_plugins_cover_colors.tr(),
+          color: Theme.of(context).colorScheme.tertiary,
+        ),
         const SizedBox(height: 10),
         _buildColorPickerList(),
         const SizedBox(height: 10),
-        FlowyText.semibold(LocaleKeys.document_plugins_cover_images.tr()),
+        FlowyText.semibold(
+          LocaleKeys.document_plugins_cover_images.tr(),
+          color: Theme.of(context).colorScheme.tertiary,
+        ),
         const SizedBox(height: 10),
         _buildFileImagePicker(),
         const SizedBox(height: 10),
-        FlowyText.semibold(LocaleKeys.document_plugins_cover_abstract.tr()),
+        FlowyText.semibold(
+          LocaleKeys.document_plugins_cover_abstract.tr(),
+          color: Theme.of(context).colorScheme.tertiary,
+        ),
         const SizedBox(height: 10),
         _buildAbstractImagePicker(),
       ],

frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/cover_node_widget.dart

@@ -156,10 +156,7 @@ class _AddCoverButtonState extends State<_AddCoverButton> {
                           leftIconSize: const Size.square(18),
                           onTap: widget.onTap,
                           useIntrinsicWidth: true,
-                          leftIcon: svgWidget(
-                            'editor/image',
-                            color: Theme.of(context).colorScheme.onSurface,
-                          ),
+                          leftIcon: const FlowySvg(name: 'editor/image'),
                           text: FlowyText.regular(
                             LocaleKeys.document_plugins_cover_addCover.tr(),
                           ),
@@ -174,7 +171,7 @@ class _AddCoverButtonState extends State<_AddCoverButton> {
                           useIntrinsicWidth: true,
                           leftIcon: Icon(
                             Icons.emoji_emotions_outlined,
-                            color: Theme.of(context).colorScheme.onSurface,
+                            color: Theme.of(context).iconTheme.color,
                             size: 18,
                           ),
                           text: FlowyText.regular(LocaleKeys
@@ -197,8 +194,7 @@ class _AddCoverButtonState extends State<_AddCoverButton> {
                           child: FlowyButton(
                             leftIconSize: const Size.square(18),
                             useIntrinsicWidth: true,
-                            leftIcon: Icon(Icons.emoji_emotions_outlined,
-                                color: Theme.of(context).colorScheme.onSurface,
+                            leftIcon: const Icon(Icons.emoji_emotions_outlined,
                                 size: 18),
                             text: FlowyText.regular(
                                 LocaleKeys.document_plugins_cover_addIcon.tr()),
@@ -400,7 +396,7 @@ class _CoverImageState extends State<_CoverImage> {
                 popoverController.show();
               },
               hoverColor: Theme.of(context).colorScheme.surface,
-              textColor: Theme.of(context).colorScheme.onSurface,
+              textColor: Theme.of(context).colorScheme.tertiary,
               fillColor: Theme.of(context).colorScheme.surface.withOpacity(0.8),
               width: 120,
               height: 28,
@@ -422,7 +418,7 @@ class _CoverImageState extends State<_CoverImage> {
             width: 28,
             icon: svgWidget(
               'editor/delete',
-              color: Theme.of(context).colorScheme.onSurface,
+              color: Theme.of(context).colorScheme.tertiary,
             ),
             onPressed: () {
               widget.onCoverChanged(CoverSelectionType.initial, null);

frontend/appflowy_flutter/lib/plugins/trash/menu.dart

@@ -45,13 +45,9 @@ class MenuTrash extends StatelessWidget {
   Widget _render(BuildContext context) {
     return Row(
       children: [
-        SizedBox(
-          width: 16,
-          height: 16,
-          child: svgWidget(
-            "home/trash",
-            color: Theme.of(context).colorScheme.onSurface,
-          ),
+        const FlowySvg(
+          size: Size(16, 16),
+          name: 'home/trash',
         ),
         const HSpace(6),
         FlowyText.medium(LocaleKeys.trash_text.tr()),

frontend/appflowy_flutter/lib/plugins/trash/src/trash_cell.dart

@@ -43,7 +43,7 @@ class TrashCell extends StatelessWidget {
           iconPadding: const EdgeInsets.all(5),
           icon: svgWidget(
             "editor/restore",
-            color: Theme.of(context).colorScheme.onSurface,
+            color: Theme.of(context).iconTheme.color,
           ),
         ),
         const HSpace(20),
@@ -53,7 +53,7 @@ class TrashCell extends StatelessWidget {
           iconPadding: const EdgeInsets.all(5),
           icon: svgWidget(
             "editor/delete",
-            color: Theme.of(context).colorScheme.onSurface,
+            color: Theme.of(context).iconTheme.color,
           ),
         ),
       ],

frontend/appflowy_flutter/lib/plugins/trash/trash_page.dart

@@ -90,6 +90,7 @@ class _TrashPageState extends State<TrashPage> {
           FlowyText.semibold(
             LocaleKeys.trash_text.tr(),
             fontSize: FontSizes.s16,
+            color: Theme.of(context).colorScheme.tertiary,
           ),
           const Spacer(),
           IntrinsicWidth(
@@ -97,7 +98,7 @@ class _TrashPageState extends State<TrashPage> {
               text: FlowyText.medium(LocaleKeys.trash_restoreAll.tr()),
               leftIcon: svgWidget(
                 'editor/restore',
-                color: Theme.of(context).colorScheme.onSurface,
+                color: Theme.of(context).iconTheme.color,
               ),
               onTap: () => context.read<TrashBloc>().add(
                     const TrashEvent.restoreAll(),
@@ -110,7 +111,7 @@ class _TrashPageState extends State<TrashPage> {
               text: FlowyText.medium(LocaleKeys.trash_deleteAll.tr()),
               leftIcon: svgWidget(
                 'editor/delete',
-                color: Theme.of(context).colorScheme.onSurface,
+                color: Theme.of(context).iconTheme.color,
               ),
               onTap: () =>
                   context.read<TrashBloc>().add(const TrashEvent.deleteAll()),

frontend/appflowy_flutter/lib/user/presentation/widgets/background.dart

@@ -49,6 +49,7 @@ class FlowyLogoTitle extends StatelessWidget {
           FlowyText.semibold(
             title,
             fontSize: FontSizes.s24,
+            color: Theme.of(context).colorScheme.tertiary,
           ),
         ],
       ),

frontend/appflowy_flutter/lib/workspace/application/appearance.dart

@@ -212,14 +212,20 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
 
     return ThemeData(
       brightness: brightness,
-      textTheme:
-          _getTextTheme(fontFamily: fontFamily, fontColor: theme.shader1),
+      textTheme: _getTextTheme(fontFamily: fontFamily, fontColor: theme.text),
       textSelectionTheme: TextSelectionThemeData(
         cursorColor: theme.main2,
         selectionHandleColor: theme.main2,
       ),
-      primaryIconTheme: IconThemeData(color: theme.hover),
-      iconTheme: IconThemeData(color: theme.shader1),
+      iconTheme: IconThemeData(color: theme.icon),
+      tooltipTheme: TooltipThemeData(
+        textStyle: _getFontStyle(
+          fontFamily: fontFamily,
+          fontSize: FontSizes.s11,
+          fontWeight: FontWeight.w400,
+          fontColor: theme.surface,
+        ),
+      ),
       scrollbarTheme: ScrollbarThemeData(
         thumbColor: MaterialStateProperty.all(theme.shader3),
         thickness: MaterialStateProperty.resolveWith((states) {
@@ -239,30 +245,38 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
       ),
       materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
       canvasColor: theme.shader6,
-      dividerColor: theme.shader6,
-      hintColor: theme.shader3,
+      dividerColor: theme.divider,
+      hintColor: theme.hint,
+      //action item hover color
+      hoverColor: theme.hoverBG2,
       disabledColor: theme.shader4,
       highlightColor: theme.main1,
       indicatorColor: theme.main1,
       toggleableActiveColor: theme.main1,
+      cardColor: theme.input,
       colorScheme: ColorScheme(
         brightness: brightness,
-        primary: theme.main1,
-        onPrimary: _white,
+        primary: theme.primary,
+        onPrimary: theme.onPrimary,
         primaryContainer: theme.main2,
         onPrimaryContainer: _white,
-        secondary: theme.hover,
+        // page title hover color
+        secondary: theme.hoverBG1,
         onSecondary: theme.shader1,
+        // setting value hover color
         secondaryContainer: theme.selector,
-        onSecondaryContainer: theme.shader1,
+        onSecondaryContainer: theme.topbarBg,
+        tertiary: theme.shader7,
+        tertiaryContainer: theme.questionBubbleBG,
         background: theme.surface,
-        onBackground: theme.shader1,
+        onBackground: theme.text,
         surface: theme.surface,
-        onSurface: theme.shader1,
+        // text&icon color when it is hovered
+        onSurface: theme.hoverFG,
         onError: theme.shader7,
         error: theme.red,
         outline: theme.shader4,
-        surfaceVariant: theme.bg1,
+        surfaceVariant: theme.sidebarBg,
         shadow: theme.shadow,
       ),
       extensions: [
@@ -278,7 +292,7 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
           tint7: theme.tint7,
           tint8: theme.tint8,
           tint9: theme.tint9,
-          greyHover: theme.bg2,
+          greyHover: theme.hoverBG1,
           greySelect: theme.bg3,
           lightGreyHover: theme.shader6,
           toggleOffFill: theme.shader5,

frontend/appflowy_flutter/lib/workspace/application/view/view_ext.dart

@@ -36,7 +36,7 @@ extension ViewExtension on ViewPB {
   Widget renderThumbnail({Color? iconColor}) {
     String thumbnail = "file_icon";
 
-    final Widget widget = svgWidget(thumbnail, color: iconColor);
+    final Widget widget = FlowySvg(name: thumbnail);
     return widget;
   }
 

frontend/appflowy_flutter/lib/workspace/presentation/home/home_stack.dart

@@ -199,7 +199,7 @@ class HomeTopBar extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      color: Theme.of(context).colorScheme.surface,
+      color: Theme.of(context).colorScheme.onSecondaryContainer,
       height: HomeSizes.topBarHeight,
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.center,

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/create_button.dart

@@ -18,9 +18,14 @@ class NewAppButton extends StatelessWidget {
       LocaleKeys.newPageText.tr(),
       fillColor: Colors.transparent,
       hoverColor: Colors.transparent,
-      fontColor: Theme.of(context).colorScheme.onSurfaceVariant,
+      fontColor: Theme.of(context).colorScheme.tertiary,
       onPressed: () async => await _showCreateAppDialog(context),
-      heading: svgWidget("home/new_app", size: const Size(16, 16)),
+      heading: Theme.of(context).brightness == Brightness.light
+          ? svgWidget("home/new_app", size: const Size(16, 16))
+          : svgWidget(
+              "home/new_app_dark",
+              size: const Size(16, 16),
+            ),
       padding: EdgeInsets.symmetric(horizontal: Insets.l, vertical: 20),
     );
 

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/add_button.dart

@@ -6,9 +6,9 @@ import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' show Document;
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra/image.dart';
-import 'package:flowy_infra_ui/style_widget/icon_button.dart';
+import 'package:flowy_infra/theme_extension.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flutter/material.dart';
-import 'package:styled_widget/styled_widget.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
 
@@ -50,13 +50,19 @@ class AddButton extends StatelessWidget {
       actions: actions,
       offset: const Offset(0, 8),
       buildChild: (controller) {
-        return FlowyIconButton(
+        return SizedBox(
           width: 22,
-          onPressed: () => controller.show(),
-          icon: svgWidget(
-            "home/add",
-            color: Theme.of(context).colorScheme.onSurface,
-          ).padding(horizontal: 3, vertical: 3),
+          child: InkWell(
+            onTap: () => controller.show(),
+            child: FlowyHover(
+              style: HoverStyle(
+                hoverColor: AFThemeExtension.of(context).greySelect,
+              ),
+              builder: (context, onHover) => const FlowySvg(
+                name: 'home/add',
+              ),
+            ),
+          ),
         );
       },
       onSelected: (action, controller) {
@@ -83,8 +89,7 @@ class AddButtonActionWrapper extends ActionCell {
   AddButtonActionWrapper({required this.pluginBuilder});
 
   @override
-  Widget? leftIcon(Color iconColor) =>
-      svgWidget(pluginBuilder.menuIcon, color: iconColor);
+  Widget? leftIcon(Color iconColor) => FlowySvg(name: pluginBuilder.menuIcon);
 
   @override
   String get name => pluginBuilder.menuName;
@@ -100,9 +105,8 @@ class ImportActionWrapper extends ActionCell {
   });
 
   @override
-  Widget? leftIcon(Color iconColor) => svgWidget(
-        'editor/import',
-        color: iconColor,
+  Widget? leftIcon(Color iconColor) => const FlowySvg(
+        name: 'editor/import',
       );
 
   @override

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/header.dart

@@ -5,7 +5,6 @@ import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:expandable/expandable.dart';
-import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra/icon_data.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/app.pb.dart';
@@ -15,7 +14,6 @@ import 'package:appflowy/workspace/application/app/app_bloc.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:flowy_infra/image.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 import '../menu_app.dart';
 import 'add_button.dart';
@@ -58,7 +56,7 @@ class MenuAppHeader extends StatelessWidget {
           theme: ExpandableThemeData(
             expandIcon: FlowyIconData.drop_down_show,
             collapseIcon: FlowyIconData.drop_down_hide,
-            iconColor: Theme.of(context).colorScheme.onSurface,
+            iconColor: Theme.of(context).colorScheme.tertiary,
             iconSize: MenuAppSizes.iconSize,
             iconPadding: const EdgeInsets.fromLTRB(0, 0, 10, 0),
             hasIcon: false,
@@ -104,7 +102,6 @@ class MenuAppHeader extends StatelessWidget {
   Widget _renderCreateViewButton(BuildContext context) {
     return Tooltip(
       message: LocaleKeys.menuAppHeader_addPageTooltip.tr(),
-      textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
       child: AddButton(
         onSelected: (pluginBuilder, document) {
           context.read<AppBloc>().add(
@@ -139,9 +136,9 @@ extension AppDisclosureExtension on AppDisclosureAction {
   Widget icon(Color iconColor) {
     switch (this) {
       case AppDisclosureAction.rename:
-        return svgWidget('editor/edit', color: iconColor);
+        return const FlowySvg(name: 'editor/edit');
       case AppDisclosureAction.delete:
-        return svgWidget('editor/delete', color: iconColor);
+        return const FlowySvg(name: 'editor/delete');
     }
   }
 }
@@ -174,6 +171,7 @@ class AppActionList extends StatelessWidget {
             builder: (context, app) => FlowyText.medium(
               app.name,
               overflow: TextOverflow.ellipsis,
+              color: Theme.of(context).colorScheme.tertiary,
             ),
           ),
         );

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/import/import_panel.dart

@@ -24,6 +24,7 @@ Future<void> showImportPanel(
         title: FlowyText.semibold(
           LocaleKeys.moreAction_import.tr(),
           fontSize: 20,
+          color: Theme.of(context).colorScheme.tertiary,
         ),
         content: _ImportPanel(importCallback: callback),
         contentPadding: const EdgeInsets.symmetric(

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/section/item.dart

@@ -4,7 +4,6 @@ import 'package:appflowy/workspace/application/view/view_ext.dart';
 import 'package:appflowy/workspace/presentation/home/menu/menu.dart';
 import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
@@ -51,7 +50,7 @@ class ViewSectionItem extends StatelessWidget {
               onTap: () => onSelected(blocContext.read<ViewBloc>().state.view),
               child: FlowyHover(
                 style: HoverStyle(
-                  hoverColor: AFThemeExtension.of(context).greySelect,
+                  hoverColor: Theme.of(context).colorScheme.secondary,
                 ),
                 // If current state.isEditing is true, the hover should not
                 // rebuild when onEnter/onExit events happened.
@@ -60,7 +59,6 @@ class ViewSectionItem extends StatelessWidget {
                   blocContext,
                   onHover,
                   state,
-                  Theme.of(context).colorScheme.onSurface,
                 ),
                 isSelected: () => state.isEditing || isSelected,
               ),
@@ -75,13 +73,12 @@ class ViewSectionItem extends StatelessWidget {
     BuildContext blocContext,
     bool onHover,
     ViewState state,
-    Color iconColor,
   ) {
     List<Widget> children = [
       SizedBox(
         width: 16,
         height: 16,
-        child: state.view.renderThumbnail(iconColor: iconColor),
+        child: state.view.renderThumbnail(),
       ),
       const HSpace(2),
       Expanded(
@@ -154,11 +151,11 @@ extension ViewDisclosureExtension on ViewDisclosureAction {
   Widget icon(Color iconColor) {
     switch (this) {
       case ViewDisclosureAction.rename:
-        return svgWidget('editor/edit', color: iconColor);
+        return const FlowySvg(name: 'editor/edit');
       case ViewDisclosureAction.delete:
-        return svgWidget('editor/delete', color: iconColor);
+        return const FlowySvg(name: 'editor/delete');
       case ViewDisclosureAction.duplicate:
-        return svgWidget('editor/copy', color: iconColor);
+        return const FlowySvg(name: 'editor/copy');
     }
   }
 }
@@ -186,7 +183,7 @@ class ViewDisclosureButton extends StatelessWidget {
           width: 26,
           icon: svgWidget(
             "editor/details",
-            color: Theme.of(context).colorScheme.onSurface,
+            color: Theme.of(context).iconTheme.color,
           ),
           onPressed: () {
             onEdit(true);

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/menu.dart

@@ -229,7 +229,7 @@ class MenuTopBar extends StatelessWidget {
                     iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4),
                     icon: svgWidget(
                       "home/hide_menu",
-                      color: Theme.of(context).colorScheme.onSurface,
+                      color: Theme.of(context).iconTheme.color,
                     ),
                   ),
                 )

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/menu_user.dart

@@ -2,7 +2,6 @@ import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/application/menu/menu_user_bloc.dart';
 import 'package:appflowy/workspace/presentation/settings/settings_dialog.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/settings_user_view.dart';
-import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -13,7 +12,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class MenuUser extends StatelessWidget {
   final UserProfilePB user;
@@ -69,6 +67,7 @@ class MenuUser extends StatelessWidget {
     return FlowyText.medium(
       name,
       overflow: TextOverflow.ellipsis,
+      color: Theme.of(context).colorScheme.tertiary,
     );
   }
 
@@ -76,7 +75,6 @@ class MenuUser extends StatelessWidget {
     final userProfile = context.read<MenuUserBloc>().state.userProfile;
     return Tooltip(
       message: LocaleKeys.settings_menu_open.tr(),
-      textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
       child: IconButton(
         onPressed: () {
           showDialog(
@@ -90,7 +88,7 @@ class MenuUser extends StatelessWidget {
           dimension: 20,
           child: svgWidget(
             "home/settings",
-            color: Theme.of(context).colorScheme.onSurface,
+            color: Theme.of(context).colorScheme.tertiary,
           ),
         ),
       ),

frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart

@@ -6,14 +6,12 @@ import 'package:appflowy/workspace/presentation/home/home_stack.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/size.dart';
-import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 typedef NaviAction = void Function();
 
@@ -87,7 +85,7 @@ class FlowyNavigation extends StatelessWidget {
                   iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2),
                   icon: svgWidget(
                     "home/hide_menu",
-                    color: Theme.of(context).colorScheme.onSurface,
+                    color: Theme.of(context).iconTheme.color,
                   ),
                 )),
           );
@@ -180,11 +178,9 @@ TextSpan sidebarTooltipTextSpan(BuildContext context, String hintText) =>
       children: [
         TextSpan(
           text: "$hintText\n",
-          style: AFThemeExtension.of(context).callout.textColor(Colors.white),
         ),
         TextSpan(
           text: Platform.isMacOS ? "⌘+\\" : "Ctrl+\\",
-          style: AFThemeExtension.of(context).caption.textColor(Colors.white60),
         ),
       ],
     );

frontend/appflowy_flutter/lib/workspace/presentation/settings/settings_dialog.dart

@@ -32,6 +32,7 @@ class SettingsDialog extends StatelessWidget {
               LocaleKeys.settings_title.tr(),
               fontSize: 20,
               fontWeight: FontWeight.w700,
+              color: Theme.of(context).colorScheme.tertiary,
             ),
           ),
           child: ScaffoldMessenger(
@@ -54,7 +55,9 @@ class SettingsDialog extends StatelessWidget {
                             context.read<SettingsDialogBloc>().state.page,
                       ),
                     ),
-                    const VerticalDivider(),
+                    VerticalDivider(
+                      color: Theme.of(context).dividerColor,
+                    ),
                     const SizedBox(width: 10),
                     Expanded(
                       child: getSettingsView(

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart

@@ -50,8 +50,8 @@ class ThemeSetting extends StatelessWidget {
           direction: PopoverDirection.bottomWithRightAligned,
           child: FlowyTextButton(
             currentTheme,
+            fontColor: Theme.of(context).colorScheme.onBackground,
             fillColor: Colors.transparent,
-            hoverColor: Theme.of(context).colorScheme.secondary,
             onPressed: () {},
           ),
           popupBuilder: (BuildContext context) {
@@ -107,8 +107,8 @@ class ThemeModeSetting extends StatelessWidget {
           direction: PopoverDirection.bottomWithRightAligned,
           child: FlowyTextButton(
             _themeModeLabelText(currentThemeMode),
+            fontColor: Theme.of(context).colorScheme.onBackground,
             fillColor: Colors.transparent,
-            hoverColor: Theme.of(context).colorScheme.secondary,
             onPressed: () {},
           ),
           popupBuilder: (BuildContext context) {

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_language_view.dart

@@ -47,7 +47,7 @@ class _LanguageSelectorDropdownState extends State<LanguageSelectorDropdown> {
 
   void hoverEnterLanguage() {
     setState(() {
-      currHoverColor = Theme.of(context).colorScheme.primary;
+      currHoverColor = Theme.of(context).colorScheme.secondaryContainer;
     });
   }
 
@@ -67,6 +67,7 @@ class _LanguageSelectorDropdownState extends State<LanguageSelectorDropdown> {
             padding: const EdgeInsets.symmetric(horizontal: 6),
             child: DropdownButton<Locale>(
               value: context.locale,
+              dropdownColor: Theme.of(context).cardColor,
               onChanged: (locale) {
                 context
                     .read<AppearanceSettingsCubit>()
@@ -80,7 +81,10 @@ class _LanguageSelectorDropdownState extends State<LanguageSelectorDropdown> {
                   value: locale,
                   child: Padding(
                     padding: const EdgeInsets.all(12.0),
-                    child: FlowyText.medium(languageFromLocale(locale)),
+                    child: FlowyText.medium(
+                      languageFromLocale(locale),
+                      color: Theme.of(context).colorScheme.tertiary,
+                    ),
                   ),
                 );
               }).toList(),

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu_element.dart

@@ -1,5 +1,6 @@
 import 'package:appflowy/workspace/application/settings/settings_dialog_bloc.dart';
 import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 
@@ -21,29 +22,32 @@ class SettingsMenuElement extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ListTile(
-      leading: Icon(
-        icon,
-        size: 16,
-        color: page == selectedPage
-            ? Theme.of(context).colorScheme.onSurface
-            : Theme.of(context).colorScheme.onSurface,
+    return FlowyHover(
+      style: HoverStyle(
+        hoverColor: Theme.of(context).colorScheme.primary,
       ),
-      onTap: () {
-        changeSelectedPage(page);
-      },
-      selected: page == selectedPage,
-      selectedColor: Theme.of(context).colorScheme.onSurface,
-      selectedTileColor: Theme.of(context).colorScheme.primaryContainer,
-      hoverColor: Theme.of(context).colorScheme.primary,
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(5),
-      ),
-      minLeadingWidth: 0,
-      title: FlowyText.semibold(
-        label,
-        fontSize: FontSizes.s14,
-        overflow: TextOverflow.ellipsis,
+      child: ListTile(
+        leading: Icon(icon,
+            size: 16,
+            color: page == selectedPage
+                ? Theme.of(context).colorScheme.onSurface
+                : null),
+        onTap: () {
+          changeSelectedPage(page);
+        },
+        selected: page == selectedPage,
+        selectedColor: Theme.of(context).colorScheme.onSurface,
+        selectedTileColor: Theme.of(context).colorScheme.primary,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(5),
+        ),
+        minLeadingWidth: 0,
+        title: FlowyText.semibold(label,
+            fontSize: FontSizes.s14,
+            overflow: TextOverflow.ellipsis,
+            color: page == selectedPage
+                ? Theme.of(context).colorScheme.onSurface
+                : null),
       ),
     );
   }

frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart

@@ -48,6 +48,9 @@ class BubbleActionList extends StatelessWidget {
           '?',
           tooltip: LocaleKeys.questionBubble_help.tr(),
           fontWeight: FontWeight.w600,
+          fontColor: Theme.of(context).colorScheme.tertiary,
+          fillColor: Theme.of(context).colorScheme.tertiaryContainer,
+          hoverColor: Theme.of(context).colorScheme.tertiaryContainer,
           mainAxisAlignment: MainAxisAlignment.center,
           radius: Corners.s10Border,
           onPressed: () => controller.show(),

frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/colorscheme.dart

@@ -56,6 +56,22 @@ abstract class FlowyColorScheme {
   final Color main1;
   final Color main2;
   final Color shadow;
+  final Color sidebarBg;
+  final Color divider;
+  final Color topbarBg;
+  final Color icon;
+  final Color text;
+  final Color input;
+  final Color hint;
+  final Color primary;
+  final Color onPrimary;
+  //page title hover effect
+  final Color hoverBG1;
+  //action item hover effect
+  final Color hoverBG2;
+  //the text color when it is hovered
+  final Color hoverFG;
+  final Color questionBubbleBG;
 
   const FlowyColorScheme({
     required this.surface,
@@ -87,6 +103,19 @@ abstract class FlowyColorScheme {
     required this.main1,
     required this.main2,
     required this.shadow,
+    required this.sidebarBg,
+    required this.divider,
+    required this.topbarBg,
+    required this.icon,
+    required this.text,
+    required this.input,
+    required this.hint,
+    required this.primary,
+    required this.onPrimary,
+    required this.hoverBG1,
+    required this.hoverBG2,
+    required this.hoverFG,
+    required this.questionBubbleBG,
   });
 
   factory FlowyColorScheme.builtIn(String themeName, Brightness brightness) {

frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart

@@ -4,6 +4,21 @@ import 'colorscheme.dart';
 
 const _black = Color(0xff000000);
 const _white = Color(0xFFFFFFFF);
+const _lightHover = Color(0xFFe0f8ff);
+const _lightSelector = Color(0xfff2fcff);
+const _lightBg1 = Color(0xFFFFD13E);
+const _lightBg2 = Color(0xffedeef2);
+const _lightShader1 = Color(0xff333333);
+const _lightShader3 = Color(0xff828282);
+const _lightShader6 = Color(0xfff2f2f2);
+const _lightMain1 = Color(0xffe21f74);
+
+const _darkShader1 = Color(0xff131720);
+const _darkShader2 = Color(0xff1A202C);
+const _darkShader3 = Color(0xff363D49);
+const _darkShader5 = Color(0xffBBC3CD);
+const _darkShader6 = Color(0xffF2F2F2);
+const _darkMain1 = Color(0xffe21f74);
 
 class DandelionColorScheme extends FlowyColorScheme {
   const DandelionColorScheme.light()
@@ -20,8 +35,8 @@ class DandelionColorScheme extends FlowyColorScheme {
           shader4: const Color(0xffbdbdbd),
           shader5: const Color(0xffe0e0e0),
           shader6: const Color(0xfff2f2f2),
-          shader7: const Color(0xffffffff),
-          bg1: const Color(0xFFFFD13E),
+          shader7: _black,
+          bg1: _lightBg1,
           bg2: const Color(0xffedeef2),
           bg3: const Color(0xffe2e4eb),
           bg4: const Color(0xff2c144b),
@@ -34,9 +49,22 @@ class DandelionColorScheme extends FlowyColorScheme {
           tint7: const Color(0xffddffd6),
           tint8: const Color(0xffdefff1),
           tint9: const Color(0xffe1fbff),
-          main1: const Color(0xffe21f74),
+          main1: _lightMain1,
           main2: const Color.fromARGB(255, 224, 25, 111),
           shadow: _black,
+          sidebarBg: _lightBg1,
+          divider: _lightShader6,
+          topbarBg: _white,
+          icon: _lightShader1,
+          text: _lightShader1,
+          input: _white,
+          hint: _lightShader3,
+          primary: _lightMain1,
+          onPrimary: _white,
+          hoverBG1: _lightBg2,
+          hoverBG2: _lightHover,
+          hoverFG: _lightShader1,
+          questionBubbleBG: _lightSelector,
         );
 
   const DandelionColorScheme.dark()
@@ -48,12 +76,12 @@ class DandelionColorScheme extends FlowyColorScheme {
           yellow: const Color(0xffffd667),
           green: const Color(0xff66cf80),
           shader1: _white,
-          shader2: const Color(0xffffffff),
+          shader2: _darkShader2,
           shader3: const Color(0xff828282),
           shader4: const Color(0xffbdbdbd),
-          shader5: _white,
-          shader6: _black,
-          shader7: _black,
+          shader5: _darkShader5,
+          shader6: _darkShader6,
+          shader7: _white,
           bg1: const Color(0xFFD5A200),
           bg2: _black,
           bg3: const Color(0xff4f4f4f),
@@ -67,8 +95,21 @@ class DandelionColorScheme extends FlowyColorScheme {
           tint7: const Color(0xffbcffad),
           tint8: const Color(0xffadffe2),
           tint9: const Color(0xffade4ff),
-          main1: const Color(0xffe21f74),
+          main1: _darkMain1,
           main2: const Color.fromARGB(255, 224, 25, 111),
           shadow: _black,
+          sidebarBg: const Color(0xff232B38),
+          divider: _darkShader3,
+          topbarBg: _darkShader1,
+          icon: _darkShader5,
+          text: _darkShader5,
+          input: const Color(0xff282E3A),
+          hint: _darkShader5,
+          primary: _darkMain1,
+          onPrimary: _darkShader1,
+          hoverBG1: _darkMain1,
+          hoverBG2: _darkMain1,
+          hoverFG: _darkShader1,
+          questionBubbleBG: _darkShader3,
         );
 }

frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart

@@ -4,25 +4,39 @@ import 'colorscheme.dart';
 
 const _black = Color(0xff000000);
 const _white = Color(0xFFFFFFFF);
+const _lightHover = Color(0xFFe0f8ff);
+const _lightSelector = Color(0xfff2fcff);
+const _lightBg1 = Color(0xfff7f8fc);
+const _lightBg2 = Color(0xffedeef2);
+const _lightShader1 = Color(0xff333333);
+const _lightShader3 = Color(0xff828282);
+const _lightShader6 = Color(0xfff2f2f2);
+const _lightMain1 = Color(0xff00bcf0);
+const _darkShader1 = Color(0xff131720);
+const _darkShader2 = Color(0xff1A202C);
+const _darkShader3 = Color(0xff363D49);
+const _darkShader5 = Color(0xffBBC3CD);
+const _darkShader6 = Color(0xffF2F2F2);
+const _darkMain1 = Color(0xff00BCF0);
 
 class DefaultColorScheme extends FlowyColorScheme {
   const DefaultColorScheme.light()
       : super(
-          surface: Colors.white,
-          hover: const Color(0xFFe0f8ff),
-          selector: const Color(0xfff2fcff),
+          surface: _white,
+          hover: _lightHover,
+          selector: _lightSelector,
           red: const Color(0xfffb006d),
           yellow: const Color(0xffffd667),
           green: const Color(0xff66cf80),
-          shader1: const Color(0xff333333),
+          shader1: _lightShader1,
           shader2: const Color(0xff4f4f4f),
-          shader3: const Color(0xff828282),
+          shader3: _lightShader3,
           shader4: const Color(0xffbdbdbd),
           shader5: const Color(0xffe0e0e0),
-          shader6: const Color(0xfff2f2f2),
-          shader7: const Color(0xffffffff),
-          bg1: const Color(0xfff7f8fc),
-          bg2: const Color(0xffedeef2),
+          shader6: _lightShader6,
+          shader7: _lightShader1,
+          bg1: _lightBg1,
+          bg2: _lightBg2,
           bg3: const Color(0xffe2e4eb),
           bg4: const Color(0xff2c144b),
           tint1: const Color(0xffe8e0ff),
@@ -34,41 +48,67 @@ class DefaultColorScheme extends FlowyColorScheme {
           tint7: const Color(0xffddffd6),
           tint8: const Color(0xffdefff1),
           tint9: const Color(0xffe1fbff),
-          main1: const Color(0xff00bcf0),
+          main1: _lightMain1,
           main2: const Color(0xff00b7ea),
           shadow: _black,
+          sidebarBg: _lightBg1,
+          divider: _lightShader6,
+          topbarBg: _white,
+          icon: _lightShader1,
+          text: _lightShader1,
+          input: _white,
+          hint: _lightShader3,
+          primary: _lightMain1,
+          onPrimary: _white,
+          hoverBG1: _lightBg2,
+          hoverBG2: _lightHover,
+          hoverFG: _lightShader1,
+          questionBubbleBG: _lightSelector,
         );
 
   const DefaultColorScheme.dark()
       : super(
-          surface: const Color(0xff292929),
-          hover: const Color(0xff1f1f1f),
-          selector: const Color(0xff333333),
+          surface: _darkShader2,
+          hover: _darkMain1,
+          selector: _darkShader2,
           red: const Color(0xfffb006d),
-          yellow: const Color(0xffffd667),
-          green: const Color(0xff66cf80),
-          shader1: _white,
-          shader2: const Color(0xffffffff),
-          shader3: const Color(0xff828282),
-          shader4: const Color(0xffbdbdbd),
-          shader5: _white,
-          shader6: _black,
-          shader7: _black,
-          bg1: _black,
-          bg2: _black,
-          bg3: const Color(0xff4f4f4f),
-          bg4: const Color(0xff2c144b),
-          tint1: const Color(0xffc3adff),
-          tint2: const Color(0xffffadf9),
-          tint3: const Color(0xffffadad),
-          tint4: const Color(0xffffcfad),
-          tint5: const Color(0xfffffead),
-          tint6: const Color(0xffe6ffa3),
-          tint7: const Color(0xffbcffad),
-          tint8: const Color(0xffadffe2),
-          tint9: const Color(0xffade4ff),
-          main1: const Color(0xff00bcf0),
-          main2: const Color(0xff009cc7),
-          shadow: _black,
+          yellow: const Color(0xffF7CF46),
+          green: const Color(0xff66CF80),
+          shader1: _darkShader1,
+          shader2: _darkShader2,
+          shader3: _darkShader3,
+          shader4: const Color(0xff7C8CA5),
+          shader5: _darkShader5,
+          shader6: _darkShader6,
+          shader7: _white,
+          bg1: const Color(0xffF7F8FC),
+          bg2: const Color(0xffEDEEF2),
+          bg3: _darkMain1,
+          bg4: const Color(0xff2C144B),
+          tint1: const Color(0xff8738F5),
+          tint2: const Color(0xffE6336E),
+          tint3: const Color(0xffFF2D9E),
+          tint4: const Color(0xffE9973E),
+          tint5: const Color(0xffFBF000),
+          tint6: const Color(0xffC0F000),
+          tint7: const Color(0xff15F74E),
+          tint8: const Color(0xff00F0E2),
+          tint9: const Color(0xff00BCF0),
+          main1: _darkMain1,
+          main2: const Color(0xff00B7EA),
+          shadow: const Color(0xff0F131C),
+          sidebarBg: const Color(0xff232B38),
+          divider: _darkShader3,
+          topbarBg: _darkShader1,
+          icon: _darkShader5,
+          text: _darkShader5,
+          input: const Color(0xff282E3A),
+          hint: _darkShader5,
+          primary: _darkMain1,
+          onPrimary: _darkShader1,
+          hoverBG1: _darkMain1,
+          hoverBG2: _darkMain1,
+          hoverFG: _darkShader1,
+          questionBubbleBG: _darkShader3,
         );
 }

frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart

@@ -5,6 +5,22 @@ import 'colorscheme.dart';
 const _black = Color(0xff000000);
 const _white = Color(0xFFFFFFFF);
 
+const _lightHover = Color(0xFFe0f8ff);
+const _lightSelector = Color(0xfff2fcff);
+const _lightBg1 = Color(0xfff7f8fc);
+const _lightBg2 = Color(0xffedeef2);
+const _lightShader1 = Color(0xff333333);
+const _lightShader3 = Color(0xff828282);
+const _lightShader6 = Color(0xfff2f2f2);
+const _lightMain1 = Color(0xffA652FB);
+
+const _darkShader1 = Color(0xff131720);
+const _darkShader2 = Color(0xff1A202C);
+const _darkShader3 = Color(0xff363D49);
+const _darkShader5 = Color(0xffBBC3CD);
+const _darkShader6 = Color(0xffF2F2F2);
+const _darkMain1 = Color(0xffA652FB);
+
 class LavenderColorScheme extends FlowyColorScheme {
   const LavenderColorScheme.light()
       : super(
@@ -20,7 +36,7 @@ class LavenderColorScheme extends FlowyColorScheme {
           shader4: const Color(0xffbdbdbd),
           shader5: const Color(0xffe0e0e0),
           shader6: const Color(0xfff2f2f2),
-          shader7: const Color(0xffffffff),
+          shader7: _black,
           bg1: const Color(0xffAC59FF),
           bg2: const Color(0xffedeef2),
           bg3: const Color(0xffe2e4eb),
@@ -34,9 +50,22 @@ class LavenderColorScheme extends FlowyColorScheme {
           tint7: const Color(0xffddffd6),
           tint8: const Color(0xffdefff1),
           tint9: const Color(0xffe1fbff),
-          main1: const Color(0xffA652FB),
+          main1: _lightMain1,
           main2: const Color(0xff9327FF),
           shadow: _black,
+          sidebarBg: _lightBg1,
+          divider: _lightShader6,
+          topbarBg: _white,
+          icon: _lightShader1,
+          text: _lightShader1,
+          input: _white,
+          hint: _lightShader3,
+          primary: _lightMain1,
+          onPrimary: _white,
+          hoverBG1: _lightBg2,
+          hoverBG2: _lightHover,
+          hoverFG: _lightShader1,
+          questionBubbleBG: _lightSelector,
         );
 
   const LavenderColorScheme.dark()
@@ -48,12 +77,12 @@ class LavenderColorScheme extends FlowyColorScheme {
           yellow: const Color(0xffffd667),
           green: const Color(0xff66cf80),
           shader1: _white,
-          shader2: const Color(0xffffffff),
+          shader2: _darkShader2,
           shader3: const Color(0xff828282),
           shader4: const Color(0xffbdbdbd),
           shader5: _white,
-          shader6: _black,
-          shader7: _black,
+          shader6: _darkShader6,
+          shader7: _white,
           bg1: const Color(0xff8C23F6),
           bg2: _black,
           bg3: const Color(0xff4f4f4f),
@@ -67,8 +96,21 @@ class LavenderColorScheme extends FlowyColorScheme {
           tint7: const Color(0xffbcffad),
           tint8: const Color(0xffadffe2),
           tint9: const Color(0xffade4ff),
-          main1: const Color(0xffA652FB),
+          main1: _darkMain1,
           main2: const Color(0xff9327FF),
           shadow: _black,
+          sidebarBg: const Color(0xff232B38),
+          divider: _darkShader3,
+          topbarBg: _darkShader1,
+          icon: _darkShader5,
+          text: _darkShader5,
+          input: const Color(0xff282E3A),
+          hint: _darkShader5,
+          primary: _darkMain1,
+          onPrimary: _darkShader1,
+          hoverBG1: _darkMain1,
+          hoverBG2: _darkMain1,
+          hoverFG: _darkShader1,
+          questionBubbleBG: _darkShader3,
         );
 }

frontend/appflowy_flutter/packages/flowy_infra/lib/image.dart

@@ -1,6 +1,30 @@
-import 'package:flutter/widgets.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 
+import 'package:flutter/material.dart';
+
+/// For icon that needs to change color when it is on hovered
+///
+/// Get the hover color from ThemeData
+class FlowySvg extends StatelessWidget {
+  const FlowySvg({super.key, this.size, required this.name});
+  final String name;
+  final Size? size;
+
+  @override
+  Widget build(BuildContext context) {
+    if (size != null) {
+      return SizedBox.fromSize(
+        size: size,
+        child: SvgPicture.asset('assets/images/$name.svg',
+            color: Theme.of(context).iconTheme.color),
+      );
+    } else {
+      return SvgPicture.asset('assets/images/$name.svg',
+          color: Theme.of(context).iconTheme.color);
+    }
+  }
+}
+
 Widget svgWidget(String name, {Size? size, Color? color}) {
   if (size != null) {
     return SizedBox.fromSize(

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_popover.dart

@@ -81,7 +81,7 @@ class _PopoverContainer extends StatelessWidget {
   Widget build(BuildContext context) {
     final decoration = this.decoration ??
         FlowyDecoration.decoration(
-          Theme.of(context).colorScheme.surface,
+          Theme.of(context).cardColor,
           Theme.of(context).colorScheme.shadow.withOpacity(0.15),
         );
 

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_dialog.dart

@@ -26,6 +26,7 @@ class FlowyDialog extends StatelessWidget {
     final size = windowSize * 0.7;
     return SimpleDialog(
         contentPadding: EdgeInsets.zero,
+        backgroundColor: Theme.of(context).cardColor,
         title: title,
         shape: shape ??
             RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart

@@ -1,11 +1,9 @@
-import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/ignore_parent_gesture.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class FlowyButton extends StatelessWidget {
   final Widget text;
@@ -177,7 +175,8 @@ class FlowyTextButton extends StatelessWidget {
       highlightElevation: 0,
       shape: RoundedRectangleBorder(borderRadius: radius ?? Corners.s6Border),
       fillColor: fillColor ?? Theme.of(context).colorScheme.secondaryContainer,
-      hoverColor: hoverColor ?? Theme.of(context).colorScheme.secondary,
+      hoverColor:
+          hoverColor ?? Theme.of(context).colorScheme.secondaryContainer,
       focusColor: Colors.transparent,
       splashColor: Colors.transparent,
       highlightColor: Colors.transparent,
@@ -195,7 +194,6 @@ class FlowyTextButton extends StatelessWidget {
     if (tooltip != null) {
       child = Tooltip(
         message: tooltip!,
-        textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
         child: child,
       );
     }
@@ -285,7 +283,6 @@ class FlowyRichTextButton extends StatelessWidget {
     if (tooltip != null) {
       child = Tooltip(
         message: tooltip!,
-        textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
         child: child,
       );
     }

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/hover.dart

@@ -137,7 +137,22 @@ class FlowyHoverContainer extends StatelessWidget {
         color: style.hoverColor ?? Theme.of(context).colorScheme.secondary,
         borderRadius: style.borderRadius,
       ),
-      child: child,
+      child:
+          //override text's theme with new color when it is hovered
+          Theme(
+        data: Theme.of(context).copyWith(
+          textTheme: Theme.of(context).textTheme.copyWith(
+                bodyMedium: Theme.of(context)
+                    .textTheme
+                    .bodyMedium
+                    ?.copyWith(color: Theme.of(context).colorScheme.onSurface),
+              ),
+          iconTheme: Theme.of(context)
+              .iconTheme
+              .copyWith(color: Theme.of(context).colorScheme.onSurface),
+        ),
+        child: child!,
+      ),
     );
   }
 }

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart

@@ -9,7 +9,7 @@ class BaseStyledButton extends StatefulWidget {
   final Color? bgColor;
   final Color? focusColor;
   final Color? hoverColor;
-  final Color? downColor;
+  final Color? highlightColor;
   final EdgeInsets? contentPadding;
   final double? minWidth;
   final double? minHeight;
@@ -34,7 +34,7 @@ class BaseStyledButton extends StatefulWidget {
     this.minHeight,
     this.borderRadius,
     this.hoverColor,
-    this.downColor,
+    this.highlightColor,
     this.shape,
     this.useBtnText = true,
     this.autoFocus = false,
@@ -116,10 +116,8 @@ class BaseStyledBtnState extends State<BaseStyledButton> {
         highlightElevation: 0,
         focusElevation: 0,
         fillColor: Colors.transparent,
-        hoverColor:
-            widget.hoverColor ?? Theme.of(context).colorScheme.secondary,
-        highlightColor:
-            widget.downColor ?? Theme.of(context).colorScheme.primary,
+        hoverColor: widget.hoverColor ?? Colors.transparent,
+        highlightColor: widget.highlightColor ?? Colors.transparent,
         focusColor: widget.focusColor ?? Colors.grey.withOpacity(0.35),
         constraints: BoxConstraints(
             minHeight: widget.minHeight ?? 0, minWidth: widget.minWidth ?? 0),

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/primary_button.dart

@@ -42,7 +42,6 @@ class PrimaryButton extends StatelessWidget {
       contentPadding: EdgeInsets.zero,
       bgColor: Theme.of(context).colorScheme.primary,
       hoverColor: Theme.of(context).colorScheme.primaryContainer,
-      downColor: Theme.of(context).colorScheme.primary,
       borderRadius: bigMode ? Corners.s12Border : Corners.s8Border,
       onPressed: onPressed,
       child: child,

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/secondary_button.dart

@@ -42,8 +42,6 @@ class SecondaryButton extends StatelessWidget {
       minHeight: bigMode ? 40 : 38,
       contentPadding: EdgeInsets.zero,
       bgColor: Theme.of(context).colorScheme.surface,
-      hoverColor: Theme.of(context).colorScheme.secondary,
-      downColor: Theme.of(context).colorScheme.primary,
       outlineColor: Theme.of(context).colorScheme.primary,
       borderRadius: bigMode ? Corners.s12Border : Corners.s8Border,
       onPressed: onPressed,