Merge branch 'imprv/84556-replace-dom-with-bootstrap-class-and-apply-suitable-colors' of https://github.com/weseek/growi into imprv/84556-replace-dom-with-bootstrap-class-and-apply-suitable-colors

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

@@ -2,7 +2,7 @@
 $color-list: $color-global !default;
 $bgcolor-list: $bgcolor-global !default;
 $color-list-hover: $color-global !default;
-$bgcolor-list-hover: lighten($bgcolor-global, 3%) !default;
+$bgcolor-list-hover: lighten($bgcolor-global, 8%) !default;
 $color-list-active: $color-reversal !default;
 $bgcolor-list-active: $primary !default;
 $bgcolor-subnav: lighten($bgcolor-global, 3%) !default;

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

@@ -109,4 +109,22 @@ html[dark] {
     color: #95abba;
     background-color: #1f1f22;
   }
+
+  /*
+ * GROWI Sidebar
+ */
+  .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%),
+        $gray-600
+      );
+    }
+  }
 }

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

@@ -36,7 +36,7 @@
     border-color: $border-color-global;
 
     &.grw-pagetree-is-target {
-      background: $bgcolor-hover;
+      background: $bgcolor-active;
     }
     .grw-pagetree-count {
       background: $bgcolor;

packages/app/src/styles/theme/mono-blue.scss

@@ -32,7 +32,7 @@ html[light] {
   // $color-list: $color-global;
   $bgcolor-list: transparent;
   $color-list-hover: $color-search;
-  $bgcolor-list-hover: darken($bgcolor-global, 3%);
+  $bgcolor-list-hover: lighten($primary, 70%);
   // $color-list-active: $color-reversal;
   // $bgcolor-list-active: $primary;
 

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

@@ -66,9 +66,9 @@ html[dark] {
   // $color-list: $color-global;
   $bgcolor-list: transparent;
   $color-list-hover: $gray-100;
-  $bgcolor-list-hover: darken($bgcolor-global, 3%);
+  $bgcolor-list-hover: lighten($primary, 40%);
   // $color-list-active: $color-reversal;
-  // $bgcolor-list-active: $primary;
+  $bgcolor-list-active: lighten($primary, 30%);
 
   // Table colors
   // $color-table: #; // optional