Add latest changes from gitlab-org/gitlab@13-0-stable-ee

6 files changed, 527 insertions, 99 deletions

diff --git a/app/assets/stylesheets/page_bundles/_ide_mixins.scss b/app/assets/stylesheets/page_bundles/_ide_mixins.scss
index 9465dd5bed6..48b8a7230b1 100644
--- a/app/assets/stylesheets/page_bundles/_ide_mixins.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_mixins.scss
@@ -9,7 +9,6 @@
     top: 0;
     font-size: 12px;
     border-top-right-radius: $border-radius-default;
-    margin-left: -$gl-padding;
 
     .controllers {
       @include build-controllers(15px, center, false, 0, inline, 0);
diff --git a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
index 1aa112e0957..5675835a622 100644
--- a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
@@ -69,8 +69,17 @@
       display: none !important;
     }
   }
+}
+
+.multi-file-editor-holder {
+  height: 100%;
+  min-height: 0; // firefox fix
+}
 
-  .monaco-diff-editor.vs {
+// Apply theme related overrides only to the white theme and none theme
+.theme-white .blob-editor-container,
+.theme-none .blob-editor-container {
+  .monaco-diff-editor {
     .editor.modified {
       box-shadow: none;
     }
@@ -131,16 +140,14 @@
   }
 }
 
-.multi-file-editor-holder {
-  height: 100%;
-  min-height: 0; // firefox fix
-
-  &.is-readonly .vs,
-  .vs .editor.original {
+.theme-white .multi-file-editor-holder,
+.theme-none .multi-file-editor-holder {
+  &.is-readonly,
+  .editor.original {
     .monaco-editor,
     .monaco-editor-background,
     .monaco-editor .inputarea.ime-input {
-      background-color: $gray-50;
+      background-color: $gray-10;
     }
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
new file mode 100644
index 00000000000..e4c01c2bd6c
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -0,0 +1,308 @@
+// -------
+// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes
+// -------
+.ide.theme-dark {
+  a:not(.btn) {
+    color: var(--ide-link-color);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  code,
+  .md table:not(.code),
+  .md,
+  .md p,
+  .context-header > a,
+  input,
+  textarea,
+  .md-area.is-focused,
+  .dropdown-menu li button,
+  .dropdown-menu-selectable li a.is-active,
+  .dropdown-menu-inner-title,
+  .dropdown-menu-inner-content,
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a,
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover,
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a.active .badge.badge-pill,
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover .badge.badge-pill,
+  .badge.badge-pill,
+  .bs-callout,
+  .ide-pipeline .top-bar,
+  .ide-pipeline .top-bar .controllers .controllers-buttons {
+    color: var(--ide-text-color);
+  }
+
+  .drag-handle:hover,
+  .card-header .badge.badge-pill {
+    background-color: var(--ide-dropdown-hover-background);
+  }
+
+  .file-row .file-row-icon svg,
+  .file-row:hover .file-row-icon svg,
+  .controllers-buttons svg {
+    color: var(--ide-text-color-secondary);
+  }
+
+  .text-secondary {
+    color: var(--ide-text-color-secondary) !important;
+  }
+
+  input[type='search']::placeholder,
+  input[type='text']::placeholder,
+  textarea::placeholder,
+  .dropdown-input .fa {
+    color: var(--ide-input-border);
+  }
+
+  .ide-nav-form .input-icon {
+    color: var(--ide-input-border);
+  }
+
+  code,
+  .badge.badge-pill,
+  .card-header,
+  .bs-callout,
+  .ide-pipeline .top-bar,
+  .ide-terminal .top-bar {
+    background-color: var(--ide-background);
+  }
+
+  .bs-callout {
+    border-color: var(--ide-dropdown-background);
+
+    code {
+      background-color: var(--ide-dropdown-background);
+    }
+  }
+
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover {
+    border-color: var(--ide-dropdown-hover-background);
+  }
+
+  .common-note-form .md-area {
+    border-color: var(--ide-input-border);
+  }
+
+  &,
+  .md table:not(.code) tr th,
+  .common-note-form .md-area,
+  .card {
+    background-color: var(--ide-highlight-background);
+  }
+
+  .card,
+  .card-header,
+  .ide-terminal .top-bar,
+  .ide-pipeline .top-bar {
+    border-color: var(--ide-border-color);
+  }
+
+  hr,
+  .md h1,
+  .md h2,
+  .md blockquote,
+  pre,
+  .md table:not(.code) tbody td,
+  .md table:not(.code) tr th,
+  .nav-links:not(.quick-links) {
+    border-color: var(--ide-border-color-alt);
+  }
+
+  .ide-sidebar-link.active {
+    color: var(--ide-highlight-accent);
+    box-shadow: inset 3px 0 var(--ide-highlight-accent);
+
+    &.is-right {
+      box-shadow: inset -3px 0 var(--ide-highlight-accent);
+    }
+  }
+
+  .nav-links li.active a,
+  .nav-links li a.active {
+    border-color: var(--ide-highlight-accent);
+    color: var(--ide-text-color);
+  }
+
+  .avatar-container {
+    &,
+    .avatar {
+      color: var(--ide-text-color);
+      background-color: var(--ide-highlight-background);
+      border-color: var(--ide-highlight-background);
+    }
+  }
+
+  input[type='text'],
+  input[type='search'],
+  .filtered-search-box {
+    border-color: var(--ide-input-border);
+    background: var(--ide-input-background) !important;
+  }
+
+  input[type='text'],
+  input[type='search'],
+  .filtered-search-box,
+  textarea {
+    color: var(--ide-input-color) !important;
+  }
+
+  .filtered-search-box input[type='search'] {
+    border-color: transparent;
+  }
+
+  .filtered-search-token .value-container,
+  .filtered-search-term .value-container {
+    background-color: var(--ide-dropdown-hover-background);
+    color: var(--ide-text-color);
+
+    &:hover {
+      background-color: var(--ide-input-border);
+    }
+  }
+
+  @function calc-btn-hover-padding($original-padding, $original-border: 1px) {
+    @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width));
+  }
+
+  .btn:not(.btn-link):not([disabled]):hover {
+    border-width: var(--ide-btn-hover-border-width);
+    padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px);
+  }
+
+  .btn:not([disabled]).btn-sm:hover {
+    padding: calc-btn-hover-padding(4px) calc-btn-hover-padding(10px);
+  }
+
+  .btn:not([disabled]).btn-block:hover {
+    padding: calc-btn-hover-padding(6px) 0;
+  }
+
+  .btn-inverted,
+  .btn-default,
+  .dropdown,
+  .dropdown-menu-toggle {
+    background-color: var(--ide-input-background) !important;
+    color: var(--ide-input-color) !important;
+    border-color: var(--ide-btn-default-border);
+  }
+
+  .btn-inverted,
+  .btn-default {
+    &:hover,
+    &:focus {
+      border-color: var(--ide-btn-default-hover-border) !important;
+    }
+  }
+
+  .dropdown,
+  .dropdown-menu-toggle {
+    &:hover,
+    &:focus {
+      background-color: var(--ide-dropdown-btn-hover-background) !important;
+      border-color: var(--ide-dropdown-btn-hover-border) !important;
+    }
+  }
+
+  .dropdown-menu {
+    color: var(--ide-text-color);
+    border-color: var(--ide-background);
+    background-color: var(--ide-dropdown-background);
+
+    .divider,
+    .nav-links:not(.quick-links) {
+      background-color: var(--ide-dropdown-hover-background);
+      border-color: var(--ide-dropdown-hover-background);
+    }
+
+    .nav-links li a.active {
+      border-color: var(--ide-highlight-accent);
+    }
+
+    .nav-links:not(.quick-links) li:not(.md-header-toolbar) a {
+      color: var(--ide-text-color);
+
+      &.active {
+        color: var(--ide-text-color);
+      }
+    }
+
+    li > a:not(.disable-hover):hover,
+    li > a:not(.disable-hover):focus,
+    li button:not(.disable-hover):hover,
+    li button:not(.disable-hover):focus,
+    li button.is-focused {
+      background-color: var(--ide-dropdown-hover-background);
+      color: var(--ide-text-color);
+    }
+  }
+
+  .dropdown-title,
+  .dropdown-input {
+    border-color: var(--ide-dropdown-hover-background) !important;
+  }
+
+  .btn-primary,
+  .btn-info {
+    background-color: var(--ide-btn-primary-background);
+    border-color: var(--ide-btn-primary-border) !important;
+
+    &:hover,
+    &:focus {
+      border-color: var(--ide-btn-primary-hover-border) !important;
+    }
+  }
+
+  .btn-success {
+    background-color: var(--ide-btn-success-background);
+    border-color: var(--ide-btn-success-border) !important;
+
+    &:hover,
+    &:focus {
+      border-color: var(--ide-btn-success-hover-border) !important;
+    }
+  }
+
+  .btn[disabled] {
+    background: var(--ide-btn-default-background) !important;
+    border: 1px solid var(--ide-btn-disabled-border) !important;
+    color: var(--ide-btn-disabled-color) !important;
+  }
+
+  pre code,
+  .md table:not(.code) tbody {
+    background-color: var(--ide-border-color);
+  }
+
+  .animation-container {
+    [class^='skeleton-line-'] {
+      background-color: var(--ide-animation-gradient-1);
+
+      &::after {
+        background-image: linear-gradient(to right,
+        var(--ide-animation-gradient-1) 0%,
+        var(--ide-animation-gradient-2) 20%,
+        var(--ide-animation-gradient-1) 40%,
+        var(--ide-animation-gradient-1) 100%);
+      }
+    }
+  }
+
+  .idiff.addition {
+    background-color: var(--ide-diff-insert);
+  }
+
+  .idiff.deletion {
+    background-color: var(--ide-diff-remove);
+  }
+}
+
+.navbar.theme-dark {
+  border-bottom-color: transparent;
+}
+
+.theme-dark ~ .popover {
+  box-shadow: none;
+}
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 024c1781bf8..61914740ac0 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -2,6 +2,9 @@
 @import 'framework/mixins';
 @import './ide_mixins';
 @import './ide_monaco_overrides';
+@import './ide_theme_overrides';
+
+@import './ide_themes/dark';
 
 $search-list-icon-width: 18px;
 $ide-activity-bar-width: 60px;
@@ -25,7 +28,7 @@ $ide-commit-header-height: 48px;
   position: relative;
   margin-top: 0;
   padding-bottom: $ide-statusbar-height;
-  color: $gl-text-color;
+  color: var(--ide-text-color, $gl-text-color);
   min-height: 0; // firefox fix
 
   &.is-collapsed {
@@ -61,14 +64,14 @@ $ide-commit-header-height: 48px;
   display: flex;
   flex-direction: column;
   flex: 1;
-  border-left: 1px solid $white-dark;
+  border-left: 1px solid var(--ide-border-color, $white-dark);
   overflow: hidden;
 }
 
 .multi-file-tabs {
   display: flex;
-  background-color: $gray-light;
-  box-shadow: inset 0 -1px $white-dark;
+  background-color: var(--ide-background, $gray-light);
+  box-shadow: inset 0 -1px var(--ide-border-color, $white-dark);
 
   > ul {
     display: flex;
@@ -79,13 +82,13 @@ $ide-commit-header-height: 48px;
     display: flex;
     align-items: center;
     padding: $grid-size $gl-padding;
-    background-color: $gray-normal;
-    border-right: 1px solid $white-dark;
-    border-bottom: 1px solid $white-dark;
+    background-color: var(--ide-background-hover, $gray-normal);
+    border-right: 1px solid var(--ide-border-color, $white-dark);
+    border-bottom: 1px solid var(--ide-border-color, $white-dark);
 
     &.active {
-      background-color: $white;
-      border-bottom-color: $white;
+      background-color: var(--ide-highlight-background, $white);
+      border-bottom-color: var(--ide-border-color, $white);
     }
 
     &:not(.disabled) {
@@ -118,7 +121,7 @@ $ide-commit-header-height: 48px;
   background: none;
   border: 0;
   border-radius: $border-radius-default;
-  color: $gray-900;
+  color: var(--ide-text-color, $gray-900);
 
   svg {
     position: relative;
@@ -133,11 +136,11 @@ $ide-commit-header-height: 48px;
   }
 
   &:not([disabled]):hover {
-    background-color: $gray-200;
+    background-color: var(--ide-input-border, $gray-200);
   }
 
   &:not([disabled]):focus {
-    background-color: $blue-500;
+    background-color: var(--ide-link-color, $blue-500);
     color: $white;
     outline: 0;
 
@@ -164,10 +167,11 @@ $ide-commit-header-height: 48px;
     height: 100%;
     overflow: auto;
     padding: $gl-padding;
+    background-color: var(--ide-border-color, transparent);
   }
 
   .file-container {
-    background-color: $gray-darker;
+    background-color: var(--ide-border-color, $gray-darker);
     display: flex;
     height: 100%;
     align-items: center;
@@ -183,13 +187,13 @@ $ide-commit-header-height: 48px;
 
     .file-info {
       font-size: $label-font-size;
-      color: $diff-image-info-color;
+      color: var(--ide-text-color, $diff-image-info-color);
     }
   }
 }
 
 .ide-mode-tabs {
-  border-bottom: 1px solid $white-dark;
+  border-bottom: 1px solid var(--ide-border-color, $white-dark);
 
   li a {
     padding: $gl-padding-8 $gl-padding;
@@ -203,9 +207,10 @@ $ide-commit-header-height: 48px;
 }
 
 .ide-status-bar {
-  border-top: 1px solid $white-dark;
+  color: var(--ide-text-color, $gl-text-color);
+  border-top: 1px solid var(--ide-border-color, $white-dark);
   padding: 2px $gl-padding-8 0;
-  background: $white;
+  background-color: var(--ide-footer-background, $white);
   display: flex;
   justify-content: space-between;
   height: $ide-statusbar-height;
@@ -278,8 +283,7 @@ $ide-commit-header-height: 48px;
   position: relative;
   width: 340px;
   padding: 0;
-  background-color: $gray-light;
-  padding-right: 1px;
+  background-color: var(--ide-background, $gray-light);
 
   .context-header {
     width: auto;
@@ -306,9 +310,9 @@ $ide-commit-header-height: 48px;
     display: flex;
     flex: 1;
     flex-direction: column;
-    background-color: $white;
-    border-left: 1px solid $white-dark;
-    border-top: 1px solid $white-dark;
+    background-color: var(--ide-highlight-background, $white);
+    border-left: 1px solid var(--ide-border-color, $white-dark);
+    border-top: 1px solid var(--ide-border-color, $white-dark);
     border-top-left-radius: $border-radius-small;
     min-height: 0; // firefox fix
   }
@@ -333,15 +337,10 @@ $ide-commit-header-height: 48px;
 
 .multi-file-commit-panel-header {
   height: $ide-commit-header-height;
-  border-bottom: 1px solid $white-dark;
+  border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
   padding: 12px 0;
 }
 
-.multi-file-commit-panel-collapse-btn {
-  border-left: 1px solid $white-dark;
-  margin-left: auto;
-}
-
 .multi-file-commit-list {
   flex: 1;
   overflow: auto;
@@ -363,7 +362,7 @@ $ide-commit-header-height: 48px;
     display: block;
     margin-left: auto;
     margin-right: auto;
-    color: $gray-700;
+    color: var(--ide-text-color-secondary, $gray-700);
   }
 
   .file-status-icon {
@@ -387,17 +386,17 @@ $ide-commit-header-height: 48px;
 
   &:hover,
   &:focus {
-    background: $gray-100;
+    background: var(--ide-background, $gray-100);
 
     outline: 0;
   }
 
   &:active {
-    background: $gray-200;
+    background: var(--ide-background, $gray-200);
   }
 
   &.is-active {
-    background-color: $white-normal;
+    background-color: var(--ide-background, $white-normal);
   }
 
   svg {
@@ -418,8 +417,8 @@ $ide-commit-header-height: 48px;
 
 .multi-file-commit-form {
   position: relative;
-  background-color: $white;
-  border-left: 1px solid $white-dark;
+  background-color: var(--ide-highlight-background, $white);
+  border-left: 1px solid var(--ide-border-color, $white-dark);
   transition: all 0.3s ease;
 
   > form,
@@ -427,7 +426,7 @@ $ide-commit-header-height: 48px;
     padding: $gl-padding 0;
     margin-left: $gl-padding;
     margin-right: $gl-padding;
-    border-top: 1px solid $white-dark;
+    border-top: 1px solid var(--ide-border-color-alt, $white-dark);
   }
 
   .btn {
@@ -488,6 +487,7 @@ $ide-commit-header-height: 48px;
   height: 100vh;
   align-items: center;
   justify-content: center;
+  background-color: var(--ide-border-color, transparent);
 }
 
 .ide {
@@ -504,7 +504,7 @@ $ide-commit-header-height: 48px;
   margin-right: $gl-padding;
 
   &.is-first {
-    border-bottom: 1px solid $white-dark;
+    border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
   }
 }
 
@@ -512,12 +512,7 @@ $ide-commit-header-height: 48px;
   width: $ide-commit-row-height;
   height: $ide-commit-row-height;
   color: inherit;
-}
-
-.ide-commit-file-count {
-  min-width: 22px;
-  background-color: $gray-light;
-  border: 1px solid $white-dark;
+  background-color: var(--ide-background, $white-normal);
 }
 
 .ide-commit-options {
@@ -549,7 +544,7 @@ $ide-commit-header-height: 48px;
   height: 60px;
   width: 100%;
   padding: 0 $gl-padding;
-  color: $gl-text-color-secondary;
+  color: var(--ide-text-color-secondary, $gl-text-color-secondary);
   background-color: transparent;
   border: 0;
   border-top: 1px solid transparent;
@@ -562,22 +557,22 @@ $ide-commit-header-height: 48px;
   }
 
   &:hover {
-    color: $gl-text-color;
-    background-color: $gray-100;
+    color: var(--ide-text-color, $gl-text-color);
+    background-color: var(--ide-background-hover, $gray-100);
   }
 
   &:focus {
-    color: $gl-text-color;
-    background-color: $gray-200;
+    color: var(--ide-text-color, $gl-text-color);
+    background-color: var(--ide-background-hover, $gray-200);
   }
 
   &.active {
     // extend width over border of sidebar section
     width: calc(100% + 1px);
     padding-right: $gl-padding + 1px;
-    background-color: $white;
-    border-top-color: $white-dark;
-    border-bottom-color: $white-dark;
+    background-color: var(--ide-highlight-background, $white);
+    border-top-color: var(--ide-border-color, $white-dark);
+    border-bottom-color: var(--ide-border-color, $white-dark);
 
     &::after {
       content: '';
@@ -586,7 +581,7 @@ $ide-commit-header-height: 48px;
       top: 0;
       bottom: 0;
       width: 1px;
-      background: $white;
+      background: var(--ide-highlight-background, $white);
     }
 
     &.is-right {
@@ -609,7 +604,7 @@ $ide-commit-header-height: 48px;
 
 .ide-commit-message-field {
   height: 200px;
-  background-color: $white;
+  background-color: var(--ide-highlight-background, $white);
 
   .md-area {
     display: flex;
@@ -623,7 +618,7 @@ $ide-commit-header-height: 48px;
 
   .form-text.text-muted {
     margin-top: 2px;
-    color: $blue-500;
+    color: var(--ide-link-color, $blue-500);
     cursor: pointer;
   }
 }
@@ -686,14 +681,14 @@ $ide-commit-header-height: 48px;
   padding: 12px 0;
   margin-left: $ide-tree-padding;
   margin-right: $ide-tree-padding;
-  border-bottom: 1px solid $white-dark;
+  border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
 
   svg {
-    color: $gray-700;
+    color: var(--ide-text-color-secondary, $gray-700);
 
     &:focus,
     &:hover {
-      color: $blue-600;
+      color: var(--ide-link-color, $blue-600);
     }
   }
 
@@ -702,7 +697,7 @@ $ide-commit-header-height: 48px;
   }
 
   button {
-    color: $gl-text-color;
+    color: var(--ide-text-color, $gl-text-color);
   }
 }
 
@@ -718,21 +713,21 @@ $ide-commit-header-height: 48px;
   .dropdown-menu-toggle {
     svg {
       vertical-align: middle;
-      color: $gray-700;
 
+      &,
       &:hover {
-        color: $gray-700;
+        color: var(--ide-text-color-secondary, $gray-700);
       }
     }
 
     &:hover {
-      background-color: $white-normal;
+      background-color: var(--ide-dropdown-btn-hover-background, $white-normal);
     }
   }
 
   &.show {
     .dropdown-menu-toggle {
-      background-color: $white-dark;
+      background-color: var(--ide-input-background, $white-dark);
     }
   }
 }
@@ -798,12 +793,12 @@ $ide-commit-header-height: 48px;
   }
 
   a {
-    color: $blue-600;
+    color: var(--ide-link-color, $blue-600);
   }
 }
 
 .ide-review-sub-header {
-  color: $gl-text-color-secondary;
+  color: var(--ide-text-color-secondary, $gl-text-color-secondary);
 }
 
 .ide-tree-changes {
@@ -819,7 +814,7 @@ $ide-commit-header-height: 48px;
   bottom: 0;
   right: 0;
   z-index: 10;
-  background: $white;
+  background-color: var(--ide-highlight-background, $white);
   overflow: auto;
   display: flex;
   flex-direction: column;
@@ -883,14 +878,18 @@ $ide-commit-header-height: 48px;
 
 .ide-right-sidebar {
   .ide-activity-bar {
-    border-left: 1px solid $white-dark;
+    border-left: 1px solid var(--ide-border-color, $white-dark);
   }
 
   .multi-file-commit-panel-inner {
     width: 350px;
-    padding: $grid-size $gl-padding;
-    background-color: $white;
-    border-left: 1px solid $white-dark;
+    padding: $grid-size 0;
+    background-color: var(--ide-highlight-background, $white);
+    border-left: 1px solid var(--ide-border-color, $white-dark);
+  }
+
+  .ide-right-sidebar-jobs-detail {
+    padding-bottom: 0;
   }
 
   .ide-right-sidebar-clientside {
@@ -901,6 +900,10 @@ $ide-commit-header-height: 48px;
 .ide-pipeline {
   @include ide-trace-view();
 
+  svg {
+    --svg-status-bg: var(--ide-background, $white);
+  }
+
   .empty-state {
     p {
       margin: $grid-size 0;
@@ -913,15 +916,12 @@ $ide-commit-header-height: 48px;
       margin: 0;
     }
   }
-
-  .build-trace {
-    margin-left: -$gl-padding;
-  }
 }
 
 .ide-pipeline-list {
   flex: 1;
   overflow: auto;
+  padding: 0 $gl-padding;
 }
 
 .ide-pipeline-header {
@@ -935,7 +935,7 @@ $ide-commit-header-height: 48px;
   padding: 16px;
 
   &:not(:last-child) {
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid var(--ide-border-color, $border-color);
   }
 
   .ci-status-icon {
@@ -964,6 +964,7 @@ $ide-commit-header-height: 48px;
 
 .ide-job-header {
   min-height: 60px;
+  padding: 0 $gl-padding;
 }
 
 .ide-nav-form {
@@ -976,7 +977,7 @@ $ide-commit-header-height: 48px;
       text-align: center;
 
       &:not(.active) {
-        background-color: $gray-light;
+        background-color: var(--ide-dropdown-background, $gray-light);
       }
     }
   }
@@ -1025,7 +1026,7 @@ $ide-commit-header-height: 48px;
 .ide-merge-request-project-path {
   font-size: 12px;
   line-height: 16px;
-  color: $gl-text-color-secondary;
+  color: var(--ide-text-color-secondary, $gl-text-color-secondary);
 }
 
 .ide-merge-request-info {
@@ -1041,17 +1042,17 @@ $ide-commit-header-height: 48px;
 
 .ide-entry-dropdown-toggle {
   padding: $gl-padding-4;
-  color: $gl-text-color;
-  background-color: $gray-100;
+  color: var(--ide-text-color, $gl-text-color);
+  background-color: var(--ide-background, $gray-100);
 
   &:hover {
-    background-color: $gray-200;
+    background-color: var(--ide-file-row-btn-hover-background, $gray-200);
   }
 
   &:active,
   &:focus {
     color: $white-normal;
-    background-color: $blue-500;
+    background-color: var(--ide-link-color, $blue-500);
     outline: 0;
   }
 }
@@ -1065,14 +1066,14 @@ $ide-commit-header-height: 48px;
 
   .dropdown.show .ide-entry-dropdown-toggle {
     color: $white-normal;
-    background-color: $blue-500;
+    background-color: var(--ide-link-color, $blue-500);
   }
 }
 
 .ide-preview-header {
   padding: 0 $grid-size;
-  border-bottom: 1px solid $white-dark;
-  background-color: $gray-light;
+  border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
+  background-color: var(--ide-highlight-background, $gray-light);
   min-height: 44px;
 }
 
@@ -1082,7 +1083,7 @@ $ide-commit-header-height: 48px;
   max-width: 24px;
   padding: 0;
   margin: 0 ($grid-size / 2);
-  color: $gl-gray-light;
+  color: var(--ide-text-color-secondary, $gl-gray-light);
 
   &:first-child {
     margin-left: 0;
@@ -1096,7 +1097,7 @@ $ide-commit-header-height: 48px;
   &:focus {
     outline: 0;
     box-shadow: none;
-    border-color: $gray-200;
+    border-color: var(--ide-border-color, $gray-200);
   }
 }
 
@@ -1108,8 +1109,8 @@ $ide-commit-header-height: 48px;
 
 .ide-file-templates {
   padding: $grid-size $gl-padding;
-  background-color: $gray-light;
-  border-bottom: 1px solid $white-dark;
+  background-color: var(--ide-background, $gray-light);
+  border-bottom: 1px solid var(--ide-border-color, $white-dark);
 
   .dropdown {
     min-width: 180px;
@@ -1123,8 +1124,8 @@ $ide-commit-header-height: 48px;
 .ide-commit-editor-header {
   height: 65px;
   padding: 8px 16px;
-  background-color: $gray-50;
-  box-shadow: inset 0 -1px $white-dark;
+  background-color: var(--ide-background, $gray-10);
+  box-shadow: inset 0 -1px var(--ide-border-color, $white-dark);
 }
 
 .ide-commit-list-changed-icon {
@@ -1135,16 +1136,26 @@ $ide-commit-header-height: 48px;
 .ide-file-icon-holder {
   display: flex;
   align-items: center;
-  color: $gray-700;
+  color: var(--ide-text-color-secondary, $gray-700);
+}
+
+.file-row:active {
+  background: var(--ide-background, $gray-200);
+}
+
+.file-row.is-active {
+  background: var(--ide-background, $gray-100);
 }
 
 .file-row:hover,
 .file-row:focus {
+  background: var(--ide-background, $gray-100);
+
   .ide-new-btn {
     display: block;
   }
 
   .folder-icon {
-    fill: $gl-text-color-secondary;
+    fill: var(--ide-text-color-secondary, $gl-text-color-secondary);
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/README.md b/app/assets/stylesheets/page_bundles/ide_themes/README.md
new file mode 100644
index 00000000000..535179cc4c2
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/ide_themes/README.md
@@ -0,0 +1,53 @@
+# Web IDE Themes
+
+Web IDE currently supports 5 syntax highlighting themes based on themes from the user's profile preferences:
+
+* White
+* Dark
+* Monokai
+* Solarized Dark
+* Solarized Light
+
+Currently, the Web IDE supports the white theme by default, and the dark theme by the introduction of CSS
+variables.
+
+The Web IDE automatically adds an appropriate theme class to the `ide.vue` component based on the current syntax
+highlighting theme. Below are those theme classes, which come from the `gon.user_color_scheme` global setting:
+
+| # | Color Scheme    | `gon.user_color_scheme` | Theme class             |
+|---|-----------------|-------------------------|-------------------------|
+| 1 | White           | `"white"`               | `.theme-white`           |
+| 2 | Dark            | `"dark"`                | `.theme-dark`            |
+| 3 | Monokai         | `"monokai"`             | `.theme-monokai`         |
+| 4 | Solarized Dark  | `"solarized-dark"`      | `.theme-solarized-dark`  |
+| 5 | Solarized Light | `"solarized-light"`     | `.theme-solarized-light` |
+| 6 | None            | `"none"`                | `.theme-none`            |
+
+## Adding New Themes (SCSS)
+
+To add a new theme, follow the following steps:
+
+1. Pick a theme from the table above, lets say **Solarized Dark**.
+2. Create a new file in this folder called `_solarized_dark.scss`.
+3. Copy over all the CSS variables from `_dark.scss` to `_solarized_dark.scss` and assign them your own values.
+   Put them under the selector `.ide.theme-solarized-dark`.
+4. Import this newly created SCSS file in `ide.scss` file in the parent directory.
+5. To make sure the variables apply to to your theme, add the selector `.ide.theme-solarized-dark` to the top
+   of `_ide_theme_overrides.scss` file. The file should now look like this:
+
+   ```scss
+   .ide.theme-dark,
+   .ide.theme-solarized-dark {
+     /* file contents */
+   }
+   ```
+
+   This step is temporary until all CSS variables in that file have their
+   default values assigned.
+6. That's it! Raise a merge request with your newly added theme.
+
+## Modifying Monaco Themes
+
+Monaco themes are defined in Javascript and are stored in the `app/assets/javascripts/ide/lib/themes/` directory.
+To modify any syntax highlighting colors or to synchronize the theme colors with syntax highlighting colors, you
+can modify the files in that directory directly.
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
new file mode 100644
index 00000000000..37e6be9849b
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
@@ -0,0 +1,50 @@
+// -------
+// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes
+// -------
+.ide.theme-dark {
+  --ide-border-color: #1d1f21;
+  --ide-border-color-alt: #333;
+  --ide-highlight-accent: #fff;
+  --ide-text-color: #ccc;
+  --ide-text-color-secondary: #ccc;
+  --ide-background: #333;
+  --ide-background-hover: #2d2d2d;
+  --ide-highlight-background: #252526;
+  --ide-link-color: #428fdc;
+  --ide-footer-background: #060606;
+
+  --ide-input-border: #868686;
+  --ide-input-background: transparent;
+  --ide-input-color: #fff;
+
+  --ide-btn-default-background: transparent;
+  --ide-btn-default-border: #bfbfbf;
+  --ide-btn-default-hover-border: #d8d8d8;
+
+  --ide-btn-primary-background: #1068bf;
+  --ide-btn-primary-border: #428fdc;
+  --ide-btn-primary-hover-border: #63a6e9;
+
+  --ide-btn-success-background: #217645;
+  --ide-btn-success-border: #108548;
+  --ide-btn-success-hover-border: #2da160;
+
+  --ide-btn-disabled-border: rgba(223, 223, 223, 0.24);
+  --ide-btn-disabled-color: rgba(145, 145, 145, 0.48);
+
+  --ide-btn-hover-border-width: 2px;
+
+  --ide-dropdown-background: #404040;
+  --ide-dropdown-hover-background: #525252;
+
+  --ide-dropdown-btn-hover-border: #{$gray-200};
+  --ide-dropdown-btn-hover-background: #{$gray-900};
+
+  --ide-file-row-btn-hover-background: #{$gray-800};
+
+  --ide-diff-insert: rgba(155, 185, 85, 0.2);
+  --ide-diff-remove: rgba(255, 0, 0, 0.2);
+
+  --ide-animation-gradient-1: #{$gray-800};
+  --ide-animation-gradient-2: #{$gray-700};
+}