fix: UI issues in dark mode (#2344)

* fix: date cell UI issue #2301

* chore: update font size toggle button hover effect

* chore: update more button background

* chore: update NumberTypeOptionWidge hover style

* chore: improve the hover color in _SelectOptionColorCell

* chore: update User setting UI

* fix: delete unused file

* fix: remove the hover effect when delete button is disable

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

@@ -203,6 +203,7 @@ class _DeleteFieldButton extends StatelessWidget {
       builder: (context, state) {
         final enable = !state.canDelete && !state.isGroupField;
         Widget button = FlowyButton(
+          disable: !enable,
           text: FlowyText.medium(
             LocaleKeys.grid_field_delete.tr(),
             color: enable ? null : Theme.of(context).disabledColor,

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

@@ -1,6 +1,5 @@
 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';
@@ -58,15 +57,12 @@ class FieldTypeCell extends StatelessWidget {
     return SizedBox(
       height: GridSize.popoverItemHeight,
       child: FlowyButton(
-        hoverColor: AFThemeExtension.of(context).lightGreyHover,
         text: FlowyText.medium(
           fieldType.title(),
-          color: AFThemeExtension.of(context).textColor,
         ),
         onTap: () => onSelectField(fieldType),
-        leftIcon: svgWidget(
-          fieldType.iconName(),
-          color: Theme.of(context).iconTheme.color,
+        leftIcon: FlowySvg(
+          name: fieldType.iconName(),
         ),
       ),
     );

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

@@ -4,7 +4,6 @@ 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';
@@ -113,20 +112,12 @@ 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(
-        bloc.state.field.fieldType.iconName(),
-        color: Theme.of(context).iconTheme.color,
-      ),
-      rightIcon: svgWidget(
-        "grid/more",
-        color: Theme.of(context).iconTheme.color,
-      ),
+      leftIcon: FlowySvg(name: bloc.state.field.fieldType.iconName()),
+      rightIcon: const FlowySvg(name: 'grid/more'),
     );
   }
 }

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

@@ -233,7 +233,7 @@ class DateFormatCell extends StatelessWidget {
   Widget build(BuildContext context) {
     Widget? checkmark;
     if (isSelected) {
-      checkmark = svgWidget("grid/checkmark");
+      checkmark = const FlowySvg(name: 'grid/checkmark');
     }
 
     return SizedBox(
@@ -317,7 +317,7 @@ class TimeFormatCell extends StatelessWidget {
   Widget build(BuildContext context) {
     Widget? checkmark;
     if (isSelected) {
-      checkmark = svgWidget("grid/checkmark");
+      checkmark = const FlowySvg(name: 'grid/checkmark');
     }
 
     return SizedBox(

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

@@ -3,7 +3,6 @@ import 'package:appflowy/plugins/database_view/application/field/type_option/num
 import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_context.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/format.pbenum.dart';
 import 'package:flutter/material.dart';
@@ -60,15 +59,10 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
           final selectNumUnitButton = SizedBox(
             height: GridSize.popoverItemHeight,
             child: FlowyButton(
-              hoverColor: AFThemeExtension.of(context).lightGreyHover,
               margin: GridSize.typeOptionContentInsets,
-              rightIcon: svgWidget(
-                "grid/more",
-                color: AFThemeExtension.of(context).textColor,
-              ),
+              rightIcon: const FlowySvg(name: 'grid/more'),
               text: FlowyText.regular(
                 state.typeOption.format.title(),
-                color: AFThemeExtension.of(context).textColor,
               ),
             ),
           );
@@ -79,7 +73,6 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
             alignment: Alignment.centerLeft,
             child: FlowyText.medium(
               LocaleKeys.grid_field_numberFormat.tr(),
-              color: AFThemeExtension.of(context).textColor,
             ),
           );
           return Padding(
@@ -188,7 +181,9 @@ class NumberFormatCell extends StatelessWidget {
   Widget build(BuildContext context) {
     Widget? checkmark;
     if (isSelected) {
-      checkmark = svgWidget("grid/checkmark");
+      checkmark = const FlowySvg(
+        name: 'grid/checkmark',
+      );
     }
 
     return SizedBox(

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

@@ -105,15 +105,10 @@ class _DeleteTag extends StatelessWidget {
     return SizedBox(
       height: GridSize.popoverItemHeight,
       child: FlowyButton(
-        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,
         ),
+        leftIcon: const FlowySvg(name: 'grid/delete'),
         onTap: () {
           context
               .read<EditSelectOptionBloc>()
@@ -226,7 +221,11 @@ class _SelectOptionColorCell extends StatelessWidget {
     return SizedBox(
       height: GridSize.popoverItemHeight,
       child: FlowyButton(
-        text: FlowyText.medium(color.optionName()),
+        hoverColor: AFThemeExtension.of(context).lightGreyHover,
+        text: FlowyText.medium(
+          color.optionName(),
+          color: AFThemeExtension.of(context).textColor,
+        ),
         leftIcon: colorIcon,
         rightIcon: checkmark,
         onTap: () {

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).progressBarBGcolor,
+      backgroundColor: AFThemeExtension.of(context).progressBarBGColor,
       barRadius: const Radius.circular(5),
     );
   }

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

@@ -1,4 +1,5 @@
 import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
@@ -24,6 +25,8 @@ class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
 
   @override
   Widget build(BuildContext context) {
+    final selectedBgColor = AFThemeExtension.of(context).toggleButtonBGColor;
+    final foregroundColor = Theme.of(context).colorScheme.onBackground;
     return BlocBuilder<DocumentAppearanceCubit, DocumentAppearance>(
       builder: (context, state) {
         return Column(
@@ -43,10 +46,16 @@ class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
               onPressed: (int index) {
                 _updateSelectedFontSize(_fontSizes[index].item2);
               },
+              color: foregroundColor,
               borderRadius: const BorderRadius.all(Radius.circular(5)),
-              selectedColor: Theme.of(context).colorScheme.tertiary,
-              fillColor: Theme.of(context).colorScheme.primary,
-              color: Theme.of(context).hintColor,
+              borderColor: foregroundColor,
+              borderWidth: 0.5,
+              // when selected
+              selectedColor: foregroundColor,
+              selectedBorderColor: foregroundColor,
+              fillColor: selectedBgColor,
+              // when hover
+              hoverColor: selectedBgColor.withOpacity(0.3),
               constraints: const BoxConstraints(
                 minHeight: 40.0,
                 minWidth: 80.0,

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

@@ -12,6 +12,7 @@ class DocumentMoreButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return PopupMenuButton<int>(
+      color: Theme.of(context).colorScheme.surfaceVariant,
       offset: const Offset(0, 30),
       itemBuilder: (context) {
         return [

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

@@ -250,6 +250,7 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
 
     return ThemeData(
       brightness: brightness,
+      dialogBackgroundColor: theme.surface,
       textTheme: _getTextTheme(fontFamily: fontFamily, fontColor: theme.text),
       textSelectionTheme: TextSelectionThemeData(
         cursorColor: theme.main2,
@@ -316,7 +317,8 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
           greySelect: theme.bg3,
           lightGreyHover: theme.hoverBG3,
           toggleOffFill: theme.shader5,
-          progressBarBGcolor: theme.progressBarBGcolor,
+          progressBarBGColor: theme.progressBarBGColor,
+          toggleButtonBGColor: theme.toggleButtonBGColor,
           code: _getFontStyle(
             fontFamily: monospaceFontFamily,
             fontColor: theme.shader3,

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

@@ -35,9 +35,8 @@ class SettingsFileLocationCustomzierState
       child: BlocBuilder<SettingsLocationCubit, SettingsLocation>(
         builder: (context, state) {
           return ListTile(
-            title: FlowyText.regular(
+            title: FlowyText.medium(
               LocaleKeys.settings_files_defaultLocation.tr(),
-              fontSize: 15.0,
               overflow: TextOverflow.ellipsis,
             ),
             subtitle: Tooltip(
@@ -63,7 +62,6 @@ class SettingsFileLocationCustomzierState
                 },
                 child: FlowyText.regular(
                   state.path ?? '',
-                  fontSize: 10.0,
                   overflow: TextOverflow.ellipsis,
                 ),
               ),

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

@@ -1,19 +1,19 @@
+import 'dart:convert';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/util/debounce.dart';
-import 'package:flowy_infra/size.dart';
-import 'package:flowy_infra_ui/style_widget/text.dart';
-import 'package:flutter/material.dart';
 import 'package:appflowy/workspace/application/user/settings_user_bloc.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/user_profile.pb.dart';
-import 'package:flowy_infra/image.dart';
-import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
-
-import 'dart:convert';
+import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 
 const defaultUserAvatar = '1F600';
+const _iconSize = Size(60, 60);
 
 class SettingsUserView extends StatelessWidget {
   final UserProfilePB user;
@@ -76,6 +76,17 @@ class UserNameInput extends StatelessWidget {
       controller: TextEditingController()..text = name,
       decoration: InputDecoration(
         labelText: LocaleKeys.settings_user_name.tr(),
+        labelStyle: Theme.of(context)
+            .textTheme
+            .titleMedium!
+            .copyWith(fontWeight: FontWeight.w500),
+        enabledBorder: UnderlineInputBorder(
+          borderSide:
+              BorderSide(color: Theme.of(context).colorScheme.onBackground),
+        ),
+        focusedBorder: UnderlineInputBorder(
+          borderSide: BorderSide(color: Theme.of(context).colorScheme.primary),
+        ),
       ),
       onSubmitted: (val) {
         context
@@ -115,14 +126,26 @@ class _OpenaiKeyInputState extends State<_OpenaiKeyInput> {
       controller: textEditingController,
       obscureText: !visible,
       decoration: InputDecoration(
+        enabledBorder: UnderlineInputBorder(
+          borderSide:
+              BorderSide(color: Theme.of(context).colorScheme.onBackground),
+        ),
+        focusedBorder: UnderlineInputBorder(
+          borderSide: BorderSide(color: Theme.of(context).colorScheme.primary),
+        ),
         labelText: 'OpenAI Key',
+        labelStyle: Theme.of(context)
+            .textTheme
+            .titleMedium!
+            .copyWith(fontWeight: FontWeight.w500),
         hintText: LocaleKeys.settings_user_pleaseInputYourOpenAIKey.tr(),
-        suffixIcon: IconButton(
-          iconSize: 15.0,
-          icon: Icon(visible ? Icons.visibility : Icons.visibility_off),
-          padding: EdgeInsets.zero,
-          hoverColor: Colors.transparent,
-          splashColor: Colors.transparent,
+        suffixIcon: FlowyIconButton(
+          width: 40,
+          height: 40,
+          hoverColor: Theme.of(context).colorScheme.secondaryContainer,
+          icon: Icon(
+            visible ? Icons.visibility : Icons.visibility_off,
+          ),
           onPressed: () {
             setState(() {
               visible = !visible;
@@ -160,51 +183,48 @@ class _CurrentIcon extends StatelessWidget {
       Navigator.of(context).pop();
     }
 
-    return Material(
-      color: Colors.transparent,
-      child: GestureDetector(
-        onTap: () {
-          showDialog(
-            context: context,
-            builder: (BuildContext context) {
-              return SimpleDialog(
-                backgroundColor: Theme.of(context).canvasColor,
-                title: FlowyText.medium(
-                  LocaleKeys.settings_user_selectAnIcon.tr(),
-                  fontSize: FontSizes.s16,
-                ),
-                children: <Widget>[
-                  SizedBox(
-                    height: 300,
-                    width: 300,
-                    child: IconGallery(setIcon),
-                  )
-                ],
-              );
-            },
-          );
-        },
-        child: Column(
-          children: <Widget>[
-            Align(
-              alignment: Alignment.topLeft,
-              child: Text(
-                LocaleKeys.settings_user_icon.tr(),
-                style: const TextStyle(color: Colors.grey),
-              ),
-            ),
-            Align(
-              alignment: Alignment.centerLeft,
-              child: Container(
-                margin: const EdgeInsets.all(5.0),
-                decoration:
-                    BoxDecoration(border: Border.all(color: Colors.grey)),
-                child: svgWidget('emoji/$iconUrl', size: const Size(60, 60)),
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          LocaleKeys.settings_user_icon.tr(),
+          style: Theme.of(context).textTheme.titleSmall!.copyWith(
+                fontWeight: FontWeight.w500,
+                fontSize: 13,
               ),
+        ),
+        InkWell(
+          borderRadius: Corners.s6Border,
+          hoverColor: Theme.of(context).colorScheme.secondaryContainer,
+          onTap: () {
+            showDialog(
+              context: context,
+              builder: (BuildContext context) {
+                return SimpleDialog(
+                  title: FlowyText.medium(
+                    LocaleKeys.settings_user_selectAnIcon.tr(),
+                    fontSize: FontSizes.s16,
+                  ),
+                  children: <Widget>[
+                    SizedBox(
+                      height: 300,
+                      width: 300,
+                      child: IconGallery(setIcon),
+                    )
+                  ],
+                );
+              },
+            );
+          },
+          child: Container(
+            margin: const EdgeInsets.fromLTRB(0, 5, 5, 5),
+            child: svgWidget(
+              'emoji/$iconUrl',
+              size: _iconSize,
             ),
-          ],
+          ),
         ),
-      ),
+      ],
     );
   }
 }
@@ -262,19 +282,13 @@ class IconOption extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Material(
-      color: Colors.transparent,
-      child: IconButton(
-        iconSize: 15.0,
-        icon: svgWidget(
-          'emoji/$iconUrl',
-        ),
-        padding: EdgeInsets.zero,
-        hoverColor: Theme.of(context).colorScheme.tertiaryContainer,
-        onPressed: () {
-          setIcon(iconUrl);
-        },
-      ),
+    return InkWell(
+      borderRadius: Corners.s6Border,
+      hoverColor: Theme.of(context).colorScheme.tertiaryContainer,
+      onTap: () {
+        setIcon(iconUrl);
+      },
+      child: svgWidget('emoji/$iconUrl', size: _iconSize),
     );
   }
 }

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

@@ -73,9 +73,10 @@ abstract class FlowyColorScheme {
   //the text color when it is hovered
   final Color hoverFG;
   final Color questionBubbleBG;
-  final Color progressBarBGcolor;
+  final Color progressBarBGColor;
   //editor toolbar BG color
   final Color toolbarColor;
+  final Color toggleButtonBGColor;
 
   const FlowyColorScheme({
     required this.surface,
@@ -121,8 +122,9 @@ abstract class FlowyColorScheme {
     required this.hoverBG3,
     required this.hoverFG,
     required this.questionBubbleBG,
-    required this.progressBarBGcolor,
+    required this.progressBarBGColor,
     required this.toolbarColor,
+    required this.toggleButtonBGColor,
   });
 
   factory FlowyColorScheme.builtIn(String themeName, Brightness brightness) {

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

@@ -10,6 +10,7 @@ const _lightBg1 = Color(0xFFFFD13E);
 const _lightBg2 = Color(0xffedeef2);
 const _lightShader1 = Color(0xff333333);
 const _lightShader3 = Color(0xff828282);
+const _lightShader5 = Color(0xffe0e0e0);
 const _lightShader6 = Color(0xfff2f2f2);
 const _lightMain1 = Color(0xffe21f74);
 const _lightTint9 = Color(0xffe1fbff);
@@ -35,7 +36,7 @@ class DandelionColorScheme extends FlowyColorScheme {
           shader2: const Color(0xff4f4f4f),
           shader3: const Color(0xff828282),
           shader4: const Color(0xffbdbdbd),
-          shader5: const Color(0xffe0e0e0),
+          shader5: _lightShader5,
           shader6: const Color(0xfff2f2f2),
           shader7: _black,
           bg1: _lightBg1,
@@ -68,55 +69,58 @@ class DandelionColorScheme extends FlowyColorScheme {
           hoverBG3: _lightShader6,
           hoverFG: _lightShader1,
           questionBubbleBG: _lightSelector,
-          progressBarBGcolor: _lightTint9,
+          progressBarBGColor: _lightTint9,
           toolbarColor: _lightShader1,
+          toggleButtonBGColor: _lightShader5,
         );
 
   const DandelionColorScheme.dark()
       : super(
-            surface: const Color(0xff292929),
-            hover: const Color(0xff1f1f1f),
-            selector: const Color(0xff333333),
-            red: const Color(0xfffb006d),
-            yellow: const Color(0xffffd667),
-            green: const Color(0xff66cf80),
-            shader1: _white,
-            shader2: _darkShader2,
-            shader3: const Color(0xff828282),
-            shader4: const Color(0xffbdbdbd),
-            shader5: _darkShader5,
-            shader6: _darkShader6,
-            shader7: _white,
-            bg1: const Color(0xFFD5A200),
-            bg2: _black,
-            bg3: const Color(0xff4f4f4f),
-            bg4: const Color(0xff2c144b),
-            tint1: const Color(0xff8738F5),
-            tint2: const Color(0xffE6336E),
-            tint3: const Color(0xffFF2D9E),
-            tint4: const Color(0xffE9973E),
-            tint5: const Color(0xffFBF000),
-            tint6: const Color(0xffC0F000),
-            tint7: const Color(0xff15F74E),
-            tint8: const Color(0xff00F0E2),
-            tint9: const Color(0xff00BCF0),
-            main1: _darkMain1,
-            main2: const Color(0xffe0196f),
-            shadow: _black,
-            sidebarBg: const Color(0xff232B38),
-            divider: _darkShader3,
-            topbarBg: _darkShader1,
-            icon: _darkShader5,
-            text: _darkShader5,
-            input: _darkInput,
-            hint: _darkShader5,
-            primary: _darkMain1,
-            onPrimary: _darkShader1,
-            hoverBG1: _darkMain1,
-            hoverBG2: _darkMain1,
-            hoverBG3: _darkShader3,
-            hoverFG: _darkShader1,
-            questionBubbleBG: _darkShader3,
-            progressBarBGcolor: _darkShader3,
-            toolbarColor: _darkInput);
+          surface: const Color(0xff292929),
+          hover: const Color(0xff1f1f1f),
+          selector: const Color(0xff333333),
+          red: const Color(0xfffb006d),
+          yellow: const Color(0xffffd667),
+          green: const Color(0xff66cf80),
+          shader1: _white,
+          shader2: _darkShader2,
+          shader3: const Color(0xff828282),
+          shader4: const Color(0xffbdbdbd),
+          shader5: _darkShader5,
+          shader6: _darkShader6,
+          shader7: _white,
+          bg1: const Color(0xFFD5A200),
+          bg2: _black,
+          bg3: const Color(0xff4f4f4f),
+          bg4: const Color(0xff2c144b),
+          tint1: const Color(0xff8738F5),
+          tint2: const Color(0xffE6336E),
+          tint3: const Color(0xffFF2D9E),
+          tint4: const Color(0xffE9973E),
+          tint5: const Color(0xffFBF000),
+          tint6: const Color(0xffC0F000),
+          tint7: const Color(0xff15F74E),
+          tint8: const Color(0xff00F0E2),
+          tint9: const Color(0xff00BCF0),
+          main1: _darkMain1,
+          main2: const Color(0xffe0196f),
+          shadow: _black,
+          sidebarBg: const Color(0xff232B38),
+          divider: _darkShader3,
+          topbarBg: _darkShader1,
+          icon: _darkShader5,
+          text: _darkShader5,
+          input: _darkInput,
+          hint: _darkShader5,
+          primary: _darkMain1,
+          onPrimary: _darkShader1,
+          hoverBG1: _darkMain1,
+          hoverBG2: _darkMain1,
+          hoverBG3: _darkShader3,
+          hoverFG: _darkShader1,
+          questionBubbleBG: _darkShader3,
+          progressBarBGColor: _darkShader3,
+          toolbarColor: _darkInput,
+          toggleButtonBGColor: _darkShader1,
+        );
 }

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

@@ -9,6 +9,7 @@ const _lightBg1 = Color(0xfff7f8fc);
 const _lightBg2 = Color(0xffedeef2);
 const _lightShader1 = Color(0xff333333);
 const _lightShader3 = Color(0xff828282);
+const _lightShader5 = Color(0xffe0e0e0);
 const _lightShader6 = Color(0xfff2f2f2);
 const _lightMain1 = Color(0xff00bcf0);
 const _lightTint9 = Color(0xffe1fbff);
@@ -33,7 +34,7 @@ class DefaultColorScheme extends FlowyColorScheme {
           shader2: const Color(0xff4f4f4f),
           shader3: _lightShader3,
           shader4: const Color(0xffbdbdbd),
-          shader5: const Color(0xffe0e0e0),
+          shader5: _lightShader5,
           shader6: _lightShader6,
           shader7: _lightShader1,
           bg1: _lightBg1,
@@ -66,8 +67,9 @@ class DefaultColorScheme extends FlowyColorScheme {
           hoverFG: _lightShader1,
           questionBubbleBG: _lightSelector,
           hoverBG3: _lightShader6,
-          progressBarBGcolor: _lightTint9,
+          progressBarBGColor: _lightTint9,
           toolbarColor: _lightShader1,
+          toggleButtonBGColor: _lightShader5,
         );
 
   const DefaultColorScheme.dark()
@@ -115,7 +117,8 @@ class DefaultColorScheme extends FlowyColorScheme {
           hoverBG3: _darkShader3,
           hoverFG: _darkShader1,
           questionBubbleBG: _darkShader3,
-          progressBarBGcolor: _darkShader3,
+          progressBarBGColor: _darkShader3,
           toolbarColor: _darkInput,
+          toggleButtonBGColor: _darkShader1,
         );
 }

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

@@ -11,6 +11,7 @@ const _lightBg1 = Color(0xfff7f8fc);
 const _lightBg2 = Color(0xffedeef2);
 const _lightShader1 = Color(0xff333333);
 const _lightShader3 = Color(0xff828282);
+const _lightShader5 = Color(0xffe0e0e0);
 const _lightShader6 = Color(0xfff2f2f2);
 const _lightMain1 = Color(0xffA652FB);
 const _lightTint9 = Color(0xffe1fbff);
@@ -36,7 +37,7 @@ class LavenderColorScheme extends FlowyColorScheme {
           shader2: const Color(0xff4f4f4f),
           shader3: const Color(0xff828282),
           shader4: const Color(0xffbdbdbd),
-          shader5: const Color(0xffe0e0e0),
+          shader5: _lightShader5,
           shader6: const Color(0xfff2f2f2),
           shader7: _black,
           bg1: const Color(0xffAC59FF),
@@ -69,8 +70,9 @@ class LavenderColorScheme extends FlowyColorScheme {
           hoverBG3: _lightShader6,
           hoverFG: _lightShader1,
           questionBubbleBG: _lightSelector,
-          progressBarBGcolor: _lightTint9,
+          progressBarBGColor: _lightTint9,
           toolbarColor: _lightShader1,
+          toggleButtonBGColor: _lightShader5,
         );
 
   const LavenderColorScheme.dark()
@@ -118,7 +120,8 @@ class LavenderColorScheme extends FlowyColorScheme {
           hoverBG3: _darkShader3,
           hoverFG: _darkShader1,
           questionBubbleBG: _darkShader3,
-          progressBarBGcolor: _darkShader3,
+          progressBarBGColor: _darkShader3,
           toolbarColor: _darkInput,
+          toggleButtonBGColor: _darkShader1,
         );
 }

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

@@ -20,7 +20,8 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
   final Color greySelect;
   final Color lightGreyHover;
   final Color toggleOffFill;
-  final Color progressBarBGcolor;
+  final Color progressBarBGColor;
+  final Color toggleButtonBGColor;
 
   final TextStyle code;
   final TextStyle callout;
@@ -46,7 +47,8 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
     required this.code,
     required this.callout,
     required this.caption,
-    required this.progressBarBGcolor,
+    required this.progressBarBGColor,
+    required this.toggleButtonBGColor,
   });
 
   static AFThemeExtension of(BuildContext context) {
@@ -71,7 +73,8 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
     Color? greySelect,
     Color? lightGreyHover,
     Color? toggleOffFill,
-    Color? progressBarBGcolor,
+    Color? progressBarBGColor,
+    Color? toggleButtonBGColor,
     TextStyle? code,
     TextStyle? callout,
     TextStyle? caption,
@@ -93,7 +96,8 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
       greySelect: greySelect ?? this.greySelect,
       lightGreyHover: lightGreyHover ?? this.lightGreyHover,
       toggleOffFill: toggleOffFill ?? this.toggleOffFill,
-      progressBarBGcolor: progressBarBGcolor ?? this.progressBarBGcolor,
+      progressBarBGColor: progressBarBGColor ?? this.progressBarBGColor,
+      toggleButtonBGColor: toggleButtonBGColor ?? this.toggleButtonBGColor,
       code: code ?? this.code,
       callout: callout ?? this.callout,
       caption: caption ?? this.caption,
@@ -123,8 +127,10 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
       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)!,
+      progressBarBGColor:
+          Color.lerp(progressBarBGColor, other.progressBarBGColor, t)!,
+      toggleButtonBGColor:
+          Color.lerp(toggleButtonBGColor, other.toggleButtonBGColor, t)!,
       code: other.code,
       callout: other.callout,
       caption: other.caption,