Migrate to native Node.js file access and improve UI

packages/web/src/index.scss

@@ -12,34 +12,48 @@ body {
   font-size: 15px;
   font-family: -apple-system, BlinkMacSystemFont, system-ui, "Roboto", "Oxygen", "Ubuntu",
     "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-
+}
+:root {
+  --page-background: #fff;
   --color: #000;
   --titlebar-height: 46px;
   --titlebar-height: 0px;
   --label-background: #ddd;
   --selected-background: #c9c9c9;
   --hover-background: #ddd;
+  --border-color: #ddd;
   --monospace: D2Coding, source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
 
+@media (prefers-color-scheme: light) {
+  :root.mac {
+    --page-background: #f7f7f7;
+  }
+}
+
 html,
 body,
-#root {
+#app {
   height: 100%;
 }
 
+#app {
+  background-color: var(--page-background);
+  position: relative;
+}
+
 @media (prefers-color-scheme: dark) {
-  body {
-    color: #fff;
+  :root {
     --color: #fff;
     --label-background: #353535;
     --selected-background: #353535;
-    --selected-background: #15539e;
+    --border-color: #333;
     --hover-background: #222;
+    --page-background: #292929;
   }
-  #root {
-    background-color: #292929;
+  body {
+    color: #fff;
   }
 }
 
@@ -96,18 +110,3 @@ button[type="submit"] {
 select {
   padding: 5px 10px;
 }
-
-::-webkit-scrollbar {
-  width: 7px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  @include scheme(background, #8883, #6663);
-  border-radius: 6px;
-}
-::-webkit-scrollbar-thumb:hover {
-  transition: 0.1s;
-  @include scheme(background, #ddd, #555);
-}