feat: Improve dark mode in document page (#2254)

* chore: update page icon hover color

* chore: update remove icon hover color

* chore: update emoji picker style

* chore: update ai writer dialog button style

* chore: update Dropdown menu item style in code block

* chore: update callout tint color name

* chore: add null assertion in emoji popover

frontend/appflowy_flutter/lib/plugins/document/editor_styles.dart

@@ -23,10 +23,9 @@ EditorStyle customEditorTheme(BuildContext context) {
       fontFamily: 'poppins-Bold',
     ),
     backgroundColor: Theme.of(context).colorScheme.surface,
-    selectionMenuItemSelectedIconColor:
-        Theme.of(context).textTheme.bodyMedium?.color,
-    selectionMenuItemSelectedTextColor:
-        Theme.of(context).textTheme.bodyMedium?.color,
+    selectionMenuBackgroundColor: Theme.of(context).cardColor,
+    selectionMenuItemSelectedIconColor: Theme.of(context).colorScheme.onSurface,
+    selectionMenuItemSelectedTextColor: Theme.of(context).colorScheme.onSurface,
   );
   return editorStyle;
 }

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

@@ -169,9 +169,8 @@ class _AddCoverButtonState extends State<_AddCoverButton> {
                             _removeIcon();
                           },
                           useIntrinsicWidth: true,
-                          leftIcon: Icon(
+                          leftIcon: const Icon(
                             Icons.emoji_emotions_outlined,
-                            color: Theme.of(context).iconTheme.color,
                             size: 18,
                           ),
                           text: FlowyText.regular(

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

@@ -50,14 +50,14 @@ class _EmojiPopoverState extends State<EmojiPopover> {
             ],
           );
         },
-        config: const Config(
+        config: Config(
           columns: 8,
           emojiSizeMax: 28,
           bgColor: Colors.transparent,
-          iconColor: Colors.grey,
-          iconColorSelected: Color(0xff333333),
-          indicatorColor: Color(0xff333333),
-          progressIndicatorColor: Color(0xff333333),
+          iconColor: Theme.of(context).iconTheme.color!,
+          iconColorSelected: Theme.of(context).colorScheme.onSurface,
+          selectedHoverColor: Theme.of(context).colorScheme.secondary,
+          progressIndicatorColor: Theme.of(context).iconTheme.color!,
           buttonMode: ButtonMode.CUPERTINO,
           initCategory: Category.RECENT,
         ),
@@ -72,18 +72,16 @@ class _EmojiPopoverState extends State<EmojiPopover> {
     return FlowyButton(
       onTap: () => widget.removeIcon(),
       useIntrinsicWidth: true,
-      hoverColor: Theme.of(context).colorScheme.onPrimary,
       text: Row(
         mainAxisSize: MainAxisSize.min,
         mainAxisAlignment: MainAxisAlignment.end,
         children: [
-          svgWidget("editor/delete"),
+          const FlowySvg(name: 'editor/delete'),
           const SizedBox(
             width: 5,
           ),
           FlowyText(
             LocaleKeys.document_plugins_cover_removeIcon.tr(),
-            color: Colors.grey,
           ),
         ],
       ),

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

@@ -34,7 +34,7 @@ class _EmojiIconWidgetState extends State<EmojiIconWidget> {
         margin: const EdgeInsets.only(top: 18),
         decoration: BoxDecoration(
           color: !hover
-              ? Theme.of(context).colorScheme.secondary
+              ? Theme.of(context).colorScheme.inverseSurface
               : Colors.transparent,
           borderRadius: Corners.s8Border,
         ),

frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/openai/widgets/auto_completion_node_widget.dart

@@ -9,6 +9,8 @@ import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/style_widget/text_field.dart';
+import 'package:flowy_infra_ui/widget/buttons/primary_button.dart';
+import 'package:flowy_infra_ui/widget/buttons/secondary_button.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
@@ -179,27 +181,13 @@ class _AutoCompletionInputState extends State<_AutoCompletionInput> {
   Widget _buildInputFooterWidget(BuildContext context) {
     return Row(
       children: [
-        FlowyRichTextButton(
-          TextSpan(
-            children: [
-              TextSpan(
-                text: LocaleKeys.button_generate.tr(),
-                style: Theme.of(context).textTheme.bodyMedium,
-              ),
-            ],
-          ),
+        PrimaryTextButton(
+          LocaleKeys.button_generate.tr(),
           onPressed: () async => await _onGenerate(),
         ),
         const Space(10, 0),
-        FlowyRichTextButton(
-          TextSpan(
-            children: [
-              TextSpan(
-                text: LocaleKeys.button_Cancel.tr(),
-                style: Theme.of(context).textTheme.bodyMedium,
-              ),
-            ],
-          ),
+        SecondaryTextButton(
+          LocaleKeys.button_Cancel.tr(),
           onPressed: () async => await _onExit(),
         ),
         Expanded(
@@ -219,27 +207,13 @@ class _AutoCompletionInputState extends State<_AutoCompletionInput> {
   Widget _buildFooterWidget(BuildContext context) {
     return Row(
       children: [
-        FlowyRichTextButton(
-          TextSpan(
-            children: [
-              TextSpan(
-                text: '${LocaleKeys.button_keep.tr()}  ',
-                style: Theme.of(context).textTheme.bodyMedium,
-              ),
-            ],
-          ),
+        PrimaryTextButton(
+          LocaleKeys.button_keep.tr(),
           onPressed: () => _onExit(),
         ),
         const Space(10, 0),
-        FlowyRichTextButton(
-          TextSpan(
-            children: [
-              TextSpan(
-                text: '${LocaleKeys.button_discard.tr()}  ',
-                style: Theme.of(context).textTheme.bodyMedium,
-              ),
-            ],
-          ),
+        SecondaryTextButton(
+          LocaleKeys.button_discard.tr(),
           onPressed: () => _onDiscard(),
         ),
       ],

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

@@ -231,6 +231,8 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
       surface: theme.surface,
       // text&icon color when it is hovered
       onSurface: theme.hoverFG,
+      // grey hover color
+      inverseSurface: theme.hoverBG3,
       onError: theme.shader7,
       error: theme.red,
       outline: theme.shader4,
@@ -277,7 +279,8 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
         radius: Corners.s10Radius,
       ),
       materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
-      canvasColor: theme.shader6,
+      //dropdown menu color
+      canvasColor: theme.surface,
       dividerColor: theme.divider,
       hintColor: theme.hint,
       //action item hover color

frontend/appflowy_flutter/lib/workspace/presentation/widgets/emoji_picker/src/config.dart

@@ -16,6 +16,7 @@ class Config {
     this.initCategory = Category.RECENT,
     this.bgColor = const Color(0xFFEBEFF2),
     this.indicatorColor = Colors.blue,
+    this.selectedHoverColor = Colors.grey,
     this.iconColor = Colors.grey,
     this.iconColorSelected = Colors.blue,
     this.progressIndicatorColor = Colors.blue,
@@ -52,6 +53,9 @@ class Config {
   /// The color of the category indicator
   final Color indicatorColor;
 
+  /// The background color of the selected category
+  final Color selectedHoverColor;
+
   /// The color of the category icons
   final Color iconColor;
 

frontend/appflowy_flutter/lib/workspace/presentation/widgets/emoji_picker/src/default_emoji_picker_view.dart

@@ -1,4 +1,6 @@
+import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_scroll_bar.dart';
+import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
@@ -106,37 +108,42 @@ class DefaultEmojiPickerViewState extends State<DefaultEmojiPickerView>
 
         return Container(
           color: widget.config.bgColor,
-          padding: const EdgeInsets.all(5.0),
+          padding: const EdgeInsets.all(4.0),
           child: Column(
             children: [
               SizedBox(
-                height: 25.0,
+                height: 40,
                 child: TextField(
                   controller: _emojiController,
                   focusNode: _emojiFocusNode,
                   autofocus: true,
-                  style: const TextStyle(fontSize: 14.0),
                   cursorWidth: 1.0,
-                  cursorColor: Colors.black,
+                  cursorColor: Theme.of(context).colorScheme.tertiary,
+                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                        fontSize: FontSizes.s16,
+                        fontWeight: FontWeight.w400,
+                      ),
                   decoration: InputDecoration(
-                    contentPadding: const EdgeInsets.symmetric(horizontal: 5.0),
+                    contentPadding: const EdgeInsets.symmetric(horizontal: 10),
                     hintText: "Search emoji",
                     focusedBorder: OutlineInputBorder(
-                      borderRadius: BorderRadius.circular(4.0),
-                      borderSide: const BorderSide(),
-                      gapPadding: 0.0,
+                      borderSide: BorderSide(
+                        color: Theme.of(context).colorScheme.tertiary,
+                        width: 2,
+                      ),
                     ),
                     border: OutlineInputBorder(
-                      borderRadius: BorderRadius.circular(4.0),
-                      borderSide: const BorderSide(),
-                      gapPadding: 0.0,
+                      borderSide: BorderSide(
+                        color: Theme.of(context).colorScheme.tertiary,
+                      ),
                     ),
                     filled: true,
-                    fillColor: Colors.white,
-                    hoverColor: Colors.white,
+                    fillColor: Colors.transparent,
+                    hoverColor: Colors.transparent,
                   ),
                 ),
               ),
+              const VSpace(6),
               Row(
                 children: [
                   Expanded(
@@ -150,9 +157,8 @@ class DefaultEmojiPickerViewState extends State<DefaultEmojiPickerView>
                       indicatorColor: widget.config.indicatorColor,
                       padding: const EdgeInsets.symmetric(vertical: 5.0),
                       indicator: BoxDecoration(
-                        border: Border.all(color: Colors.transparent),
                         borderRadius: BorderRadius.circular(4.0),
-                        color: Colors.grey.withOpacity(0.5),
+                        color: widget.config.selectedHoverColor,
                       ),
                       onTap: (index) {
                         _pageController!.animateToPage(
@@ -296,6 +302,7 @@ class DefaultEmojiPickerViewState extends State<DefaultEmojiPickerView>
           style: TextStyle(
             fontSize: emojiSize,
             backgroundColor: Colors.transparent,
+            color: Theme.of(context).iconTheme.color,
           ),
         ),
       ),

frontend/appflowy_flutter/packages/appflowy_editor_plugins/lib/src/code_block/code_block_node_widget.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:highlight/highlight.dart' as highlight;
 import 'package:highlight/languages/all.dart';
@@ -132,9 +133,9 @@ class __CodeBlockNodeWidgeState extends State<_CodeBlockNodeWidge>
               allLanguages.keys.map<DropdownMenuItem<String>>((String value) {
             return DropdownMenuItem<String>(
               value: value,
-              child: Text(
+              child: FlowyText.medium(
                 value,
-                style: const TextStyle(fontSize: 12.0),
+                color: Theme.of(context).colorScheme.tertiary,
               ),
             );
           }).toList(growable: false),

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

@@ -1,5 +1,4 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
-import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flutter/material.dart';
 
@@ -9,48 +8,25 @@ extension FlowyTintExtension on FlowyTint {
     ThemeMode? themeMode,
     String? theme,
   }) {
-    if (themeMode == ThemeMode.light && theme == BuiltInTheme.defaultTheme) {
-      switch (this) {
-        case FlowyTint.tint1:
-          return l10n.lightLightTint1;
-        case FlowyTint.tint2:
-          return l10n.lightLightTint2;
-        case FlowyTint.tint3:
-          return l10n.lightLightTint3;
-        case FlowyTint.tint4:
-          return l10n.lightLightTint4;
-        case FlowyTint.tint5:
-          return l10n.lightLightTint5;
-        case FlowyTint.tint6:
-          return l10n.lightLightTint6;
-        case FlowyTint.tint7:
-          return l10n.lightLightTint7;
-        case FlowyTint.tint8:
-          return l10n.lightLightTint8;
-        case FlowyTint.tint9:
-          return l10n.lightLightTint9;
-      }
-    }
-
     switch (this) {
       case FlowyTint.tint1:
-        return l10n.tint1;
+        return l10n.lightLightTint1;
       case FlowyTint.tint2:
-        return l10n.tint2;
+        return l10n.lightLightTint2;
       case FlowyTint.tint3:
-        return l10n.tint3;
+        return l10n.lightLightTint3;
       case FlowyTint.tint4:
-        return l10n.tint4;
+        return l10n.lightLightTint4;
       case FlowyTint.tint5:
-        return l10n.tint5;
+        return l10n.lightLightTint5;
       case FlowyTint.tint6:
-        return l10n.tint6;
+        return l10n.lightLightTint6;
       case FlowyTint.tint7:
-        return l10n.tint7;
+        return l10n.lightLightTint7;
       case FlowyTint.tint8:
-        return l10n.tint8;
+        return l10n.lightLightTint8;
       case FlowyTint.tint9:
-        return l10n.tint9;
+        return l10n.lightLightTint9;
     }
   }
 }