style: update scrollbar colors for light mode and fix some sidebar light mode issues

Author: IslemDjd

packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css

@@ -55,14 +55,14 @@
           first:before:left-0
           first:before:h-20
           first:before:w-4
-          first:before:bg-white
+          first:before:bg-transparent
           first:before:content-['']
           last:after:absolute
           last:after:left-0
           last:after:top-[calc(50%+0.25rem)]
           last:after:h-20
           last:after:w-4
-          last:after:bg-white
+          last:after:bg-transparent
           last:after:content-['']
           first:dark:before:bg-transparent
           last:dark:after:bg-transparent;

packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css

@@ -17,7 +17,7 @@
 
   &:not(.active):hover {
     /* Apply hover background to the full item width */
-    @apply bg-neutral-100
+    @apply bg-neutral-200
       dark:bg-neutral-900;
 
     /* Ensure text colors contrast with hover background */
@@ -33,7 +33,7 @@
     }
 
     .progressionIcon {
-      @apply fill-green-200
+      @apply fill-green-400
         dark:fill-green-300;
     }
   }
@@ -49,8 +49,8 @@
 
   .progressionIcon {
     @apply shrink-0
-      fill-neutral-200
-      stroke-white
+      fill-neutral-600
+      stroke-neutral-300
       stroke-[4]
       dark:fill-neutral-800
       dark:stroke-neutral-950;
@@ -69,7 +69,7 @@
 
     /* On hover, use full-width background on the item (set above) */
     &:not(.active):hover {
-      @apply bg-neutral-100
+      @apply bg-neutral-200
         dark:bg-neutral-900;
     }
 

packages/ui-components/src/styles/index.css

@@ -39,7 +39,15 @@
 @custom-variant aria-current (&[aria-current="page"]);
 
 * {
-  scrollbar-color: var(--color-green-600, #417e38) var(--color-neutral-900, #2c3437); /* thumb color, track color */
-
+  scrollbar-color: var(--color-green-600, #417e38)
+    var(--color-neutral-400, #2c3437); /* thumb color, track color */
   scrollbar-width: thin;
 }
+
+@media (prefers-color-scheme: dark) {
+  * {
+    scrollbar-color: var(--color-green-600, #417e38)
+      var(--color-neutral-900, #2c3437); /* thumb color, track color */
+    scrollbar-width: thin;
+  }
+}