Fix incorrect sidebar and sidebar item color

CHANGELOG.md

@@ -1,11 +1,18 @@
+## [2.0.3]
+### 🛠️ Fixed 🛠️
+* Fixed a bug that caused the sidebar to appear darker than intended.
+
+### 🔄 Updated 🔄
+* `SidebarItems` has now respects the user’s selected accent color and mimics the look of macOS’ sidebar items more closely.
+
 ## [2.0.2]
 ### 🛠️ Fixed 🛠️
 * Fixed images in generated documentation.
 
 ## [2.0.1]
 ### 🔄 Updated 🔄
 * `PushButton` has received a facelift. It now mimics the look and feel of native macOS buttons more closely.
-    * **Note:** As a result, its `pressedOpacity` property and the `PushButtonTheme` class have been deprecated.
+  * **Note:** As a result, its `pressedOpacity` property and the `PushButtonTheme` class have been deprecated.
 
 ## [2.0.0]
 ### 🚨 Breaking Changes 🚨

example/macos/Runner.xcodeproj/project.pbxproj

@@ -202,7 +202,7 @@
 			isa = PBXProject;
 			attributes = {
 				LastSwiftUpdateCheck = 0920;
-				LastUpgradeCheck = 1300;
+				LastUpgradeCheck = 1430;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					33CC10EC2044A3C60003C045 = {

example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1300"
+   LastUpgradeVersion = "1430"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

lib/src/layout/sidebar/sidebar_item.dart

@@ -43,7 +43,7 @@ class SidebarItem with Diagnosticable {
   final Color? unselectedColor;
 
   /// The [shape] property specifies the outline (border) of the
-  /// decoration. The shape must not be null. It's used alonside
+  /// decoration. The shape must not be null. It's used alongside
   /// [selectedColor].
   final ShapeBorder? shape;
 

lib/src/layout/sidebar/sidebar_items.dart

@@ -1,4 +1,5 @@
 import 'package:macos_ui/macos_ui.dart';
+import 'package:macos_ui/src/enums/accent_color.dart';
 import 'package:macos_ui/src/library.dart';
 
 const Duration _kExpand = Duration(milliseconds: 200);
@@ -79,7 +80,8 @@ class SidebarItems extends StatelessWidget {
 
   /// The color to paint the item when it's selected.
   ///
-  /// If null, [MacosThemeData.primaryColor] is used.
+  /// If null, the color is chosen automatically based on the user’s selected
+  /// system accent color and whether the sidebar is in the main window.
   final Color? selectedColor;
 
   /// The color to paint the item when it's unselected.
@@ -97,6 +99,21 @@ class SidebarItems extends StatelessWidget {
   /// Defaults to [SystemMouseCursors.basic].
   final MouseCursor? cursor;
 
+  /// The user’s selected system accent color.
+  AccentColor get _accentColor =>
+      AccentColorListener.instance.currentAccentColor ?? AccentColor.blue;
+
+  /// Returns the sidebar item’s selected color.
+  Color _getColor(BuildContext context) {
+    final isMainWindow = WindowMainStateListener.instance.isMainWindow;
+
+    return _ColorProvider.getSelectedColor(
+      accentColor: _accentColor,
+      isDarkModeEnabled: MacosTheme.of(context).brightness.isDark,
+      isWindowMain: isMainWindow,
+    );
+  }
+
   List<SidebarItem> get _allItems {
     List<SidebarItem> result = [];
     for (var element in items) {
@@ -117,39 +134,50 @@ class SidebarItems extends StatelessWidget {
     final theme = MacosTheme.of(context);
     return MacosIconTheme.merge(
       data: const MacosIconThemeData(size: 20),
-      child: _SidebarItemsConfiguration(
-        selectedColor: selectedColor ?? theme.primaryColor,
-        unselectedColor: unselectedColor ?? MacosColors.transparent,
-        shape: shape ?? _defaultShape,
-        itemSize: itemSize,
-        child: ListView(
-          controller: scrollController,
-          physics: const ClampingScrollPhysics(),
-          padding: EdgeInsets.all(10.0 - theme.visualDensity.horizontal),
-          children: List.generate(items.length, (index) {
-            final item = items[index];
-            if (item.disclosureItems != null) {
-              return MouseRegion(
-                cursor: cursor!,
-                child: _DisclosureSidebarItem(
-                  item: item,
-                  selectedItem: _allItems[currentIndex],
-                  onChanged: (item) {
-                    onChanged(_allItems.indexOf(item));
-                  },
+      child: StreamBuilder(
+        stream: AccentColorListener.instance.onChanged,
+        builder: (context, _) {
+          return StreamBuilder<bool>(
+            stream: WindowMainStateListener.instance.onChanged,
+            builder: (context, _) {
+              return _SidebarItemsConfiguration(
+                selectedColor: selectedColor ?? _getColor(context),
+                unselectedColor: unselectedColor ?? MacosColors.transparent,
+                shape: shape ?? _defaultShape,
+                itemSize: itemSize,
+                child: ListView(
+                  controller: scrollController,
+                  physics: const ClampingScrollPhysics(),
+                  padding:
+                      EdgeInsets.all(10.0 - theme.visualDensity.horizontal),
+                  children: List.generate(items.length, (index) {
+                    final item = items[index];
+                    if (item.disclosureItems != null) {
+                      return MouseRegion(
+                        cursor: cursor!,
+                        child: _DisclosureSidebarItem(
+                          item: item,
+                          selectedItem: _allItems[currentIndex],
+                          onChanged: (item) {
+                            onChanged(_allItems.indexOf(item));
+                          },
+                        ),
+                      );
+                    }
+                    return MouseRegion(
+                      cursor: cursor!,
+                      child: _SidebarItem(
+                        item: item,
+                        selected: _allItems[currentIndex] == item,
+                        onClick: () => onChanged(_allItems.indexOf(item)),
+                      ),
+                    );
+                  }),
                 ),
               );
-            }
-            return MouseRegion(
-              cursor: cursor!,
-              child: _SidebarItem(
-                item: item,
-                selected: _allItems[currentIndex] == item,
-                onClick: () => onChanged(_allItems.indexOf(item)),
-              ),
-            );
-          }),
-        ),
+            },
+          );
+        },
       ),
     );
   }
@@ -497,3 +525,74 @@ class __DisclosureSidebarItemState extends State<_DisclosureSidebarItem>
     );
   }
 }
+
+class _ColorProvider {
+  /// Returns the selected color based on the provided parameters.
+  static Color getSelectedColor({
+    required AccentColor accentColor,
+    required bool isDarkModeEnabled,
+    required bool isWindowMain,
+  }) {
+    if (isDarkModeEnabled) {
+      if (!isWindowMain) {
+        return const MacosColor.fromRGBO(76, 78, 65, 1.0);
+      }
+
+      switch (accentColor) {
+        case AccentColor.blue:
+          return const MacosColor.fromRGBO(22, 105, 229, 0.749);
+
+        case AccentColor.purple:
+          return const MacosColor.fromRGBO(204, 45, 202, 0.749);
+
+        case AccentColor.pink:
+          return const MacosColor.fromRGBO(229, 74, 145, 0.749);
+
+        case AccentColor.red:
+          return const MacosColor.fromRGBO(238, 64, 68, 0.749);
+
+        case AccentColor.orange:
+          return const MacosColor.fromRGBO(244, 114, 0, 0.749);
+
+        case AccentColor.yellow:
+          return const MacosColor.fromRGBO(233, 176, 0, 0.749);
+
+        case AccentColor.green:
+          return const MacosColor.fromRGBO(76, 177, 45, 0.749);
+
+        case AccentColor.graphite:
+          return const MacosColor.fromRGBO(129, 129, 122, 0.824);
+      }
+    }
+
+    if (!isWindowMain) {
+      return const MacosColor.fromRGBO(213, 213, 208, 1.0);
+    }
+
+    switch (accentColor) {
+      case AccentColor.blue:
+        return const MacosColor.fromRGBO(9, 129, 255, 0.749);
+
+      case AccentColor.purple:
+        return const MacosColor.fromRGBO(162, 28, 165, 0.749);
+
+      case AccentColor.pink:
+        return const MacosColor.fromRGBO(234, 81, 152, 0.749);
+
+      case AccentColor.red:
+        return const MacosColor.fromRGBO(220, 32, 40, 0.749);
+
+      case AccentColor.orange:
+        return const MacosColor.fromRGBO(245, 113, 0, 0.749);
+
+      case AccentColor.yellow:
+        return const MacosColor.fromRGBO(240, 180, 2, 0.749);
+
+      case AccentColor.green:
+        return const MacosColor.fromRGBO(66, 174, 33, 0.749);
+
+      case AccentColor.graphite:
+        return const MacosColor.fromRGBO(174, 174, 167, 0.847);
+    }
+  }
+}