use solarized as color scheme

ui/src/App.svelte

@@ -35,7 +35,7 @@
 
 <style global lang="scss">
   @use "normalize.css/normalize.css";
-  @use "styles/colors";
+  @use "styles/colors-app";
   @use "styles/fonts";
 
   html,

ui/src/components/utils/IconButton.svelte

@@ -25,6 +25,6 @@
   .active,
   button:hover {
     opacity: 1;
-    color: var(--active-color, var(--primary-lightest));
+    color: var(--active-color, var(--primary));
   }
 </style>

ui/src/components/utils/Input.svelte

@@ -31,7 +31,7 @@
 
     transition: box-shadow .25s;
     &.focused {
-      box-shadow: 0 0 2px 3px var(--primary-lightest);
+      box-shadow: 0 0 2px 3px var(--primary);
     }
   }
 

ui/src/components/utils/ProgessBar.svelte

@@ -20,7 +20,7 @@
   }
 
   .value {
-    background: var(--primary-lightest);
+    background: var(--primary);
     height: 100%;
     width: var(--value);
     transition: width 0.2s ease;

ui/src/components/widgets/Table.svelte

@@ -320,19 +320,20 @@ import Input from "../utils/Input.svelte";
 </table>
 
 <style lang="scss" scoped>
+  @use "../../styles/colors";
+
   table {
     width: 100%;
     table-layout: fixed;
 
     border-spacing: 0.5em 0;
 
-    tr {
-      $active-color: hsl(22, 70%, 40%);
+    tr {      
       &.left-active {
         td:first-child {
           background: linear-gradient(
             90deg,
-            $active-color 0%,
+            colors.$orange 0%,
             transparent 100%
           );
         }
@@ -343,7 +344,7 @@ import Input from "../utils/Input.svelte";
           background: linear-gradient(
             90deg,
             transparent 0%,
-            $active-color 100%
+            colors.$orange 100%
           );
         }
       }

ui/src/styles/colors-app.scss

@@ -0,0 +1,93 @@
+@use "colors";
+
+@mixin rebase(
+    $rebase03,
+    $rebase02,
+    $rebase01,
+    $rebase00,
+    $rebase0,
+    $rebase1,
+    $rebase2,
+    $rebase3
+  ) {
+    --foreground: #{$rebase0};
+    --foreground-lighter: #{$rebase1};
+    --background: #{$rebase03};
+    --background-emph: #{$rebase02};
+    --primary: #{colors.$blue};
+  
+    background-color: $rebase03;
+    color: $rebase0;
+  }
+  
+  @mixin accentize($accent) {
+    a,
+    a:active,
+    a:visited,
+    code.url {
+      color: $accent;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: $accent;
+    }
+  }
+  
+  html {
+    @include rebase(
+      colors.$base3,
+      colors.$base2,
+      colors.$base1,
+      colors.$base0,
+      colors.$base00,
+      colors.$base01,
+      colors.$base02,
+      colors.$base03
+    );
+  }
+  
+  @media (prefers-color-scheme: dark) {
+    html {
+      @include rebase(
+        colors.$base03,
+        colors.$base02,
+        colors.$base01,
+        colors.$base00,
+        colors.$base0,
+        colors.$base1,
+        colors.$base2,
+        colors.$base3
+      );
+    }
+  }
+  
+  html,
+  body {
+    color: var(--foreground);
+    background: var(--background);
+  
+    * {
+      color: var(--foreground);
+    }
+  
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: var(--foreground-lighter);
+      border-color: var(--foreground);
+    }
+  
+    a,
+    a:active,
+    a:visited {
+      color: var(--foreground-lighter);
+    }
+  }
+  

ui/src/styles/colors.scss

@@ -1,45 +1,17 @@
-@use "sass:color";
-
-$primary: #2c3e50;
-$primary-lighter: #3a5068;
-$primary-lightest: #3a92f0;
-$background: white;
-
-html {
-  --foreground: #{$primary};
-  --foreground-lighter: #{$primary-lighter};
-  --background: #{$background};
-  --background-emph: #{color.scale($background, $lightness: -4%)};
-  --primary-lightest: #{$primary-lightest};
-  --error: darkred;
-  --warning: orange;
-
-  b {
-    color: red;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    --foreground: #{$background};
-    --foreground-lighter: #{color.scale($background, $lightness: -50%)};
-    --background: #{$primary};
-    --background-emph: #{$primary-lighter};
-    --primary-lightest: #{$primary-lightest};
-    --error: red;
-  }
-}
-
-html,
-body {
-  color: var(--foreground);
-  background: var(--background);
-}
-
-a {
-  color: var(--foreground);
-}
-
-a:visited {
-  color: var(--foreground);
-}
+// https://ethanschoonover.com/solarized/
+$base03: #002b36;
+$base02: #073642;
+$base01: #586e75;
+$base00: #657b83;
+$base0: #8a9b9c;
+$base1: #93a1a1;
+$base2: #eee8d5;
+$base3: #fdf6e3;
+$yellow: #b58900;
+$orange: #cb4b16;
+$red: #dc322f;
+$magenta: #d33682;
+$violet: #6c71c4;
+$blue: #268bd2;
+$cyan: #2aa198;
+$green: #859900;