apply mixin to dark theme

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -257,32 +257,15 @@ ul.pagination {
 
   // Pagetree
   .grw-pagetree {
-    .grw-pagetree-is-over {
-      background: $bgcolor-list-hover;
-    }
-    .list-group-item {
-      &.grw-pagetree-is-target {
-        background: $bgcolor-list-hover;
-      }
-
-      .grw-pagetree-count {
-        background: $bgcolor-sidebar-list-group;
-      }
-
-      .grw-pagetree-button {
-        &:not(:hover) {
-          svg {
-            fill: $gray-500;
-          }
-        }
-      }
-      &:hover {
-        background: $bgcolor-list-hover;
-      }
-      &:active {
-        background: lighten($bgcolor-list-hover, 5%);
-      }
-    }
+    @include override-list-group-item-for-pagetree(
+      $color-list,
+      $bgcolor-sidebar-list-group,
+      $color-list-hover,
+      $bgcolor-list-hover,
+      $color-list-active,
+      lighten($bgcolor-list-hover, 5%),
+      $gray-500
+    );
   }
 }
 

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -170,7 +170,15 @@ $border-color: $border-color-global;
 
   // Pagetree
   .grw-pagetree {
-    @include override-list-group-item-for-pagetree($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, red);
+    @include override-list-group-item-for-pagetree(
+      $color-list,
+      $bgcolor-sidebar-list-group,
+      $color-list-hover,
+      $bgcolor-list-hover,
+      $color-list-active,
+      $bgcolor-list-active,
+      $gray-400
+    );
   }
 }
 

packages/app/src/styles/theme/mixins/_list-group.scss

@@ -24,7 +24,8 @@
   $color-hover: $color,
   $bgcolor-hover: $bgcolor,
   $color-active: $color,
-  $bgcolor-active: $bgcolor
+  $bgcolor-active: $bgcolor,
+  $button-color
 ) {
   .grw-pagetree-is-over {
     background: $bgcolor-hover;
@@ -43,7 +44,7 @@
     .grw-pagetree-button {
       &:not(:hover) {
         svg {
-          fill: $gray-400;
+          fill: $button-color;
         }
       }
     }