Organize bg-comment

apps/app/src/components/PageComment.module.scss

@@ -32,12 +32,6 @@
       --bs-btn-border-color: #{( bs.$gray-200 )};
       --bs-btn-hover-border-color: #{( bs.$gray-300 )};
     }
-
-    .bg-comment {
-      background-color: rgba( bs.$gray-200, 0.5 );
-      border: 1px solid bs.$gray-200;
-      backdrop-filter: blur(10px);
-    }
   }
 }
 
@@ -52,11 +46,5 @@
       --bs-btn-border-color: #{( bs.$gray-700 )};
       --bs-btn-hover-border-color: #{( bs.$gray-600 )};
     }
-
-    .bg-comment {
-      background-color: rgba( bs.$gray-800, 0.3 );
-      border: 1px solid bs.$gray-700;
-      backdrop-filter: blur(10px);
-    }
   }
 }

apps/app/src/components/PageComment/Comment.module.scss

@@ -11,6 +11,11 @@
 
     scroll-margin-top: var.$grw-scroll-margin-top-in-view;
 
+    // background
+    .bg-comment {
+      @extend %bg-comment;
+    }
+
     // user icon
     .picture {
       @extend %picture;

apps/app/src/components/PageComment/CommentEditor.module.scss

@@ -11,6 +11,11 @@
   .comment-form {
     position: relative;
 
+    // background
+    .bg-comment {
+      @extend %bg-comment
+    }
+
     // user icon
     .picture {
       @extend %picture;

apps/app/src/components/PageComment/_comment-inheritance.scss

@@ -27,3 +27,22 @@
 }
 
 $codemirror-default-height: 300px;
+
+
+// // Light mode color
+@include bs.color-mode(light) {
+  %bg-comment {
+    background-color: rgba( bs.$gray-200, 0.5 );
+    border: 1px solid bs.$gray-200;
+    backdrop-filter: blur(10px);
+  }
+}
+
+// // Dark mode color
+@include bs.color-mode(dark) {
+  %bg-comment {
+    background-color: rgba( bs.$gray-800, 0.3 );
+    border: 1px solid bs.$gray-700;
+    backdrop-filter: blur(10px);
+  }
+}