fix(style): changed colors for dark-mode (#16404)

client/less/lib/bootstrap/variables.less

@@ -14,6 +14,7 @@
 @gray:                   lighten(@gray-base, 33.5%); // #555
 @gray-light:             lighten(@gray-base, 46.7%); // #777
 @gray-lighter:           lighten(@gray-base, 93.5%); // #eee
+@silver-chalice:         lighten(@gray-base, 45%);   // #a6a6a6
 
 @brand-primary:         darkgreen;
 @brand-success:         #457E86;
@@ -42,6 +43,7 @@
 //## Night mode styles
 @night-body-bg:         @gray-dark;
 @night-text-color:      #ccc;
+@night-search-color:    #044421;
 
 //== Typography
 //

common/app/Nav/nav.less

@@ -153,6 +153,28 @@ li.nav-avatar {
 }
 
 .night {
+  .nav-component-wrapper {
+    ::-webkit-input-placeholder {
+      color: @night-text-color;
+    }
+
+    ::-moz-placeholder {
+      color: @night-text-color;
+    }
+
+    ::-ms-placeholder {
+      color: @night-text-color;
+    }
+
+    ::placeholder {
+      color: @night-text-color;
+    }
+
+    .fcc_input {
+      background-color: @night-search-color;
+      color: @night-text-color;
+    }
+  }
   .navbar-default {
     .navbar-nav {
       & > li > a {
@@ -230,7 +252,6 @@ li.nav-avatar {
     align-items: center;
     margin-right: 10px;
   }
-
 }
 
 .logo-glyph {

common/app/routes/Challenges/challenges.less

@@ -98,10 +98,10 @@
     color: #02a902;
   }
   .@{ns}-editor .CodeMirror {
-    background-color:#242424;
+    background-color:@night-body-bg;
     color:#ABABAB;
     &-gutters {
-      background-color:#242424;
+      background-color:@night-body-bg;
       color:#ABABAB;
     }
     .cm-bracket, .cm-tag {
@@ -113,6 +113,9 @@
     .cm-keyword, .cm-attribute {
       color:#9BBBDC;
     }
+    &-line {
+      caret-color:#ABABAB;
+    }
   }
   .refresh-icon {
     color: @icon-light-gray;
@@ -212,6 +215,7 @@
 .@{ns}-preview {
   .max-element-height();
   width: 100%;
+  background-color: @silver-chalice;
 }
 
 .@{ns}-preview-frame {