adjustment

style.scss

@@ -13,8 +13,8 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color: var(--color);
+  background-color: var(--bg-color);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -22,7 +22,7 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 
-  --border-color: #ccc;
+  --split-border-color: #ccc;
   --hover-color: #666;
   --serif-font-family: 'Segoe UI Variable Display', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   --mono-font-family: 'FantasqueSansMono NFM', 'Cascadia Code', 'PT Mono', Consolas, 'Courier New', monospace;
@@ -96,8 +96,8 @@ button {
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
+  // font-size: 1em;
+  // font-weight: 500;
   font-family: inherit;
   background-color: #1a1a1a;
   cursor: pointer;
@@ -128,7 +128,7 @@ h1 {
 #directory {
   width: 200px;
   padding: 2rem;
-  border-right: 1px solid var(--border-color);
+  border-right: 1px solid var(--split-border-color);
   flex: 0 0 auto;
 
   >ul {
@@ -191,8 +191,8 @@ h1 {
   align-items: center;
 }
 
-.checkbox-wrapper {
-  .check-box-inner {
+.ui-check-wrapper {
+  .ui-check-inner {
     width: 14px;
     height: 14px;
   }
@@ -218,9 +218,7 @@ h1 {
 
 @media (prefers-color-scheme: light) {
   :root {
-    color: #213547;
-    background-color: #ffffff;
-    --border-color: #666;
+    --split-border-color: #666;
     --hover-color: #eee;
   }