feat: order dark mode; refreshed color palette

src/styles/global.scss

@@ -1,8 +1,28 @@
 @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;600&display=swap');
 
-$bgCol: #313638;
+$bgCol: #141414;
+$bgColLighter: #292929;
+$bgColDarker: #080808;
 $accentCol: #ff6060;
 $warnCol: #ffe02e;
+$whiteDimmerCol: #ccc;
+
+// Global scrollbar style
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+::-webkit-scrollbar-track {
+  background: #333;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
 
 body,
 html {
@@ -46,17 +66,20 @@ button {
 button.g-button {
   text-align: center;
   color: white;
+  transition:
+    color 100ms ease-in-out,
+    background-color 100ms ease-in-out;
 
   &.action {
-    border: 2px solid white;
+    background-color: $bgColDarker;
     padding: 0.5em;
 
     &:focus-visible {
-      border: 2px solid $accentCol;
+      outline: 2px solid $accentCol;
     }
 
-    &:hover {
-      color: $accentCol;
+    &:hover:not([data-disabled='true']) {
+      background-color: $bgColLighter;
     }
   }
 
@@ -82,7 +105,6 @@ button.g-button {
 
   &.text {
     padding: 0;
-    color: #000;
 
     &:focus-visible {
       color: $accentCol;
@@ -109,8 +131,19 @@ select {
   border-radius: 0.3em;
   text-align: center;
 
-  &:hover {
-    border: 2px solid $accentCol;
+  border: 2px solid #888;
+  color: white;
+  outline: none;
+
+  margin: 0;
+  padding: 0.15em;
+
+  &[disabled] {
+    color: gray;
+  }
+
+  &:focus-visible {
+    border-color: $accentCol;
   }
 }
 
@@ -123,23 +156,6 @@ ul {
   text-align: center;
 }
 
-// Global scrollbar style
-::-webkit-scrollbar {
-  width: 10px;
-}
-
-::-webkit-scrollbar-track {
-  background: #333;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #888;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-
 // Modal
 .g-modal {
   position: fixed;