web: dark theme & coloring, border, focus fixes

web/src/components/save/Omnibox.svelte

@@ -93,7 +93,7 @@
 
     #input-container {
         display: flex;
-        box-shadow: 0 0 0 1.5px var(--gray) inset;
+        box-shadow: 0 0 0 1.5px var(--input-border) inset;
         border-radius: var(--border-radius);
         padding: 0 12px;
         align-items: center;

web/src/components/save/buttons/DownloadButton.svelte

@@ -100,7 +100,7 @@
         box-shadow: none;
         transform: none;
 
-        border-left: 1px var(--gray) solid;
+        border-left: 1.5px var(--input-border) solid;
         border-top-right-radius: var(--border-radius);
         border-bottom-right-radius: var(--border-radius);
     }

web/src/components/sidebar/Sidebar.svelte

@@ -59,7 +59,7 @@
     }
 
     #sidebar {
-        background: var(--secondary);
+        background: var(--sidebar-bg);
         height: 100vh;
         width: var(--sidebar-width);
         position: sticky;
@@ -94,14 +94,7 @@
             display: block;
             position: absolute;
             pointer-events: none;
-            background: linear-gradient(
+            background: var(--sidebar-mobile-gradient);
-                90deg,
-                rgba(0, 0, 0, 0.9) 0%,
-                rgba(0, 0, 0, 0) 4%,
-                rgba(0, 0, 0, 0) 50%,
-                rgba(0, 0, 0, 0) 96%,
-                rgba(0, 0, 0, 0.9) 100%
-            );
         }
 
         #sidebar-tabs {

web/src/components/sidebar/SidebarTab.svelte

@@ -25,14 +25,14 @@
         text-align: center;
         gap: 5px;
         padding: var(--padding) 5px;
-        color: var(--primary);
+        color: var(--sidebar-highlight);
         font-size: var(--sidebar-font-size);
         opacity: 0.8;
     }
 
     .sidebar-tab.active {
-        color: var(--secondary);
+        color: var(--sidebar-bg);
-        background: var(--primary);
+        background: var(--sidebar-highlight);
         opacity: 1;
     }
 
@@ -40,6 +40,16 @@
         opacity: 1;
     }
 
+    .sidebar-tab:focus-visible {
+        box-shadow: 0 0 0 1.5px var(--sidebar-highlight) inset;
+        outline: none;
+        z-index: 1;
+    }
+
+    .sidebar-tab.active:focus-visible {
+        box-shadow: 0 0 0 1.5px var(--sidebar-bg) inset;
+    }
+
     @media screen and (max-width: 535px) {
         .sidebar-tab {
             padding: 5px var(--padding);

web/src/routes/+layout.svelte

@@ -22,17 +22,62 @@
         --button-hover-transparent: rgba(0, 0, 0, 0.03);
         --button-stroke: rgba(0, 0, 0, 0.08);
 
+        --sidebar-bg: #000000;
+        --sidebar-highlight: #ffffff;
+
+        --input-border: #8d8d95;
+
         --padding: 12px;
         --border-radius: 11px;
 
         --sidebar-width: 80px;
         --sidebar-height-mobile: 50px;
         --sidebar-font-size: 11px;
+
+        --sidebar-mobile-gradient: linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.9) 0%,
+            rgba(0, 0, 0, 0) 4%,
+            rgba(0, 0, 0, 0) 50%,
+            rgba(0, 0, 0, 0) 96%,
+            rgba(0, 0, 0, 0.9) 100%
+        );
+    }
+
+    /* temporary switcher until theming is implemented, */
+    /* just so my eyes don't burn at night */
+    @media (prefers-color-scheme: dark) {
+        :global(:root) {
+            --primary: #000000;
+            --secondary: #e1e1e1;
+            --gray: #6e6e6e;
+
+            --button: #191919;
+            --button-hover: #2a2a2a;
+            --button-hover-transparent: rgba(225, 225, 225, 0.04);
+            --button-stroke: rgba(255, 255, 255, 0.08);
+
+            --sidebar-bg: #101010;
+            --sidebar-highlight: #f2f2f2;
+
+            --input-border: #383838;
+
+            --sidebar-mobile-gradient: linear-gradient(
+                90deg,
+                rgba(16, 16, 16, 0.9) 0%,
+                rgba(16, 16, 16, 0) 4%,
+                rgba(16, 16, 16, 0) 50%,
+                rgba(16, 16, 16, 0) 96%,
+                rgba(16, 16, 16, 0.9) 100%
+            );
+        }
     }
 
     :global(html),
     :global(body) {
         margin: 0;
+        background-color: var(--primary);
+        color: var(--secondary);
     }
 
     :global(*) {
@@ -73,12 +118,19 @@
         box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
     }
 
+    :global(button:focus-visible) {
+        box-shadow: 0 0 0 1.5px var(--secondary) inset;
+        outline: none;
+        z-index: 1;
+    }
+
     :global(button:active) {
         transform: scale(0.95);
     }
 
     :global(button:hover) {
         background-color: var(--button-hover);
+        z-index: 1;
     }
 
     :global(.center-column-container) {
@@ -100,6 +152,7 @@
         display: flex;
         overflow: scroll;
         padding: var(--padding);
+        background-color: var(--primary);
     }
 
     @media screen and (max-width: 535px) {