done. Under final confirmation.

packages/app/src/styles/_page-tree.scss

@@ -53,6 +53,7 @@ $grw-pagetree-item-padding-left: 10px;
         min-width: 28px;
         padding: 0.1rem 0.5rem;
         font-size: 12px;
+        font-weight: 500;
       }
     }
   }

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

@@ -277,20 +277,17 @@ ul.pagination {
   // Pagetree
   .grw-pagetree {
     @include override-list-group-item-for-pagetree(
-      $gray-200,
-      $bgcolor-sidebar-list-group,
       $gray-200,
       lighten($bgcolor-sidebar-context, 8%),
+      lighten($bgcolor-sidebar-context, 15%),
+      $gray-500,
       $gray-200,
-      lighten($bgcolor-sidebar-context, 15%)
+      lighten($bgcolor-sidebar-context, 18%),
+      lighten($bgcolor-sidebar-context, 24%)
     );
     .grw-pagetree-triangle-btn {
       @include button-outline-svg-icon-variant($secondary, $gray-200);
     }
-    .grw-count-badge {
-      color: $gray-400;
-      background: lighten($bgcolor-sidebar-context, 15%);
-    }
     .btn-page-item-control {
       @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
       @include hover() {

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

@@ -183,19 +183,16 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
   .grw-pagetree {
     @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
+      darken($bgcolor-sidebar-context, 5%),
+      darken($bgcolor-sidebar-context, 12%),
+      $gray-500,
+      $gray-600,
+      darken($bgcolor-sidebar-context, 15%),
+      darken($bgcolor-sidebar-context, 24%)
     );
     .grw-pagetree-triangle-btn {
       @include button-outline-svg-icon-variant($gray-400, $primary);
     }
-    .grw-count-badge {
-      color: $gray-500;
-      background: $gray-200;
-    }
   }
   .private-legacy-pages-link {
     &:hover {

packages/app/src/styles/theme/christmas.scss

@@ -185,15 +185,15 @@ html[dark] {
  */
   .grw-sidebar {
     // 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,
-        $bgcolor-list-hover
-      );
-    }
+    // .grw-pagetree {
+    //   @include override-list-group-item-for-pagetree(
+    //     $color-list,
+    //     $bgcolor-sidebar-list-group,
+    //     $color-list-hover,
+    //     $bgcolor-list-hover,
+    //     $color-list-active,
+    //     $bgcolor-list-hover
+    //   );
+    // }
   }
 }

packages/app/src/styles/theme/default.scss

@@ -170,7 +170,7 @@ html[dark] {
   $color-resize-button-hover: white;
   $bgcolor-resize-button-hover: darken($bgcolor-resize-button, 5%);
   // Sidebar contents
-  $bgcolor-sidebar-context: lighten($bgcolor-global, 10%);
+  $bgcolor-sidebar-context: lighten($bgcolor-global, 8%);
   $color-sidebar-context: $color-global;
   // Sidebar list group
   $bgcolor-sidebar-list-group: #1c2a3e; // optional

packages/app/src/styles/theme/future.scss

@@ -111,14 +111,14 @@ html[dark] {
   .grw-sidebar {
     // 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,
-        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%)
+      // );
     }
   }
 }

packages/app/src/styles/theme/island.scss

@@ -123,14 +123,14 @@ html[dark] {
   .grw-sidebar {
     // 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,
-        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%)
+      // );
       .grw-pagetree-triangle-btn {
         @include button-outline-svg-icon-variant($gray-400, $bgcolor-sidebar);
       }

packages/app/src/styles/theme/kibela.scss

@@ -114,14 +114,14 @@ html[dark] {
   .grw-sidebar {
     // 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,
-        lighten($bgcolor-list-active, 55%)
-      );
+      // @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-active, 55%)
+      // );
     }
   }
 }

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

@@ -18,14 +18,7 @@
   }
 }
 
-@mixin override-list-group-item-for-pagetree(
-  $color,
-  $bgcolor,
-  $color-hover: $color,
-  $bgcolor-hover: $bgcolor,
-  $color-active: $color,
-  $bgcolor-active: $bgcolor
-) {
+@mixin override-list-group-item-for-pagetree($color, $bgcolor-hover, $bgcolor-active, $btn-color, $btn-color-hover, $btn-bgcolor-hover, $btn-bgcolor-active) {
   .grw-pagetree-is-over {
     background: $bgcolor-hover;
   }
@@ -34,6 +27,25 @@
     background-color: transparent;
     border-color: $border-color-global;
 
+    .grw-count-badge {
+      color: $btn-color;
+      background: $bgcolor-hover;
+    }
+
+    .btn.btn-page-item-control {
+      color: $btn-color;
+      background-color: transparent;
+      @include hover() {
+        color: $btn-color-hover;
+        background-color: $btn-bgcolor-hover;
+      }
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active {
+        color: $btn-color-hover;
+        background-color: $btn-bgcolor-active;
+      }
+    }
+
     &.grw-pagetree-current-page-item {
       background: $bgcolor-hover;
     }
@@ -41,9 +53,15 @@
     &.list-group-item-action {
       &:hover {
         background-color: $bgcolor-hover;
+        .grw-count-badge {
+          background: $bgcolor-active;
+        }
       }
       &:active {
         background-color: $bgcolor-active;
+        .grw-count-badge {
+          background: $bgcolor-active;
+        }
       }
     }
   }