Feat(appflowy_flutter): dark mode improvement for generic area/widgets (#2099)

* chore: update color scheme for dark mode

* chore: update dark color scheme

1. update the background color for side bar, surface and divider in dark mode
2. comment out dandelion and lavender theme temporarily

* chore: update top bar BGcolor and icon color

* chore: update text color

* chore: update share button color on the top bar

* chore: add tooltip theme data in global

* chore: add hint and tertiary color and update font size pop up menu style

* chore: update all the semibold texts color

* chore: update all the hover color

* chore: update setting BG color

* chore: add FlowySvg to get the icon color through current theme

1. Add FlowySvg widget
2. Update all the icons those have hover effect to FlowySvg
3. Recover shader1 for the text color when it is in hovered

* chore: update side bar UI

1. Update AddButton hover style
2. Update MenuAppHeader icon color and its hover style
3. Update NewAppButton(New page) font color
4. Update MenuUser username font color

* chore: update SettingsDialog style in dart mode

    1. Update title and text color
    2. Update the hover color on FlowyTextButton
    3. Update the LanguageSelectorDropdown background color and hover enter color

* chore: update NewAppButton icon in dark mode

* chore: update default icon color

* chore: rename the hover color and update ViewSectionItem hover color from default theme color

* chore: add question bubble background color

* chore: update cover image button color

* chore: remove fixed icon color on _AddCoverButton

* chore: put Dandelion and Lavender color scheme back with basic modification

* fix: delete unused import files and deprecated field

* chore: add comma and put color back

* chore: update AppFlowyPopover background color

* chore: remove the hover color on primary and secondary button

* chore: update shadow color in dark mode

* chore: update SettingsMenuElement hover effect

* chore: update the text color in DropdownMenuItem

frontend/appflowy_flutter/lib/plugins/document/presentation/banner.dart

@@ -34,7 +34,8 @@ class DocumentBanner extends StatelessWidget {
                   contentPadding: EdgeInsets.zero,
                   bgColor: Colors.transparent,
                   hoverColor: Theme.of(context).colorScheme.primary,
-                  downColor: Theme.of(context).colorScheme.primaryContainer,
+                  highlightColor:
+                      Theme.of(context).colorScheme.primaryContainer,
                   outlineColor: Colors.white,
                   borderRadius: Corners.s8Border,
                   onPressed: onRestore,
@@ -50,7 +51,7 @@ class DocumentBanner extends StatelessWidget {
                   contentPadding: EdgeInsets.zero,
                   bgColor: Colors.transparent,
                   hoverColor: Theme.of(context).colorScheme.primaryContainer,
-                  downColor: Theme.of(context).colorScheme.primary,
+                  highlightColor: Theme.of(context).colorScheme.primary,
                   outlineColor: Colors.white,
                   borderRadius: Corners.s8Border,
                   onPressed: onDelete,

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

@@ -32,6 +32,7 @@ class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
           FlowyText.semibold(
             LocaleKeys.moreAction_fontSize.tr(),
             fontSize: 12,
+            color: Theme.of(context).colorScheme.tertiary,
           ),
           const SizedBox(
             height: 5,
@@ -43,9 +44,8 @@ class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
               _updateSelectedFontSize(_fontSizes[index].item2);
             },
             borderRadius: const BorderRadius.all(Radius.circular(5)),
-            selectedBorderColor: Theme.of(context).colorScheme.primaryContainer,
-            selectedColor: Theme.of(context).colorScheme.onSurface,
-            fillColor: Theme.of(context).colorScheme.primaryContainer,
+            selectedColor: Theme.of(context).colorScheme.tertiary,
+            fillColor: Theme.of(context).colorScheme.primary,
             color: Theme.of(context).hintColor,
             constraints: const BoxConstraints(
               minHeight: 40.0,

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

@@ -28,7 +28,7 @@ class DocumentMoreButton extends StatelessWidget {
       child: svgWidget(
         'editor/details',
         size: const Size(18, 18),
-        color: Theme.of(context).colorScheme.onSurface,
+        color: Theme.of(context).iconTheme.color,
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/base/built_in_page_widget.dart

@@ -119,7 +119,7 @@ class _BuiltInPageWidgetState extends State<BuiltInPageWidget> {
             iconPadding: const EdgeInsets.all(3),
             icon: svgWidget(
               'common/information',
-              color: Theme.of(context).colorScheme.onSurface,
+              color: Theme.of(context).iconTheme.color,
             ),
           ),
           // Name
@@ -143,7 +143,7 @@ class _BuiltInPageWidgetState extends State<BuiltInPageWidget> {
                 iconPadding: const EdgeInsets.all(3),
                 icon: svgWidget(
                   'common/settings',
-                  color: Theme.of(context).colorScheme.onSurface,
+                  color: Theme.of(context).iconTheme.color,
                 ),
                 onPressed: () => controller.show(),
               );

frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/base/link_to_page_widget.dart

@@ -149,7 +149,7 @@ class _LinkToPageMenuState extends State<LinkToPageMenu> {
                     FlowyButton(
                       leftIcon: svgWidget(
                         _iconName(value),
-                        color: Theme.of(context).colorScheme.onSurface,
+                        color: Theme.of(context).iconTheme.color,
                       ),
                       text: FlowyText.regular(value.name),
                       onTap: () => widget.onSelected(app.value1, value),

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

@@ -104,15 +104,24 @@ class _ChangeCoverPopoverState extends State<ChangeCoverPopover> {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        FlowyText.semibold(LocaleKeys.document_plugins_cover_colors.tr()),
+        FlowyText.semibold(
+          LocaleKeys.document_plugins_cover_colors.tr(),
+          color: Theme.of(context).colorScheme.tertiary,
+        ),
         const SizedBox(height: 10),
         _buildColorPickerList(),
         const SizedBox(height: 10),
-        FlowyText.semibold(LocaleKeys.document_plugins_cover_images.tr()),
+        FlowyText.semibold(
+          LocaleKeys.document_plugins_cover_images.tr(),
+          color: Theme.of(context).colorScheme.tertiary,
+        ),
         const SizedBox(height: 10),
         _buildFileImagePicker(),
         const SizedBox(height: 10),
-        FlowyText.semibold(LocaleKeys.document_plugins_cover_abstract.tr()),
+        FlowyText.semibold(
+          LocaleKeys.document_plugins_cover_abstract.tr(),
+          color: Theme.of(context).colorScheme.tertiary,
+        ),
         const SizedBox(height: 10),
         _buildAbstractImagePicker(),
       ],

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

@@ -156,10 +156,7 @@ class _AddCoverButtonState extends State<_AddCoverButton> {
                           leftIconSize: const Size.square(18),
                           onTap: widget.onTap,
                           useIntrinsicWidth: true,
-                          leftIcon: svgWidget(
-                            'editor/image',
-                            color: Theme.of(context).colorScheme.onSurface,
-                          ),
+                          leftIcon: const FlowySvg(name: 'editor/image'),
                           text: FlowyText.regular(
                             LocaleKeys.document_plugins_cover_addCover.tr(),
                           ),
@@ -174,7 +171,7 @@ class _AddCoverButtonState extends State<_AddCoverButton> {
                           useIntrinsicWidth: true,
                           leftIcon: Icon(
                             Icons.emoji_emotions_outlined,
-                            color: Theme.of(context).colorScheme.onSurface,
+                            color: Theme.of(context).iconTheme.color,
                             size: 18,
                           ),
                           text: FlowyText.regular(LocaleKeys
@@ -197,8 +194,7 @@ class _AddCoverButtonState extends State<_AddCoverButton> {
                           child: FlowyButton(
                             leftIconSize: const Size.square(18),
                             useIntrinsicWidth: true,
-                            leftIcon: Icon(Icons.emoji_emotions_outlined,
-                                color: Theme.of(context).colorScheme.onSurface,
+                            leftIcon: const Icon(Icons.emoji_emotions_outlined,
                                 size: 18),
                             text: FlowyText.regular(
                                 LocaleKeys.document_plugins_cover_addIcon.tr()),
@@ -400,7 +396,7 @@ class _CoverImageState extends State<_CoverImage> {
                 popoverController.show();
               },
               hoverColor: Theme.of(context).colorScheme.surface,
-              textColor: Theme.of(context).colorScheme.onSurface,
+              textColor: Theme.of(context).colorScheme.tertiary,
               fillColor: Theme.of(context).colorScheme.surface.withOpacity(0.8),
               width: 120,
               height: 28,
@@ -422,7 +418,7 @@ class _CoverImageState extends State<_CoverImage> {
             width: 28,
             icon: svgWidget(
               'editor/delete',
-              color: Theme.of(context).colorScheme.onSurface,
+              color: Theme.of(context).colorScheme.tertiary,
             ),
             onPressed: () {
               widget.onCoverChanged(CoverSelectionType.initial, null);