style: define light and dark mode color

apps/app/src/components/Sidebar/SidebarNav/PersonalDropdown.module.scss

@@ -1,22 +1,54 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
 
+@include bs.color-mode(light) {
+  .personal-dropdown-header :global {
+    .username,
+    .item-icon,
+    .item-text,
+    .item-text-email {
+      color: var(--bs-gray-600);
+    }
+  }
+
+  .personal-dropdown-item :global {
+    .item-icon,
+    .item-text {
+      color: var(--bs-gray-600);
+    }
+  }
+}
+
+@include bs.color-mode(dark) {
+  .personal-dropdown-header :global {
+    .username,
+    .item-icon,
+    .item-text,
+    .item-text-email {
+      color: var(--bs-gray-500);
+    }
+  }
+
+  .personal-dropdown-item :global {
+    .item-icon,
+    .item-text {
+      color: var(--bs-gray-500);
+    }
+  }
+}
 
 .personal-dropdown-header :global {
   .username {
     font-size: 16px;
-    color: var(--bs-gray-600);
   }
   .item-icon {
     padding-bottom: 0px;
     font-size: 16px;
-    color: var(--bs-gray-600);
   }
   .item-text {
     font-size: 12px;
-    color: var(--bs-gray-600);
   }
   .item-text-email {
     font-size: 10.5px;
-    color: var(--bs-gray-600);
   }
 }
 
@@ -24,10 +56,8 @@
   .item-icon {
     padding-bottom: 0px;
     font-size: 16px;
-    color: var(--bs-gray-600);
   }
   .item-text {
     font-size: 14px;
-    color: var(--bs-gray-600);
   }
 }