diff --git a/src/scss/_c-list.scss b/src/scss/_c-list.scss
index 514d910..dc64bcb 100644
--- a/src/scss/_c-list.scss
+++ b/src/scss/_c-list.scss
@@ -12,6 +12,9 @@
   width: 100%;
 
   border-bottom: .1rem solid $color-gray-150;
+  @media (prefers-color-scheme: dark) {
+    border-color: $color-gray-700;
+  }
 
   &:last-child {
     border: none;
@@ -47,6 +50,9 @@
 
 .c-list__first-line {
   color: $color-gray-900;
+  @media (prefers-color-scheme: dark) {
+    color: #FFF;
+  }
   font-weight: 500;
   padding-bottom: .2rem;
 }
diff --git a/src/scss/_c-side-menu.scss b/src/scss/_c-side-menu.scss
index 64cc9b3..8367468 100644
--- a/src/scss/_c-side-menu.scss
+++ b/src/scss/_c-side-menu.scss
@@ -21,23 +21,41 @@
     @media (prefers-color-scheme: dark) {
       background: $color-gray-800;
     }
+    color: $color-blue-600;
+    @media (prefers-color-scheme: dark) {
+      color: $color-blue-400;
+    }
   }
 
-  .o-svg-icon {
+  .c-icon {
     margin-right: 1.2rem;
     color: $color-gray-300;
+    @media (prefers-color-scheme: dark) {
+      color: $color-gray-600;
+    }
   }
 }
 
 .c-side-menu__item a:focus,
 .c-side-menu__item--active a {
   background: $color-gray-50;
+
   @media (prefers-color-scheme: dark) {
     background: $color-gray-800;
   }
-  color: $color-primary;
+
+  color: $color-blue-600;
+  @media (prefers-color-scheme: dark) {
+    color: $color-blue-400;
+  }
+  
+  
+  // @todo does this code make any sense? If it's SVG, it should be fill
   .o-svg-icon {
-    color: $color-primary;
+    color: $color-blue-600;
+    @media (prefers-color-scheme: dark) {
+      color: $color-blue-400;
+    }
   }
 }