adjustment

lib/ui/css/grid.scss

@@ -1,6 +1,6 @@
 @import "./functions/func.scss";
 
-.grid {
+.ui-grid {
     position: relative;
     box-sizing: border-box;
     display: flex;
@@ -52,14 +52,14 @@
         font-family: var(--font-family);
     }
 
-    >.grid-sizer {
+    >.ui-grid-sizer {
         position: absolute;
         white-space: nowrap;
         font-weight: bold;
         visibility: hidden;
     }
 
-    >.grid-header {
+    >.ui-grid-header {
         width: 100%;
         min-width: 100%;
         margin: 0;
@@ -187,20 +187,20 @@
         }
     }
 
-    >.grid-body {
+    >.ui-grid-body {
         flex: 1 1 auto;
         overflow: auto;
         color: var(--cell-fore-color);
         @include scrollbar();
 
-        .grid-body-content {
+        .ui-grid-body-content {
             position: absolute;
             min-width: 100%;
             table-layout: fixed;
             border-collapse: collapse;
             border-spacing: 0;
 
-            >.grid-row {
+            >.ui-grid-row {
                 line-height: var(--line-height);
                 white-space: nowrap;
                 background-color: var(--row-bg-color);
@@ -254,11 +254,11 @@
                         @include scrollbar();
                     }
 
-                    .checkbox-wrapper {
+                    .ui-check-wrapper {
                         display: flex;
                         justify-content: center;
 
-                        .check-box-inner {
+                        .ui-check-inner {
 
                             &,
                             >svg {
@@ -267,22 +267,22 @@
                         }
                     }
 
-                    .drop-wrapper {
+                    .ui-drop-wrapper {
                         height: var(--row-height);
                         width: 100%;
                         display: flex;
                         flex-direction: column;
 
-                        >.drop-header {
+                        >.ui-drop-header {
                             border: none;
                             height: 100%;
 
-                            >.drop-text {
+                            >.ui-drop-text {
                                 padding: var(--spacing-cell);
                             }
                         }
 
-                        >.drop-box {
+                        >.ui-drop-box {
                             top: calc(var(--row-height) + 2px);
 
                             &.slide-up {
@@ -323,7 +323,7 @@
             }
         }
 
-        .grid-hover-holder {
+        .ui-grid-hover-holder {
             box-sizing: border-box;
             position: absolute;
             line-height: var(--line-height);
@@ -343,7 +343,7 @@
         }
     }
 
-    >.grid-loading {
+    >.ui-grid-loading {
         position: absolute;
         @include inset(0, 0, 0, 0);
         visibility: hidden;
@@ -367,4 +367,23 @@
             }
         }
     }
+}
+
+@media (prefers-color-scheme: dark) {
+    .ui-grid {
+        --hover-bg-color: yellow;
+        --header-border-color: #525456;
+        --header-bg-color: #050505;
+        --header-fore-color: #fff;
+        --cell-border-color: #0f0f0f;
+        --cell-fore-color: #ccc;
+        --dark-border-color: #999;
+        --split-border-color: #4c4c4c;
+        --dragger-bg-color: #000;
+        --dragger-cursor-color: #ccc;
+        --row-bg-color: #000;
+        --row-active-bg-color: #050505;
+        --row-selected-bg-color: #190d04;
+        --text-disabled-color: gray;
+    }
 }