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
2024-08-30 18:12:39 +00:00 · 2023-05-01 21:18:51 -05:00 · 2023-05-01 21:18:51 -05:00 · 545e57448a
commit 545e57448a
parent 3277f179ef
17 changed files with 203 additions and 179 deletions
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_editor.dart
+++ b/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,
--- 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,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(),
        ),
      ),
    );
--- 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,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'),
    );
  }
 }
--- 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
@ -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(
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart
+++ b/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(
--- 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
@ -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: () {
--- 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).progressBarBGcolor,
+      backgroundColor: AFThemeExtension.of(context).progressBarBGColor,
      barRadius: const Radius.circular(5),
    );
  }
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_switcher.dart
+++ b/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,
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/more/more_button.dart
+++ b/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 [
--- a/frontend/appflowy_flutter/lib/workspace/application/appearance.dart
+++ b/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,
--- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_file_customize_location_view.dart
+++ b/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,
                ),
              ),
--- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_user_view.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_user_view.dart
@ -1,19 +1,19 @@
-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:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/util/debounce.dart';
+import 'package:appflowy/workspace/application/user/settings_user_bloc.dart';
+import 'package:appflowy_backend/protobuf/flowy-user/user_profile.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
+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),
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          LocaleKeys.settings_user_icon.tr(),
+          style: Theme.of(context).textTheme.titleSmall!.copyWith(
+                fontWeight: FontWeight.w500,
+                fontSize: 13,
              ),
-            ),
-            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)),
-              ),
-            ),
-          ],
        ),
-      ),
+        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),
    );
  }
 }
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/colorscheme.dart
+++ b/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) {
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart
+++ b/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,
+        );
 }
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart
+++ b/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,
        );
 }
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart
+++ b/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,
        );
 }
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension.dart
+++ b/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,