fix: hover color in different color schemes (#6240)

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/shared_widget.dart

@@ -474,10 +474,12 @@ class CurrentSpace extends StatelessWidget {
     super.key,
     this.onTapBlankArea,
     required this.space,
+    this.isHovered = false,
   });
 
   final ViewPB space;
   final VoidCallback? onTapBlankArea;
+  final bool isHovered;
 
   @override
   Widget build(BuildContext context) {
@@ -497,6 +499,7 @@ class CurrentSpace extends StatelessWidget {
             fontSize: 14.0,
             figmaLineHeight: 18.0,
             overflow: TextOverflow.ellipsis,
+            color: isHovered ? Theme.of(context).colorScheme.onSurface : null,
           ),
         ),
         const HSpace(4.0),
@@ -504,6 +507,7 @@ class CurrentSpace extends StatelessWidget {
           context.read<SpaceBloc>().state.isExpanded
               ? FlowySvgs.workspace_drop_down_menu_show_s
               : FlowySvgs.workspace_drop_down_menu_hide_s,
+          color: isHovered ? Theme.of(context).colorScheme.onSurface : null,
         ),
       ],
     );

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/sidebar_space_header.dart

@@ -15,7 +15,6 @@ import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 class SidebarSpaceHeader extends StatefulWidget {
@@ -53,59 +52,54 @@ class _SidebarSpaceHeaderState extends State<SidebarSpaceHeader> {
   Widget build(BuildContext context) {
     return ValueListenableBuilder(
       valueListenable: isHovered,
-      builder: (context, isHovered, child) {
+      builder: (context, onHover, child) {
-        final style = HoverStyle(
+        return MouseRegion(
-          hoverColor: isHovered
+          onEnter: (_) => isHovered.value = true,
-              ? Theme.of(context).colorScheme.secondary
+          onExit: (_) => isHovered.value = false,
-              : Colors.transparent,
+          child: GestureDetector(
-        );
+            onTap: () => context
-        return GestureDetector(
+                .read<SpaceBloc>()
-          onTap: () => context
+                .add(SpaceEvent.expand(widget.space, !widget.isExpanded)),
-              .read<SpaceBloc>()
+            child: _buildSpaceName(onHover),
-              .add(SpaceEvent.expand(widget.space, !widget.isExpanded)),
-          child: FlowyHoverContainer(
-            style: style,
-            applyStyle: isHovered,
-            child: _buildSpaceName(),
           ),
         );
       },
     );
   }
 
-  Widget _buildSpaceName() {
+  Widget _buildSpaceName(bool isHovered) {
-    return SizedBox(
+    return Container(
       height: HomeSizes.workspaceSectionHeight,
-      child: MouseRegion(
+      decoration: BoxDecoration(
-        onEnter: (_) => isHovered.value = true,
+        borderRadius: const BorderRadius.all(Radius.circular(6)),
-        onExit: (_) => isHovered.value = false,
+        color: isHovered ? Theme.of(context).colorScheme.secondary : null,
-        child: Stack(
+      ),
-          alignment: Alignment.center,
+      child: Stack(
-          children: [
+        alignment: Alignment.center,
-            ValueListenableBuilder(
+        children: [
-              valueListenable: onEditing,
+          ValueListenableBuilder(
-              builder: (context, onEditing, child) => Positioned(
+            valueListenable: onEditing,
-                left: 3,
+            builder: (context, onEditing, child) => Positioned(
-                top: 3,
+              left: 3,
-                bottom: 3,
+              top: 3,
-                right: isHovered.value || onEditing ? 88 : 0,
+              bottom: 3,
-                child: SpacePopup(
+              right: isHovered || onEditing ? 88 : 0,
-                  showCreateButton: true,
+              child: SpacePopup(
-                  child: _buildChild(),
+                showCreateButton: true,
-                ),
+                child: _buildChild(isHovered),
               ),
             ),
-            Positioned(
+          ),
-              right: 4,
+          Positioned(
-              child: _buildRightIcon(),
+            right: 4,
-            ),
+            child: _buildRightIcon(isHovered),
-          ],
+          ),
-        ),
+        ],
       ),
     );
   }
 
-  Widget _buildChild() {
+  Widget _buildChild(bool isHovered) {
     final textSpan = TextSpan(
       children: [
         TextSpan(
@@ -124,23 +118,23 @@ class _SidebarSpaceHeaderState extends State<SidebarSpaceHeader> {
       richMessage: textSpan,
       child: CurrentSpace(
         space: widget.space,
+        isHovered: isHovered,
       ),
     );
   }
 
-  Widget _buildRightIcon() {
+  Widget _buildRightIcon(bool isHovered) {
     return ValueListenableBuilder(
       valueListenable: onEditing,
-      builder: (context, onEditing, child) => ValueListenableBuilder(
+      builder: (context, onEditing, child) => Opacity(
-        valueListenable: isHovered,
+        opacity: isHovered || onEditing ? 1 : 0,
-        builder: (context, onHover, child) =>
-            Opacity(opacity: onHover || onEditing ? 1 : 0, child: child),
         child: Row(
           children: [
             SpaceMorePopup(
               space: widget.space,
               onEditing: (value) => this.onEditing.value = value,
               onAction: _onAction,
+              isHovered: isHovered,
             ),
             const HSpace(8.0),
             FlowyTooltip(
@@ -159,6 +153,7 @@ class _SidebarSpaceHeaderState extends State<SidebarSpaceHeader> {
                     widget.onAdded(pluginBuilder.layoutType!);
                   }
                 },
+                isHovered: isHovered,
               ),
             ),
           ],

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/space_more_popup.dart

@@ -19,11 +19,13 @@ class SpaceMorePopup extends StatelessWidget {
     required this.space,
     required this.onAction,
     required this.onEditing,
+    this.isHovered = false,
   });
 
   final ViewPB space;
   final void Function(SpaceMoreActionType type, dynamic data) onAction;
   final void Function(bool value) onEditing;
+  final bool isHovered;
 
   @override
   Widget build(BuildContext context) {
@@ -38,7 +40,10 @@ class SpaceMorePopup extends StatelessWidget {
       buildChild: (popover) {
         return FlowyIconButton(
           width: 24,
-          icon: const FlowySvg(FlowySvgs.workspace_three_dots_s),
+          icon: FlowySvg(
+            FlowySvgs.workspace_three_dots_s,
+            color: isHovered ? Theme.of(context).colorScheme.onSurface : null,
+          ),
           tooltipText: LocaleKeys.space_manage.tr(),
           onPressed: () {
             onEditing(true);

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_add_button.dart

@@ -16,6 +16,7 @@ class ViewAddButton extends StatelessWidget {
     required this.parentViewId,
     required this.onEditing,
     required this.onSelected,
+    this.isHovered = false,
   });
 
   final String parentViewId;
@@ -27,6 +28,7 @@ class ViewAddButton extends StatelessWidget {
     bool openAfterCreated,
     bool createNewView,
   ) onSelected;
+  final bool isHovered;
 
   List<PopoverAction> get _actions {
     return [
@@ -57,7 +59,10 @@ class ViewAddButton extends StatelessWidget {
       buildChild: (popover) {
         return FlowyIconButton(
           width: 24,
-          icon: const FlowySvg(FlowySvgs.view_item_add_s),
+          icon: FlowySvg(
+            FlowySvgs.view_item_add_s,
+            color: isHovered ? Theme.of(context).colorScheme.onSurface : null,
+          ),
           onPressed: () {
             onEditing(true);
             popover.show();

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/hover.dart

@@ -153,10 +153,12 @@ class FlowyHoverContainer extends StatelessWidget {
             : style.backgroundColor,
         borderRadius: style.borderRadius,
       ),
-      child: Theme(
+      child: applyStyle
-        data: hoverTheme,
+          ? Theme(
-        child: child,
+              data: hoverTheme,
-      ),
+              child: child,
+            )
+          : child,
     );
   }
 }