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
2024-08-30 18:12:39 +00:00 · 2023-04-03 23:51:26 -05:00 · 2023-04-03 23:51:26 -05:00 · 994332218e
commit 994332218e
parent e2009c063b
45 changed files with 243 additions and 132 deletions
--- a/frontend/appflowy_flutter/assets/images/home/new_app.svg
+++ b/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>
--- a/frontend/appflowy_flutter/assets/images/home/new_app_dark.svg
+++ b/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>
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/choicechip/choicechip.dart
+++ b/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),
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/condition_button.dart
+++ b/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,
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/create_filter_list.dart
+++ b/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(),
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/disclosure_button.dart
+++ b/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",
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/filter_menu.dart
+++ b/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(
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/footer/grid_footer.dart
+++ b/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,
      ),
    );
  }
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell.dart
+++ b/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(
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell_action_sheet.dart
+++ b/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,
      ),
    );
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_list.dart
+++ b/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(),
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_option_editor.dart
+++ b/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(
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/grid_header.dart
+++ b/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(
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/date.dart
+++ b/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'),
      ),
    );
  }
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option.dart
+++ b/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>()
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option_editor.dart
+++ b/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,
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/row/action.dart
+++ b/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()) {
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/row/row.dart
+++ b/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,
+      ),
    );
  }
 }
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/create_sort_list.dart
+++ b/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(),
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_choice_button.dart
+++ b/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,
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_editor.dart
+++ b/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'),
          ),
        );
      },
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_menu.dart
+++ b/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();
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/filter_button.dart
+++ b/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(
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_property.dart
+++ b/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,
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_setting.dart
+++ b/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(
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/setting_button.dart
+++ b/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,
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/sort_button.dart
+++ b/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(
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart
+++ b/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),
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_progress_bar.dart
+++ b/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),
    );
  }
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_editor.dart
+++ b/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'),
              ),
            ),
          ),
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart
+++ b/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,
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart
+++ b/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)),
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/url_cell.dart
+++ b/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:
--- a/frontend/appflowy_flutter/lib/workspace/application/appearance.dart
+++ b/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,
          ),
        )
      ],
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/create_button.dart
+++ b/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),
    );

--- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
+++ b/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),
                ],
--- a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/dialogs.dart
+++ b/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) ...[
--- a/frontend/appflowy_flutter/packages/appflowy_editor_plugins/lib/src/extensions/theme_extension.dart
+++ b/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;
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/colorscheme.dart
+++ b/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) {
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart
+++ b/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,
        );
 }
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart
+++ b/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,
        );
 }
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart
+++ b/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,
        );
 }
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/theme.dart
+++ b/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 {
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension.dart
+++ b/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,
--- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scroll_bar.dart
+++ b/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 ??