adjustment

lib/app/communications/style.scss

@@ -1,9 +1,9 @@
 @import "../../ui/css/functions/func.scss";
 
-.popup-mask .wrapper-edit-method {
+.ui-popup-mask .wrapper-edit-method {
     width: 100%;
 
-    .checkbox-wrapper {
+    .ui-check-wrapper {
         padding: 0 28px;
     }
 }
@@ -65,30 +65,6 @@
         }
     }
 
-    .image-check-box {
-        user-select: none;
-
-        >input[type="checkbox"] {
-            display: none;
-
-            &:checked~.unchecked {
-                display: none;
-            }
-
-            &:checked~.checked {
-                display: unset;
-            }
-        }
-
-        >.unchecked {
-            opacity: .5;
-        }
-
-        >.checked {
-            display: none;
-        }
-    }
-
     .title-bar {
         flex: 0 0 auto;
         padding: 5px 0 5px 10px;
@@ -278,7 +254,7 @@
                 font-size: var(--font-size);
                 align-self: flex-start;
 
-                .tooltip-wrapper>.tooltip-content {
+                .ui-tooltip-wrapper>.ui-tooltip-content {
                     font-weight: normal;
                 }
             }
@@ -349,12 +325,12 @@
         }
     }
 
-    .popup-mask {
-        .grid {
+    .ui-popup-mask {
+        .ui-grid {
             height: 100%;
             min-height: 120px;
 
-            >.grid-body .grid-body-content>.grid-row>td {
+            >.ui-grid-body .ui-grid-body-content>.ui-grid-row>td {
                 vertical-align: top;
 
                 .col-icon {
@@ -403,4 +379,13 @@
             }
         }
     }
+}
+
+@media (prefers-color-scheme: dark) {
+    .comm {
+        --dark-fore-color: #000;
+        --dark-fore-opacity-color: rgba(0, 0, 0, .4);
+        --strong-color: #ccc;
+        --light-color: #333;
+    }
 }