diff --git a/src/angular/frontend/src/color-theme.scss b/src/angular/frontend/src/color-theme.scss
index c5c0ada..223322e 100644
--- a/src/angular/frontend/src/color-theme.scss
+++ b/src/angular/frontend/src/color-theme.scss
@@ -8,9 +8,33 @@ $success-color: hsl(110, 60%, 50%);
 $warn-color: hsl(50, 70%, 50%);
 $danger-color: hsl(10, 80%, 50%);
 
-@mixin set-color-shades($name, $color, $step: 10) {
-  @for $i from 1 through (100/$step)-1 {
-    --#{$name}-#{$i * $step}: hsl(#{color.hue($color)}, #{color.saturation($color)}, #{$i * $step}%);
+@mixin set-color-shades($name, $color, $step: 10, $padded: false, $reverse: false) {
+  $from: 1;
+  $to: 100/$step;
+
+  @if $padded {
+    $from: 0;
+  }
+
+  @if not $padded {
+    $to: $to - 1;
+  }
+
+  @for $i from $from through $to {
+
+    $index: $i;
+
+    @if $reverse {
+      @if $padded {
+        $index: ($to - $i);
+      } @else {
+        $index: ($to - $i) + 1;
+      }
+    }
+
+    @debug $reverse, $index, $i, $to;
+
+    --#{$name}-#{$i * $step}: hsl(#{color.hue($color)}, #{color.saturation($color)}, #{$index * $step}%);
   }
 }
 
@@ -37,7 +61,7 @@ $danger-color: hsl(10, 80%, 50%);
 
   @for $i from $from through $to {
     .#{$name}-#{$i * $step} {
-      --bg-color: hsl(#{color.hue($color)}, #{color.saturation($color)}, #{$i * $step}%);
+      --bg-color: var(--#{$name}-#{$i * $step});
 
       @if $i * $step <= $text-color-swap-step {
         --text-color: #{$text-color-swap-dark};
@@ -49,16 +73,16 @@ $danger-color: hsl(10, 80%, 50%);
 
   @for $i from $from through $to {
     .#{$name}-icon-#{$i * $step} {
-      --text-color: hsl(#{color.hue($color)}, #{color.saturation($color)}, #{$i * $step}%);
+      --text-color: var(--#{$name}-#{$i * $step});
     }
   }
 }
 
 :root {
-  @include set-color-shades("neutral", hsl(0, 0%, 0%), 10);
+  @include set-color-shades("neutral", hsl(240, 25%, 0%), 10, true, false);
   @include set-common-colors();
-  @include set-color-shades("primary", $primary-color, 10);
-  @include set-color-shades("secondary", $secondary-color, 10);
+  @include set-color-shades("primary", $primary-color, 10, false, false);
+  @include set-color-shades("secondary", $secondary-color, 10, false, false);
 
   --bg-color: var(--neutral-90);
   --text-color: var(--neutral-10);
@@ -66,13 +90,14 @@ $danger-color: hsl(10, 80%, 50%);
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg-color: var(--neutral-10);
-    --text-color: var(--neutral-90);
+    @include set-color-shades("neutral", hsl(240, 25%, 0%), 10, true, true);
+    @include set-color-shades("primary", $primary-color, 10, false, true);
+    @include set-color-shades("secondary", $secondary-color, 10, false, true);
   }
 }
 
 a {
-  color: var(--secondary-70);
+  color: var(--secondary-30);
   text-decoration: none;
 
   &:hover {
@@ -80,7 +105,7 @@ a {
   }
 }
 
-@include set-color-classes("neutral", hsl(0, 0%, 0%), 10, true);
+@include set-color-classes("neutral", hsl(240, 25%, 0%), 10, true);
 @include set-color-classes("primary", $primary-color, 10, false);
 @include set-color-classes("secondary", $secondary-color, 10, false, 60);
 
diff --git a/src/angular/frontend/src/styles.scss b/src/angular/frontend/src/styles.scss
index d81629b..930112d 100644
--- a/src/angular/frontend/src/styles.scss
+++ b/src/angular/frontend/src/styles.scss
@@ -15,3 +15,8 @@ body {
   background-color: var(--bg-color);
   color: var(--text-color);
 }
+
+* {
+  scrollbar-color: var(--neutral-70)var(--neutral-80);
+  scrollbar-width: thin;
+}