Convert gutter to dark theme.

stylesheets/_global.scss

@@ -258,6 +258,7 @@ $new-contact-left-margin: 16px;
 
 // Still used for the contact search view
 .contact-details {
+  color: $color-gray-05;
   $left-margin: 12px;
 
   vertical-align: middle;
@@ -287,7 +288,7 @@ $new-contact-left-margin: 16px;
   }
 
   .number {
-    color: $color-light-60;
+    color: $color-dark-30;
     font-size: $font-size-small;
   }
 

stylesheets/_index.scss

@@ -19,14 +19,14 @@
 }
 
 .gutter {
-  background-color: $color-gray-02;
+  background-color: $color-dark-85;
 
   ::-webkit-scrollbar-track {
-    background: $color-gray-02;
+    background: $color-dark-85;
   }
 
   ::-webkit-scrollbar-thumb {
-    border: 2px solid $color-gray-02;
+    border: 2px solid $color-dark-85;
   }
 
   display: flex;
@@ -36,6 +36,21 @@
 
   .tool-bar {
     margin-top: 8px;
+    color: $color-dark-05;
+
+    .search-icon {
+      background-color: $color-light-35;
+    }
+
+    input.search {
+      border: 1px solid $color-light-60;
+      color: $color-dark-05;
+      background-color: $color-gray-95;
+
+      &:focus {
+        outline: solid 1px $blue;
+      }
+    }
   }
 
   .content {
@@ -50,13 +65,14 @@
     justify-content: center;
     align-items: center;
     height: 70px;
-    background: $color-light-35;
+    background: $color-loki-extra-dark-gray;
     img {
       max-width: 60%;
       max-height: 60%;
     }
   }
 }
+
 .network-status-container {
   .network-status {
     background: url('../images/error_red.svg') no-repeat left 10px center;

stylesheets/_modules.scss

@@ -1829,7 +1829,7 @@
   cursor: pointer;
 
   &:hover {
-    background-color: $color-gray-05;
+    background-color: $color-dark-70;
   }
 }
 
@@ -1849,7 +1849,7 @@
 }
 
 .module-conversation-list-item--is-selected {
-  background-color: $color-gray-05;
+  background-color: $color-dark-70;
 }
 
 .module-conversation-list-item__avatar-container {
@@ -1880,7 +1880,7 @@
   line-height: 16px;
   border-radius: 8px;
 
-  box-shadow: 0px 0px 0px 1px $color-gray-02;
+  box-shadow: 0px 0px 0px 1px $color-dark-85;
 }
 
 .module-conversation-list-item__content {
@@ -1911,7 +1911,7 @@
   text-overflow: ellipsis;
 
   font-weight: 300;
-  color: $color-gray-90;
+  color: $color-gray-05;
 }
 
 .module-conversation-list-item__header__name--with-unread {
@@ -1932,12 +1932,12 @@
 
   text-transform: uppercase;
 
-  color: $color-gray-60;
+  color: $color-gray-25;
 }
 
 .module-conversation-list-item__header__date--has-unread {
   font-weight: 300;
-  color: $color-gray-90;
+  color: $color-gray-05;
 }
 
 .module-conversation-list-item__message {
@@ -1955,7 +1955,7 @@
   font-size: 13px;
   line-height: 18px;
 
-  color: $color-gray-60;
+  color: $color-gray-25;
 
   height: 1.3em;
   overflow: hidden;
@@ -1965,7 +1965,7 @@
 
 .module-conversation-list-item__message__text--has-unread {
   font-weight: 300;
-  color: $color-gray-90;
+  color: $color-gray-05;
 }
 
 .module-conversation-list-item__message__status-icon {
@@ -1979,7 +1979,7 @@
 }
 
 .module-conversation-list-item__message__status-icon--sending {
-  @include color-svg('../images/sending.svg', $color-gray-60);
+  @include color-svg('../images/sending.svg', $color-light-35);
   animation: module-conversation-list-item__message__status-icon--spinning 4s
     linear infinite;
 }
@@ -2186,7 +2186,7 @@
   line-height: 24px;
   font-weight: 300;
   margin-left: 32px;
-  color: $color-gray-90;
+  color: $color-dark-05;
 }
 
 // Third-party module: react-contextmenu

stylesheets/_variables.scss

@@ -25,6 +25,11 @@
 $roboto: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
 $roboto-light: Roboto-Light, 'Helvetica Neue', Arial, Helvetica, sans-serif;
 
+// Loki colors
+$color-loki-dark-gray: #323232;
+$color-loki-extra-dark-gray: #101010;
+$color-loki-green: #3bd110;
+
 // New colors
 
 $color-signal-blue: #2090ea;