feat: Improve dark mode in grid page (#2160)

* chore: Update the hover effect in  FieldCellButton and CreateFieldButton

* chore(grid): improve grid page UI

1. Update lightGreyHover in AFThemeExtension
2. Comment out dandelion and lavender temporary
3. Add text color in  AFThemeExtension
4. Update NavigatorAlertDialog title color

* chore: update the background color of auth page

* chore: update UI in Select option cell

* chore: update date cell UI

* chore: update checklist UI

* chore: comment out temporary

* chore: update multi select and URL UI

* chore: update scroll bar color

* chore: update sort and filter UI

* chore: rename default theme and put dandelion&lavender theme back

* chore: update new app svg file

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

@@ -1,5 +1,17 @@
-<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="white"/>
-<rect x="12" y="7.5" width="1" height="8" rx="0.5" transform="rotate(90 12 7.5)" fill="white"/>
+<svg
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   fill="none"
+   version="1.1"
+   id="svg808"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+   <defs
+      id="defs812" />
+   <path
+      id="path930"
+      style="fill:#00bcf0;fill-opacity:1"
+      transform="rotate(-90)"
+      d="M 0,7.9238281 A 8,8 0 0 0 -8.0585938,0 8,8 0 0 0 -16,8.0390625 8,8 0 0 0 -7.9804688,16 8,8 0 0 0 0,8 Z M -4,8 c 0,0.2769988 -0.2230012,0.5 -0.5,0.5 h -3 v 3 c 0,0.277 -0.2230012,0.5 -0.5,0.5 -0.2769988,0 -0.5,-0.223 -0.5,-0.5 v -3 h -3 C -11.777,8.5 -12,8.2769988 -12,8 c 0,-0.2769988 0.223,-0.5 0.5,-0.5 h 3 v -3 C -8.5,4.2230012 -8.2769988,4 -8,4 c 0.2769988,0 0.5,0.2230012 0.5,0.5 v 3 h 3 C -4.2230012,7.5 -4,7.7230012 -4,8 Z" />
 </svg>

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

@@ -1,5 +0,0 @@
-<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/grid/presentation/widgets/filter/choicechip/choicechip.dart

@@ -38,7 +38,10 @@ class ChoiceChipButton extends StatelessWidget {
       child: FlowyButton(
         decoration: decoration,
         useIntrinsicWidth: true,
-        text: FlowyText(filterInfo.fieldInfo.name),
+        text: FlowyText(
+          filterInfo.fieldInfo.name,
+          color: AFThemeExtension.of(context).textColor,
+        ),
         margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
         radius: const BorderRadius.all(Radius.circular(14)),
         leftIcon: svgWidget(
@@ -62,7 +65,8 @@ class _ChoicechipFilterDesc extends StatelessWidget {
   Widget build(BuildContext context) {
     final arrow = Transform.rotate(
       angle: -math.pi / 2,
-      child: svgWidget("home/arrow_left"),
+      child: svgWidget("home/arrow_left",
+          color: AFThemeExtension.of(context).textColor),
     );
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 2),

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

@@ -18,14 +18,19 @@ class ConditionButton extends StatelessWidget {
   Widget build(BuildContext context) {
     final arrow = Transform.rotate(
       angle: -math.pi / 2,
-      child: svgWidget("home/arrow_left"),
+      child: svgWidget("home/arrow_left",
+          color: AFThemeExtension.of(context).textColor),
     );
 
     return SizedBox(
       height: 20,
       child: FlowyButton(
         useIntrinsicWidth: true,
-        text: FlowyText(conditionName, fontSize: 10),
+        text: FlowyText(
+          conditionName,
+          fontSize: 10,
+          color: AFThemeExtension.of(context).textColor,
+        ),
         margin: const EdgeInsets.symmetric(horizontal: 4),
         radius: const BorderRadius.all(Radius.circular(2)),
         rightIcon: arrow,

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

@@ -3,6 +3,7 @@ import 'package:appflowy/plugins/database_view/grid/presentation/layout/sizes.da
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/field_type_extension.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -117,19 +118,16 @@ class _FilterTextFieldDelegate extends SliverPersistentHeaderDelegate {
   @override
   Widget build(
       BuildContext context, double shrinkOffset, bool overlapsContent) {
-    return Padding(
+    return Container(
       padding: const EdgeInsets.only(top: 4),
-      child: Container(
-        color: Theme.of(context).colorScheme.background,
-        height: fixHeight,
-        child: FlowyTextField(
-          hintText: LocaleKeys.grid_settings_filterBy.tr(),
-          onChanged: (text) {
-            context
-                .read<GridCreateFilterBloc>()
-                .add(GridCreateFilterEvent.didReceiveFilterText(text));
-          },
-        ),
+      height: fixHeight,
+      child: FlowyTextField(
+        hintText: LocaleKeys.grid_settings_filterBy.tr(),
+        onChanged: (text) {
+          context
+              .read<GridCreateFilterBloc>()
+              .add(GridCreateFilterEvent.didReceiveFilterText(text));
+        },
       ),
     );
   }
@@ -158,7 +156,11 @@ class _FilterPropertyCell extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return FlowyButton(
-      text: FlowyText.medium(fieldInfo.name),
+      hoverColor: AFThemeExtension.of(context).lightGreyHover,
+      text: FlowyText.medium(
+        fieldInfo.name,
+        color: AFThemeExtension.of(context).textColor,
+      ),
       onTap: () => onTap(fieldInfo),
       leftIcon: svgWidget(
         fieldInfo.fieldType.iconName(),

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

@@ -3,6 +3,7 @@ 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:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flutter/material.dart';
 
@@ -31,6 +32,7 @@ class _DisclosureButtonState extends State<DisclosureButton> {
           .toList(),
       buildChild: (controller) {
         return FlowyIconButton(
+          hoverColor: AFThemeExtension.of(context).lightGreyHover,
           width: 20,
           icon: svgWidget(
             "editor/details",

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

@@ -71,7 +71,10 @@ class _AddFilterButtonState extends State<AddFilterButton> {
       SizedBox(
         height: 28,
         child: FlowyButton(
-          text: FlowyText(LocaleKeys.grid_settings_addFilter.tr()),
+          text: FlowyText(
+            LocaleKeys.grid_settings_addFilter.tr(),
+            color: AFThemeExtension.of(context).textColor,
+          ),
           useIntrinsicWidth: true,
           hoverColor: AFThemeExtension.of(context).lightGreyHover,
           leftIcon: svgWidget(

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

@@ -14,12 +14,15 @@ class GridAddRowButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return FlowyButton(
-      text: FlowyText.medium(LocaleKeys.grid_row_newRow.tr()),
+      text: FlowyText.medium(
+        LocaleKeys.grid_row_newRow.tr(),
+        color: Theme.of(context).colorScheme.tertiary,
+      ),
       hoverColor: AFThemeExtension.of(context).lightGreyHover,
       onTap: () => context.read<GridBloc>().add(const GridEvent.createRow()),
       leftIcon: svgWidget(
         "home/add",
-        color: Theme.of(context).iconTheme.color,
+        color: Theme.of(context).colorScheme.tertiary,
       ),
     );
   }

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

@@ -164,11 +164,10 @@ class FieldCellButton extends StatelessWidget {
         .replaceAll(Characters(''), Characters('\u{200B}'))
         .toString();
     return FlowyButton(
-      hoverColor: AFThemeExtension.of(context).lightGreyHover,
+      hoverColor: AFThemeExtension.of(context).greyHover,
       onTap: onTap,
-      leftIcon: svgWidget(
-        field.fieldType.iconName(),
-        color: Theme.of(context).iconTheme.color,
+      leftIcon: FlowySvg(
+        name: field.fieldType.iconName(),
       ),
       radius: BorderRadius.zero,
       text: FlowyText.medium(

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

@@ -5,6 +5,7 @@ import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
@@ -81,8 +82,10 @@ class _EditFieldButton extends StatelessWidget {
         return SizedBox(
           height: GridSize.popoverItemHeight,
           child: FlowyButton(
+            hoverColor: AFThemeExtension.of(context).lightGreyHover,
             text: FlowyText.medium(
               LocaleKeys.grid_field_editProperty.tr(),
+              color: AFThemeExtension.of(context).textColor,
             ),
             onTap: onTap,
           ),
@@ -148,9 +151,12 @@ class FieldActionCell extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return FlowyButton(
+      hoverColor: AFThemeExtension.of(context).lightGreyHover,
       text: FlowyText.medium(
         action.title(),
-        color: enable ? null : Theme.of(context).disabledColor,
+        color: enable
+            ? AFThemeExtension.of(context).textColor
+            : Theme.of(context).disabledColor,
       ),
       onTap: () {
         if (enable) {
@@ -160,7 +166,7 @@ class FieldActionCell extends StatelessWidget {
       leftIcon: svgWidget(
         action.iconName(),
         color: enable
-            ? Theme.of(context).colorScheme.onSurface
+            ? AFThemeExtension.of(context).textColor
             : Theme.of(context).disabledColor,
       ),
     );

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

@@ -1,5 +1,6 @@
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:appflowy_backend/protobuf/flowy-database/field_entities.pb.dart';
 import 'package:flutter/material.dart';
@@ -57,7 +58,11 @@ class FieldTypeCell extends StatelessWidget {
     return SizedBox(
       height: GridSize.popoverItemHeight,
       child: FlowyButton(
-        text: FlowyText.medium(fieldType.title()),
+        hoverColor: AFThemeExtension.of(context).lightGreyHover,
+        text: FlowyText.medium(
+          fieldType.title(),
+          color: AFThemeExtension.of(context).textColor,
+        ),
         onTap: () => onSelectField(fieldType),
         leftIcon: svgWidget(
           fieldType.iconName(),

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

@@ -4,6 +4,7 @@ import 'package:appflowy/plugins/database_view/application/field/type_option/typ
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:dartz/dartz.dart' show Either;
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-database/field_entities.pb.dart';
@@ -110,8 +111,10 @@ class _SwitchFieldButton extends StatelessWidget {
   Widget _buildMoreButton(BuildContext context) {
     final bloc = context.read<FieldTypeOptionEditBloc>();
     return FlowyButton(
+      hoverColor: AFThemeExtension.of(context).lightGreyHover,
       text: FlowyText.medium(
         bloc.state.field.fieldType.title(),
+        color: AFThemeExtension.of(context).textColor,
       ),
       margin: GridSize.typeOptionContentInsets,
       leftIcon: svgWidget(

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

@@ -178,12 +178,9 @@ class CreateFieldButton extends StatelessWidget {
       child: FlowyButton(
         radius: BorderRadius.zero,
         text: FlowyText.medium(LocaleKeys.grid_field_newColumn.tr()),
-        hoverColor: AFThemeExtension.of(context).lightGreyHover,
+        hoverColor: AFThemeExtension.of(context).greyHover,
         onTap: () {},
-        leftIcon: svgWidget(
-          "home/add",
-          color: Theme.of(context).iconTheme.color,
-        ),
+        leftIcon: const FlowySvg(name: 'home/add'),
       ),
       popupBuilder: (BuildContext popover) {
         return FieldEditor(

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

@@ -151,10 +151,7 @@ class DateFormatButton extends StatelessWidget {
         margin: buttonMargins,
         onTap: onTap,
         onHover: onHover,
-        rightIcon: svgWidget(
-          "grid/more",
-          color: Theme.of(context).iconTheme.color,
-        ),
+        rightIcon: const FlowySvg(name: 'grid/more'),
       ),
     );
   }
@@ -182,10 +179,7 @@ class TimeFormatButton extends StatelessWidget {
         margin: buttonMargins,
         onTap: onTap,
         onHover: onHover,
-        rightIcon: svgWidget(
-          "grid/more",
-          color: Theme.of(context).iconTheme.color,
-        ),
+        rightIcon: const FlowySvg(name: 'grid/more'),
       ),
     );
   }

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

@@ -1,6 +1,7 @@
 import 'package:appflowy/plugins/database_view/application/field/type_option/select_option_type_option_bloc.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:appflowy_backend/protobuf/flowy-database/select_type_option.pb.dart';
 import 'package:flutter/material.dart';
@@ -243,7 +244,11 @@ class _AddOptionButton extends StatelessWidget {
       child: SizedBox(
         height: GridSize.popoverItemHeight,
         child: FlowyButton(
-          text: FlowyText.medium(LocaleKeys.grid_field_addSelectOption.tr()),
+          hoverColor: AFThemeExtension.of(context).lightGreyHover,
+          text: FlowyText.medium(
+            LocaleKeys.grid_field_addSelectOption.tr(),
+            color: AFThemeExtension.of(context).textColor,
+          ),
           onTap: () {
             context
                 .read<SelectOptionTypeOptionBloc>()

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

@@ -1,6 +1,7 @@
 import 'package:appflowy/plugins/database_view/application/field/type_option/edit_select_option_bloc.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -103,7 +104,11 @@ class _DeleteTag extends StatelessWidget {
     return SizedBox(
       height: GridSize.popoverItemHeight,
       child: FlowyButton(
-        text: FlowyText.medium(LocaleKeys.grid_selectOption_deleteTag.tr()),
+        hoverColor: AFThemeExtension.of(context).lightGreyHover,
+        text: FlowyText.medium(
+          LocaleKeys.grid_selectOption_deleteTag.tr(),
+          color: AFThemeExtension.of(context).textColor,
+        ),
         leftIcon: svgWidget(
           "grid/delete",
           color: Theme.of(context).iconTheme.color,

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

@@ -3,6 +3,7 @@ import 'package:appflowy/plugins/database_view/grid/application/row/row_action_s
 import 'package:easy_localization/easy_localization.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -56,9 +57,12 @@ class _ActionCell extends StatelessWidget {
     return SizedBox(
       height: GridSize.popoverItemHeight,
       child: FlowyButton(
+        hoverColor: AFThemeExtension.of(context).lightGreyHover,
         text: FlowyText.medium(
           action.title(),
-          color: action.enable() ? null : Theme.of(context).disabledColor,
+          color: action.enable()
+              ? AFThemeExtension.of(context).textColor
+              : Theme.of(context).disabledColor,
         ),
         onTap: () {
           if (action.enable()) {

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

@@ -5,6 +5,7 @@ import 'package:appflowy/plugins/database_view/grid/application/row/row_bloc.dar
 import 'package:appflowy/plugins/database_view/widgets/row/cell_builder.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
@@ -152,11 +153,15 @@ class _InsertButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return FlowyIconButton(
       tooltipText: LocaleKeys.tooltip_addNewRow.tr(),
+      hoverColor: AFThemeExtension.of(context).lightGreyHover,
       width: 20,
       height: 30,
       onPressed: () => context.read<RowBloc>().add(const RowEvent.createRow()),
       iconPadding: const EdgeInsets.all(3),
-      icon: svgWidget("home/add"),
+      icon: svgWidget(
+        'home/add',
+        color: Theme.of(context).colorScheme.tertiary,
+      ),
     );
   }
 }
@@ -182,11 +187,15 @@ class _MenuButtonState extends State<_MenuButton> {
   Widget build(BuildContext context) {
     return FlowyIconButton(
       tooltipText: LocaleKeys.tooltip_openMenu.tr(),
+      hoverColor: AFThemeExtension.of(context).lightGreyHover,
       width: 20,
       height: 30,
       onPressed: () => widget.openMenu(),
       iconPadding: const EdgeInsets.all(3),
-      icon: svgWidget("editor/details"),
+      icon: svgWidget(
+        'editor/details',
+        color: Theme.of(context).colorScheme.tertiary,
+      ),
     );
   }
 }

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

@@ -5,6 +5,7 @@ import 'package:appflowy/plugins/database_view/grid/presentation/layout/sizes.da
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/field_type_extension.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -116,19 +117,16 @@ class _FilterTextFieldDelegate extends SliverPersistentHeaderDelegate {
   @override
   Widget build(
       BuildContext context, double shrinkOffset, bool overlapsContent) {
-    return Padding(
+    return Container(
       padding: const EdgeInsets.only(top: 4),
-      child: Container(
-        color: Theme.of(context).colorScheme.background,
-        height: fixHeight,
-        child: FlowyTextField(
-          hintText: LocaleKeys.grid_settings_sortBy.tr(),
-          onChanged: (text) {
-            context
-                .read<CreateSortBloc>()
-                .add(CreateSortEvent.didReceiveFilterText(text));
-          },
-        ),
+      height: fixHeight,
+      child: FlowyTextField(
+        hintText: LocaleKeys.grid_settings_sortBy.tr(),
+        onChanged: (text) {
+          context
+              .read<CreateSortBloc>()
+              .add(CreateSortEvent.didReceiveFilterText(text));
+        },
       ),
     );
   }
@@ -157,7 +155,11 @@ class _SortPropertyCell extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return FlowyButton(
-      text: FlowyText.medium(fieldInfo.name),
+      hoverColor: AFThemeExtension.of(context).lightGreyHover,
+      text: FlowyText.medium(
+        fieldInfo.name,
+        color: AFThemeExtension.of(context).textColor,
+      ),
       onTap: () => onTap(fieldInfo),
       leftIcon: svgWidget(
         fieldInfo.fieldType.iconName(),

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

@@ -37,7 +37,10 @@ class SortChoiceButton extends StatelessWidget {
     return FlowyButton(
       decoration: decoration,
       useIntrinsicWidth: true,
-      text: FlowyText(text),
+      text: FlowyText(
+        text,
+        color: AFThemeExtension.of(context).textColor,
+      ),
       margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
       radius: BorderRadius.all(radius),
       leftIcon: leftIcon,

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

@@ -182,13 +182,11 @@ class _AddSortButtonState extends State<_AddSortButton> {
       child: SizedBox(
         height: GridSize.popoverItemHeight,
         child: FlowyButton(
+          hoverColor: AFThemeExtension.of(context).greyHover,
           disable: getCreatableSorts(widget.fieldController.fieldInfos).isEmpty,
           text: FlowyText.medium(LocaleKeys.grid_sort_addSort.tr()),
           onTap: () => _popoverController.show(),
-          leftIcon: svgWidget(
-            "home/add",
-            color: Theme.of(context).iconTheme.color,
-          ),
+          leftIcon: const FlowySvg(name: 'home/add'),
         ),
       ),
       popupBuilder: (BuildContext context) {
@@ -220,10 +218,7 @@ class _DeleteSortButton extends StatelessWidget {
                   .read<SortEditorBloc>()
                   .add(const SortEditorEvent.deleteAllSorts());
             },
-            leftIcon: svgWidget(
-              "editor/delete",
-              color: Theme.of(context).iconTheme.color,
-            ),
+            leftIcon: const FlowySvg(name: 'editor/delete'),
           ),
         );
       },

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

@@ -55,7 +55,10 @@ class SortChoiceChip extends StatelessWidget {
   Widget build(BuildContext context) {
     final arrow = Transform.rotate(
       angle: -math.pi / 2,
-      child: svgWidget("home/arrow_left"),
+      child: svgWidget(
+        "home/arrow_left",
+        color: Theme.of(context).iconTheme.color,
+      ),
     );
 
     final text = LocaleKeys.grid_settings_sort.tr();

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

@@ -25,7 +25,7 @@ class _FilterButtonState extends State<FilterButton> {
     return BlocBuilder<GridFilterMenuBloc, GridFilterMenuState>(
       builder: (context, state) {
         final textColor = state.filters.isEmpty
-            ? null
+            ? AFThemeExtension.of(context).textColor
             : Theme.of(context).colorScheme.primary;
 
         return _wrapPopover(

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

@@ -5,6 +5,7 @@ import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -115,7 +116,11 @@ class _GridPropertyCellState extends State<_GridPropertyCell> {
       triggerActions: PopoverTriggerFlags.none,
       margin: EdgeInsets.zero,
       child: FlowyButton(
-        text: FlowyText.medium(widget.fieldInfo.name),
+        hoverColor: AFThemeExtension.of(context).lightGreyHover,
+        text: FlowyText.medium(
+          widget.fieldInfo.name,
+          color: AFThemeExtension.of(context).textColor,
+        ),
         leftIcon: svgWidget(
           widget.fieldInfo.fieldType.iconName(),
           color: Theme.of(context).iconTheme.color,

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

@@ -2,6 +2,7 @@ import 'package:appflowy/plugins/database_view/application/field/field_controlle
 import 'package:appflowy/plugins/database_view/application/setting/setting_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -71,9 +72,12 @@ class _SettingItem extends StatelessWidget {
     return SizedBox(
       height: GridSize.popoverItemHeight,
       child: FlowyButton(
+        hoverColor: AFThemeExtension.of(context).lightGreyHover,
         text: FlowyText.medium(
           action.title(),
-          color: action.enable() ? null : Theme.of(context).disabledColor,
+          color: action.enable()
+              ? AFThemeExtension.of(context).textColor
+              : Theme.of(context).disabledColor,
         ),
         onTap: () => onAction(action),
         leftIcon: svgWidget(

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

@@ -52,6 +52,7 @@ class _SettingButtonState extends State<SettingButton> {
             triggerActions: PopoverTriggerFlags.none,
             child: FlowyTextButton(
               LocaleKeys.settings_title.tr(),
+              fontColor: AFThemeExtension.of(context).textColor,
               fillColor: Colors.transparent,
               hoverColor: AFThemeExtension.of(context).lightGreyHover,
               padding: GridSize.typeOptionContentInsets,

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

@@ -24,7 +24,7 @@ class _SortButtonState extends State<SortButton> {
     return BlocBuilder<SortMenuBloc, SortMenuState>(
       builder: (context, state) {
         final textColor = state.sortInfos.isEmpty
-            ? null
+            ? AFThemeExtension.of(context).textColor
             : Theme.of(context).colorScheme.primary;
 
         return wrapPopover(

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

@@ -1,6 +1,7 @@
 import 'package:appflowy/plugins/database_view/application/cell/cell_controller_builder.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -116,7 +117,11 @@ class _ChecklistOptionCellState extends State<_ChecklistOptionCell> {
           children: [
             Expanded(
               child: FlowyButton(
-                text: FlowyText(widget.option.data.name),
+                hoverColor: AFThemeExtension.of(context).lightGreyHover,
+                text: FlowyText(
+                  widget.option.data.name,
+                  color: AFThemeExtension.of(context).textColor,
+                ),
                 leftIcon: icon,
                 onTap: () => context
                     .read<ChecklistCellEditorBloc>()
@@ -132,6 +137,7 @@ class _ChecklistOptionCellState extends State<_ChecklistOptionCell> {
 
   Widget _disclosureButton() {
     return FlowyIconButton(
+      hoverColor: AFThemeExtension.of(context).lightGreyHover,
       width: 20,
       onPressed: () => _popoverController.show(),
       iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2),

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

@@ -20,7 +20,7 @@ class ChecklistProgressBar extends StatelessWidget {
       percent: percent,
       padding: EdgeInsets.zero,
       progressColor: Theme.of(context).colorScheme.primary,
-      backgroundColor: AFThemeExtension.of(context).tint9,
+      backgroundColor: AFThemeExtension.of(context).progressBarBGcolor,
       barRadius: const Radius.circular(5),
     );
   }

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

@@ -385,10 +385,7 @@ class _DateTypeOptionButton extends StatelessWidget {
               child: FlowyButton(
                 text: FlowyText.medium(title),
                 margin: GridSize.typeOptionContentInsets,
-                rightIcon: svgWidget(
-                  "grid/more",
-                  color: Theme.of(context).iconTheme.color,
-                ),
+                rightIcon: const FlowySvg(name: 'grid/more'),
               ),
             ),
           ),

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

@@ -106,7 +106,11 @@ class SelectOptionTag extends StatelessWidget {
         mainAxisSize: MainAxisSize.min,
         children: [
           Flexible(
-            child: FlowyText.medium(name, overflow: TextOverflow.ellipsis),
+            child: FlowyText.medium(
+              name,
+              overflow: TextOverflow.ellipsis,
+              color: Theme.of(context).colorScheme.onSurface,
+            ),
           ),
           if (onRemove != null)
             FlowyIconButton(
@@ -116,7 +120,7 @@ class SelectOptionTag extends StatelessWidget {
               hoverColor: Colors.transparent,
               icon: svgWidget(
                 'home/close',
-                color: Theme.of(context).iconTheme.color,
+                color: Theme.of(context).colorScheme.onSurface,
               ),
             ),
         ],
@@ -139,6 +143,9 @@ class SelectOptionTagCell extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return FlowyHover(
+      style: HoverStyle(
+        hoverColor: AFThemeExtension.of(context).lightGreyHover,
+      ),
       child: InkWell(
         child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,

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

@@ -210,7 +210,7 @@ class _CreateOptionCell extends StatelessWidget {
                 alignment: Alignment.centerLeft,
                 child: SelectOptionTag(
                   name: name,
-                  color: AFThemeExtension.of(context).lightGreyHover,
+                  color: AFThemeExtension.of(context).greyHover,
                   onSelected: () => context
                       .read<SelectOptionCellEditorBloc>()
                       .add(SelectOptionEditorEvent.newOption(name)),

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

@@ -5,6 +5,7 @@ import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -211,10 +212,8 @@ class _EditURLAccessoryState extends State<_EditURLAccessory>
       controller: _popoverController,
       direction: PopoverDirection.bottomWithLeftAligned,
       offset: const Offset(0, 8),
-      child: svgWidget(
-        "editor/edit",
-        color: Theme.of(context).iconTheme.color,
-      ),
+      child: svgWidget("editor/edit",
+          color: AFThemeExtension.of(context).textColor),
       popupBuilder: (BuildContext popoverContext) {
         return URLEditorPopover(
           cellController:

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

@@ -226,6 +226,7 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
           fontColor: theme.surface,
         ),
       ),
+      scaffoldBackgroundColor: theme.surface,
       scrollbarTheme: ScrollbarThemeData(
         thumbColor: MaterialStateProperty.all(theme.shader3),
         thickness: MaterialStateProperty.resolveWith((states) {
@@ -292,10 +293,12 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
           tint7: theme.tint7,
           tint8: theme.tint8,
           tint9: theme.tint9,
+          textColor: theme.text,
           greyHover: theme.hoverBG1,
           greySelect: theme.bg3,
-          lightGreyHover: theme.shader6,
+          lightGreyHover: theme.hoverBG3,
           toggleOffFill: theme.shader5,
+          progressBarBGcolor: theme.progressBarBGcolor,
           code: _getFontStyle(
             fontFamily: monospaceFontFamily,
             fontColor: theme.shader3,
@@ -309,7 +312,7 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
             fontFamily: fontFamily,
             fontSize: FontSizes.s11,
             fontWeight: FontWeight.w400,
-            fontColor: theme.shader3,
+            fontColor: theme.hint,
           ),
         )
       ],

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

@@ -20,12 +20,15 @@ class NewAppButton extends StatelessWidget {
       hoverColor: Colors.transparent,
       fontColor: Theme.of(context).colorScheme.tertiary,
       onPressed: () async => await _showCreateAppDialog(context),
-      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),
-            ),
+      heading: Container(
+        width: 16,
+        height: 16,
+        decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          color: Theme.of(context).colorScheme.surface,
+        ),
+        child: svgWidget("home/new_app"),
+      ),
       padding: EdgeInsets.symmetric(horizontal: Insets.l, vertical: 20),
     );
 

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

@@ -59,7 +59,7 @@ class ThemeSetting extends StatelessWidget {
               child: Column(
                 mainAxisSize: MainAxisSize.min,
                 children: [
-                  _themeItemButton(context, BuiltInTheme.light),
+                  _themeItemButton(context, BuiltInTheme.defaultTheme),
                   _themeItemButton(context, BuiltInTheme.dandelion),
                   _themeItemButton(context, BuiltInTheme.lavender),
                 ],

frontend/appflowy_flutter/lib/workspace/presentation/widgets/dialogs.dart

@@ -119,7 +119,7 @@ class _CreateFlowyAlertDialog extends State<NavigatorAlertDialog> {
             FlowyText.medium(
               widget.title,
               fontSize: FontSizes.s16,
-              color: Theme.of(context).disabledColor,
+              color: Theme.of(context).colorScheme.tertiary,
             ),
           ],
           if (widget.confirm != null) ...[

frontend/appflowy_flutter/packages/appflowy_editor_plugins/lib/src/extensions/theme_extension.dart

@@ -9,7 +9,7 @@ extension FlowyTintExtension on FlowyTint {
     ThemeMode? themeMode,
     String? theme,
   }) {
-    if (themeMode == ThemeMode.light && theme == BuiltInTheme.light) {
+    if (themeMode == ThemeMode.light && theme == BuiltInTheme.defaultTheme) {
       switch (this) {
         case FlowyTint.tint1:
           return l10n.lightLightTint1;

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

@@ -1,9 +1,9 @@
-import 'package:flowy_infra/colorscheme/lavender.dart';
 import 'package:flutter/material.dart';
 
 import 'package:flowy_infra/theme.dart';
 import 'default_colorscheme.dart';
 import 'dandelion.dart';
+import 'lavender.dart';
 
 /// A map of all the built-in themes.
 ///
@@ -11,7 +11,7 @@ import 'dandelion.dart';
 /// the first is for light mode, and the second is for dark mode.
 
 const Map<String, List<FlowyColorScheme>> themeMap = {
-  BuiltInTheme.light: [
+  BuiltInTheme.defaultTheme: [
     DefaultColorScheme.light(),
     DefaultColorScheme.dark(),
   ],
@@ -69,9 +69,11 @@ abstract class FlowyColorScheme {
   final Color hoverBG1;
   //action item hover effect
   final Color hoverBG2;
+  final Color hoverBG3;
   //the text color when it is hovered
   final Color hoverFG;
   final Color questionBubbleBG;
+  final Color progressBarBGcolor;
 
   const FlowyColorScheme({
     required this.surface,
@@ -114,8 +116,10 @@ abstract class FlowyColorScheme {
     required this.onPrimary,
     required this.hoverBG1,
     required this.hoverBG2,
+    required this.hoverBG3,
     required this.hoverFG,
     required this.questionBubbleBG,
+    required this.progressBarBGcolor,
   });
 
   factory FlowyColorScheme.builtIn(String themeName, Brightness brightness) {

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

@@ -12,6 +12,7 @@ const _lightShader1 = Color(0xff333333);
 const _lightShader3 = Color(0xff828282);
 const _lightShader6 = Color(0xfff2f2f2);
 const _lightMain1 = Color(0xffe21f74);
+const _lightTint9 = Color(0xffe1fbff);
 
 const _darkShader1 = Color(0xff131720);
 const _darkShader2 = Color(0xff1A202C);
@@ -48,7 +49,7 @@ class DandelionColorScheme extends FlowyColorScheme {
           tint6: const Color(0xfff5ffdc),
           tint7: const Color(0xffddffd6),
           tint8: const Color(0xffdefff1),
-          tint9: const Color(0xffe1fbff),
+          tint9: _lightTint9,
           main1: _lightMain1,
           main2: const Color.fromARGB(255, 224, 25, 111),
           shadow: _black,
@@ -63,8 +64,10 @@ class DandelionColorScheme extends FlowyColorScheme {
           onPrimary: _white,
           hoverBG1: _lightBg2,
           hoverBG2: _lightHover,
+          hoverBG3: _lightShader6,
           hoverFG: _lightShader1,
           questionBubbleBG: _lightSelector,
+          progressBarBGcolor: _lightTint9,
         );
 
   const DandelionColorScheme.dark()
@@ -86,15 +89,15 @@ class DandelionColorScheme extends FlowyColorScheme {
           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),
+          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.fromARGB(255, 224, 25, 111),
           shadow: _black,
@@ -109,7 +112,9 @@ class DandelionColorScheme extends FlowyColorScheme {
           onPrimary: _darkShader1,
           hoverBG1: _darkMain1,
           hoverBG2: _darkMain1,
+          hoverBG3: _darkShader3,
           hoverFG: _darkShader1,
           questionBubbleBG: _darkShader3,
+          progressBarBGcolor: _darkShader3,
         );
 }

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

@@ -12,6 +12,7 @@ const _lightShader1 = Color(0xff333333);
 const _lightShader3 = Color(0xff828282);
 const _lightShader6 = Color(0xfff2f2f2);
 const _lightMain1 = Color(0xff00bcf0);
+const _lightTint9 = Color(0xffe1fbff);
 const _darkShader1 = Color(0xff131720);
 const _darkShader2 = Color(0xff1A202C);
 const _darkShader3 = Color(0xff363D49);
@@ -47,7 +48,7 @@ class DefaultColorScheme extends FlowyColorScheme {
           tint6: const Color(0xfff5ffdc),
           tint7: const Color(0xffddffd6),
           tint8: const Color(0xffdefff1),
-          tint9: const Color(0xffe1fbff),
+          tint9: _lightTint9,
           main1: _lightMain1,
           main2: const Color(0xff00b7ea),
           shadow: _black,
@@ -64,6 +65,8 @@ class DefaultColorScheme extends FlowyColorScheme {
           hoverBG2: _lightHover,
           hoverFG: _lightShader1,
           questionBubbleBG: _lightSelector,
+          hoverBG3: _lightShader6,
+          progressBarBGcolor: _lightTint9,
         );
 
   const DefaultColorScheme.dark()
@@ -108,7 +111,9 @@ class DefaultColorScheme extends FlowyColorScheme {
           onPrimary: _darkShader1,
           hoverBG1: _darkMain1,
           hoverBG2: _darkMain1,
+          hoverBG3: _darkShader3,
           hoverFG: _darkShader1,
           questionBubbleBG: _darkShader3,
+          progressBarBGcolor: _darkShader3,
         );
 }

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

@@ -13,6 +13,7 @@ const _lightShader1 = Color(0xff333333);
 const _lightShader3 = Color(0xff828282);
 const _lightShader6 = Color(0xfff2f2f2);
 const _lightMain1 = Color(0xffA652FB);
+const _lightTint9 = Color(0xffe1fbff);
 
 const _darkShader1 = Color(0xff131720);
 const _darkShader2 = Color(0xff1A202C);
@@ -49,7 +50,7 @@ class LavenderColorScheme extends FlowyColorScheme {
           tint6: const Color(0xfff5ffdc),
           tint7: const Color(0xffddffd6),
           tint8: const Color(0xffdefff1),
-          tint9: const Color(0xffe1fbff),
+          tint9: _lightTint9,
           main1: _lightMain1,
           main2: const Color(0xff9327FF),
           shadow: _black,
@@ -64,8 +65,10 @@ class LavenderColorScheme extends FlowyColorScheme {
           onPrimary: _white,
           hoverBG1: _lightBg2,
           hoverBG2: _lightHover,
+          hoverBG3: _lightShader6,
           hoverFG: _lightShader1,
           questionBubbleBG: _lightSelector,
+          progressBarBGcolor: _lightTint9,
         );
 
   const LavenderColorScheme.dark()
@@ -87,15 +90,15 @@ class LavenderColorScheme extends FlowyColorScheme {
           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),
+          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(0xff9327FF),
           shadow: _black,
@@ -110,7 +113,9 @@ class LavenderColorScheme extends FlowyColorScheme {
           onPrimary: _darkShader1,
           hoverBG1: _darkMain1,
           hoverBG2: _darkMain1,
+          hoverBG3: _darkShader3,
           hoverFG: _darkShader1,
           questionBubbleBG: _darkShader3,
+          progressBarBGcolor: _darkShader3,
         );
 }

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

@@ -2,9 +2,9 @@ import 'package:flowy_infra/colorscheme/colorscheme.dart';
 import 'package:flutter/material.dart';
 
 class BuiltInTheme {
-  static const String light = 'light';
-  static const String dandelion = 'dandelion';
-  static const String lavender = 'lavender';
+  static const String defaultTheme = 'Default';
+  static const String dandelion = 'Dandelion';
+  static const String lavender = 'Lavender';
 }
 
 class AppTheme {

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

@@ -15,10 +15,12 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
   final Color tint8;
   final Color tint9;
 
+  final Color textColor;
   final Color greyHover;
   final Color greySelect;
   final Color lightGreyHover;
   final Color toggleOffFill;
+  final Color progressBarBGcolor;
 
   final TextStyle code;
   final TextStyle callout;
@@ -40,9 +42,11 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
     required this.greySelect,
     required this.lightGreyHover,
     required this.toggleOffFill,
+    required this.textColor,
     required this.code,
     required this.callout,
     required this.caption,
+    required this.progressBarBGcolor,
   });
 
   static AFThemeExtension of(BuildContext context) {
@@ -62,10 +66,12 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
     Color? tint7,
     Color? tint8,
     Color? tint9,
+    Color? textColor,
     Color? greyHover,
     Color? greySelect,
     Color? lightGreyHover,
     Color? toggleOffFill,
+    Color? progressBarBGcolor,
     TextStyle? code,
     TextStyle? callout,
     TextStyle? caption,
@@ -82,10 +88,12 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
       tint7: tint7 ?? this.tint7,
       tint8: tint8 ?? this.tint8,
       tint9: tint9 ?? this.tint9,
+      textColor: textColor ?? this.textColor,
       greyHover: greyHover ?? this.greyHover,
       greySelect: greySelect ?? this.greySelect,
       lightGreyHover: lightGreyHover ?? this.lightGreyHover,
       toggleOffFill: toggleOffFill ?? this.toggleOffFill,
+      progressBarBGcolor: progressBarBGcolor ?? this.progressBarBGcolor,
       code: code ?? this.code,
       callout: callout ?? this.callout,
       caption: caption ?? this.caption,
@@ -110,10 +118,13 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
       tint7: Color.lerp(tint7, other.tint7, t)!,
       tint8: Color.lerp(tint8, other.tint8, t)!,
       tint9: Color.lerp(tint9, other.tint9, t)!,
+      textColor: Color.lerp(textColor, other.textColor, t)!,
       greyHover: Color.lerp(greyHover, other.greyHover, t)!,
       greySelect: Color.lerp(greySelect, other.greySelect, t)!,
       lightGreyHover: Color.lerp(lightGreyHover, other.lightGreyHover, t)!,
       toggleOffFill: Color.lerp(toggleOffFill, other.toggleOffFill, t)!,
+      progressBarBGcolor:
+          Color.lerp(progressBarBGcolor, other.progressBarBGcolor, t)!,
       code: other.code,
       callout: other.callout,
       caption: other.caption,

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scroll_bar.dart

@@ -138,7 +138,7 @@ class ScrollbarState extends State<StyledScrollbar> {
         // Handle color
         var handleColor = widget.handleColor ??
             (Theme.of(context).brightness == Brightness.dark
-                ? AFThemeExtension.of(context).greyHover.withOpacity(.2)
+                ? AFThemeExtension.of(context).lightGreyHover
                 : AFThemeExtension.of(context).greyHover);
         // Track color
         var trackColor = widget.trackColor ??