set .pagetree-item styles

apps/app/src/components/Sidebar/PageTree/Item.module.scss

@@ -0,0 +1,37 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+// TODO: relocate following styles into PageTreeItem.mdoule.scss after refactoring
+// https://redmine.weseek.co.jp/issues/127544
+.pagetree-item :global {
+  .list-group-item {
+    --bs-list-group-bg: transparent;
+  }
+}
+@include bs.color-mode(light) {
+  .pagetree-item :global {
+    .list-group-item-action {
+      --bs-list-group-action-hover-bg: var(--grw-highlight-200);
+      --bs-list-group-action-active-bg: var(--grw-highlight-400);
+
+      .btn-page-item-control {
+        --bs-btn-bg: transparent;
+        --bs-btn-hover-bg: var(--grw-highlight-400);
+        --bs-btn-active-bg: var(--grw-highlight-600);
+      }
+    }
+  }
+}
+@include bs.color-mode(dark) {
+  .pagetree-item :global {
+    .list-group-item-action {
+      --bs-list-group-action-hover-bg: var(--grw-highlight-800);
+      --bs-list-group-action-active-bg: var(--grw-highlight-800);
+
+      .btn-page-item-control {
+        --bs-btn-bg: transparent;
+        --bs-btn-hover-bg: var(--grw-highlight-700);
+        --bs-btn-active-bg: var(--grw-highlight-800);
+      }
+    }
+  }
+}

apps/app/src/components/Sidebar/PageTree/Item.tsx

@@ -38,6 +38,9 @@ import { PageItemControl } from '../../Common/Dropdown/PageItemControl';
 import { ItemNode } from './ItemNode';
 
 
+import styles from './Item.module.scss';
+
+
 const logger = loggerFactory('growi:cli:Item');
 
 
@@ -424,7 +427,9 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
       id={`pagetree-item-${page._id}`}
       data-testid="grw-pagetree-item-container"
       className={`grw-pagetree-item-container ${isOver ? 'grw-pagetree-is-over' : ''}
-    ${shouldHide ? 'd-none' : ''}`}
+        pagetree-item ${styles['pagetree-item']}
+        ${shouldHide ? 'd-none' : ''}`
+      }
     >
       <li
         ref={(c) => { drag(c); drop(c) }}