3 files changed, 67 insertions, 1 deletions

diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index 8e1438eaf8a..f12b2ee2591 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -72,6 +72,18 @@ $indigo-900: #ebebfa;
 $indigo-950: #f7f7ff;
 $indigo-900-alpha-008: rgba($indigo-900, 0.08);
 
+$purple-50: #232150;
+$purple-100: #2f2a6b;
+$purple-200: #453894;
+$purple-300: #5943b6;
+$purple-400: #694cc0;
+$purple-500: #7b58cf;
+$purple-600: #9475db;
+$purple-700: #ac93e6;
+$purple-800: #cbbbf2;
+$purple-900: #e1d8f9;
+$purple-950: #f4f0ff;
+
 $gray-lightest: #222;
 $gray-light: $gray-50;
 $gray-lighter: #303030;
@@ -163,6 +175,18 @@ body.gl-dark {
   --indigo-950: #{$indigo-950};
   --indigo-900-alpha-008: #{$indigo-900-alpha-008};
 
+  --purple-50: #{$purple-50};
+  --purple-100: #{$purple-100};
+  --purple-200: #{$purple-200};
+  --purple-300: #{$purple-300};
+  --purple-400: #{$purple-400};
+  --purple-500: #{$purple-500};
+  --purple-600: #{$purple-600};
+  --purple-700: #{$purple-700};
+  --purple-800: #{$purple-800};
+  --purple-900: #{$purple-900};
+  --purple-950: #{$purple-950};
+
   --gl-text-color: #{$gray-900};
   --border-color: #{$border-color};
 
@@ -252,6 +276,10 @@ $well-inner-border: $gray-200;
   color: $gray-900;
 }
 
+.gl-label-text-dark.gl-label-text-dark {
+  color: $gray-10;
+}
+
 // This applies to "gl-labels" from "gitlab-ui"
 .gl-label.gl-label-scoped.gl-label-text-dark,
 .gl-label.gl-label-scoped.gl-label-text-light {
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
index a94169ab494..a9e8b238d78 100644
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ b/app/assets/stylesheets/themes/theme_helper.scss
@@ -140,6 +140,34 @@
     }
   }
 
+  .header-search {
+    background-color: rgba($search-and-nav-links, 0.2) !important;
+
+    &:hover {
+      background-color: rgba($search-and-nav-links, 0.3) !important;
+    }
+
+    svg {
+      color: rgba($search-and-nav-links, 0.8) !important;
+    }
+
+    input {
+      background-color: transparent;
+      color: rgba($search-and-nav-links, 0.8);
+
+      &::placeholder {
+        color: rgba($search-and-nav-links, 0.8);
+      }
+
+      &:focus,
+      &:active {
+        &::placeholder {
+          color: $search-and-nav-links;
+        }
+      }
+    }
+  }
+
   .search {
     form {
       background-color: rgba($search-and-nav-links, 0.2);
@@ -184,7 +212,7 @@
       a:hover,
       &.active a,
       .fly-out-top-item-container {
-        background-color: $purple-900;
+        background-color: var(--purple-100, $purple-900);
         color: var(--black, $white);
       }
     }
diff --git a/app/assets/stylesheets/themes/theme_light.scss b/app/assets/stylesheets/themes/theme_light.scss
index b41377475c5..4c3bc1b2298 100644
--- a/app/assets/stylesheets/themes/theme_light.scss
+++ b/app/assets/stylesheets/themes/theme_light.scss
@@ -45,6 +45,16 @@ body {
       }
     }
 
+    .header-search {
+      background-color: $white !important;
+      box-shadow: inset 0 0 0 1px $border-color !important;
+
+      &:hover {
+        background-color: $white !important;
+        box-shadow: inset 0 0 0 1px $blue-200 !important;
+      }
+    }
+
     .search {
       form {
         background-color: $white;