improve colors

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

@@ -251,6 +251,23 @@ ul.pagination {
   @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
 }
 
+// Pagetree
+.grw-pagetree {
+  .grw-pagetree-item {
+    .grw-triangle-icon {
+      svg {
+        fill: $gray-500;
+      }
+    }
+    &:hover {
+      background: $bgcolor-list-hover;
+    }
+    &:active {
+      background: lighten($bgcolor-list-hover, 5%);
+    }
+  }
+}
+
 /*
  * Popover
  */

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

@@ -168,6 +168,23 @@ $border-color: $border-color-global;
   @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
 }
 
+// Pagetree
+.grw-pagetree {
+  .grw-pagetree-item {
+    .grw-triangle-icon {
+      svg {
+        fill: $gray-400;
+      }
+    }
+    &:hover {
+      background: $bgcolor-list-hover;
+    }
+    &:active {
+      background: darken($bgcolor-list-hover, 5%);
+    }
+  }
+}
+
 /*
  * GROWI page list
  */

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

@@ -533,24 +533,6 @@ body.pathname-sidebar {
   }
 }
 
-// Pagetree
-.grw-pagetree {
-  .grw-pagetree-item {
-    .grw-triangle-icon {
-      svg {
-        fill: $gray-400;
-      }
-    }
-    // TODO: apply variable to　these bg-color  for each theme by 83526
-    &:hover {
-      background: lighten($primary, 65%);
-    }
-    &:active {
-      background: lighten($primary, 72%);
-    }
-  }
-}
-
 /*
  * GROWI Grid Edit Modal
  */