Add support for dark theme for the Web IDE

Web IDE now supports dark theme for all its components

app/assets/javascripts/ide/components/ide.vue

@@ -12,6 +12,7 @@ import RepoEditor from './repo_editor.vue';
 import RightPane from './panes/right.vue';
 import ErrorMessage from './error_message.vue';
 import CommitEditorHeader from './commit_sidebar/editor_header.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
@@ -26,6 +27,7 @@ export default {
     GlDeprecatedButton,
     GlLoadingIcon,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     rightPaneComponent: {
       type: Vue.Component,
@@ -52,10 +54,17 @@ export default {
       'allBlobs',
       'emptyRepo',
       'currentTree',
+      'editorTheme',
     ]),
+    themeName() {
+      return this.glFeatures.webideDarkTheme && window.gon?.user_color_scheme;
+    },
   },
   mounted() {
     window.onbeforeunload = e => this.onBeforeUnload(e);
+
+    if (this.themeName)
+      document.querySelector('.navbar-gitlab').classList.add(`theme-${this.themeName}`);
   },
   methods: {
     ...mapActions(['toggleFileFinder', 'openNewEntryModal']),
@@ -77,7 +86,10 @@ export default {
 </script>
 
 <template>
-  <article class="ide position-relative d-flex flex-column align-items-stretch">
+  <article
+    class="ide position-relative d-flex flex-column align-items-stretch"
+    :class="{ [`theme-${themeName}`]: themeName }"
+  >
     <error-message v-if="errorMessage" :message="errorMessage" />
     <div class="ide-view flex-grow d-flex">
       <find-file

app/assets/stylesheets/page_bundles/ide.scss

@@ -3,6 +3,8 @@
 @import './ide_mixins';
 @import './ide_monaco_overrides';
 
+@import './themes/dark';
+
 $search-list-icon-width: 18px;
 $ide-activity-bar-width: 60px;
 $ide-context-header-padding: 10px;

app/assets/stylesheets/page_bundles/themes/_dark.scss

+.ide.theme-dark {
+  $border-color: #1d1f21;
+  $highlight-accent: #fff;
+  $text-color: #ccc;
+  $background: #333;
+  $background-hover: #2d2d2d;
+  $highlight-background: #252526;
+  $link-color: #428fdc;
+  $footer-background: #060606;
+
+  $input-border: #868686;
+  $input-background: transparent;
+  $input-color: $highlight-accent;
+
+  $btn-default-background: transparent;
+  $btn-default-border: #bfbfbf;
+  $btn-default-hover-border: #d8d8d8;
+
+  $btn-primary-background: #1068bf;
+  $btn-primary-border: #428fdc;
+  $btn-primary-hover-border: #63a6e9;
+
+  $btn-success-background: #217645;
+  $btn-success-border: #108548;
+  $btn-success-hover-border: #2da160;
+
+  $btn-disabled-border: rgba(223, 223, 223, 0.24);
+  $btn-disabled-color: rgba(145, 145, 145, 0.48);
+
+  a {
+    color: $link-color;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4:not(.modal-title),
+  h5,
+  h6,
+  .md,
+  .md p,
+  .ide-view,
+  .context-header > a,
+  .ide-sidebar-link,
+  .multi-file-tab-close,
+  .ide-tree-header button,
+  .ide-status-bar,
+  input,
+  textarea,
+  .md-area.is-focused,
+  .ide-entry-dropdown-toggle,
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover {
+    color: $text-color;
+  }
+
+  .modal-body {
+    color: $gl-text-color;
+  }
+
+  .dropdown-menu-toggle svg,
+  .dropdown-menu-toggle svg:hover,
+  .ide-tree-header svg,
+  .file-row .file-row-icon svg,
+  .file-row:hover .file-row-icon svg {
+    fill: $text-color;
+  }
+
+  .multi-file-tab-close:hover {
+    background-color: $input-border;
+  }
+
+  .ide-review-sub-header:hover {
+    color: $input-border;
+  }
+
+  .text-secondary {
+    color: $text-color !important;
+  }
+
+  input[type='text']::placeholder,
+  textarea::placeholder {
+    color: $input-border;
+  }
+
+  .ide-staged-action-btn {
+    background-color: transparent;
+  }
+
+  .multi-file-commit-panel,
+  .multi-file-tabs,
+  .multi-file-tabs li,
+  .file-row:hover,
+  .file-row:focus,
+  .multi-file-commit-list-path:hover,
+  .multi-file-commit-list-path:focus,
+  .multi-file-commit-list-path.is-active,
+  .file-row.is-active,
+  .ide-commit-editor-header,
+  .ide-file-templates,
+  .ide-entry-dropdown-toggle,
+  .ide-staged-action-btn {
+    background-color: $background;
+  }
+
+  .ide-sidebar-link:hover {
+    background-color: $background-hover;
+  }
+
+  .common-note-form .md-area {
+    border-color: $input-border;
+  }
+
+  &,
+  .multi-file-commit-panel-inner-content,
+  .multi-file-commit-form,
+  .multi-file-tabs li.active,
+  .ide-sidebar-link.active,
+  .ide-sidebar-link.active::after,
+  .ide-right-sidebar .multi-file-commit-panel-inner,
+  .common-note-form .md-area,
+  .ide-commit-message-field {
+    background-color: $highlight-background;
+  }
+
+  .multi-file-commit-panel {
+    padding-right: 0;
+  }
+
+  .ide-mode-tabs,
+  .multi-file-commit-panel-inner,
+  .multi-file-commit-panel-inner-content,
+  .multi-file-commit-form,
+  .multi-file-edit-pane,
+  .ide-right-sidebar .ide-activity-bar,
+  .ide-sidebar-link.active,
+  .multi-file-tabs li.active,
+  .multi-file-tabs li,
+  .ide-status-bar,
+  .ide-commit-editor-header,
+  .ide-file-templates {
+    border-color: $border-color;
+  }
+
+  .multi-file-commit-form > .commit-form-compact,
+  .ide-tree-header,
+  .multi-file-commit-panel-header,
+  .multi-file-commit-form > form,
+  .multi-file-commit-form hr,
+  .ide-commit-list-container.is-first,
+  .multi-file-commit-form .nav-links:not(.quick-links) {
+    border-color: $background;
+  }
+
+  .multi-file-tabs li.active {
+    border-bottom-color: $highlight-background;
+  }
+
+  .multi-file-tabs,
+  .ide-commit-editor-header {
+    box-shadow: inset 0 -1px $border-color;
+  }
+
+  .ide-sidebar-link.active {
+    color: $highlight-accent;
+    box-shadow: inset 3px 0 $highlight-accent;
+
+    &.is-right {
+      box-shadow: inset -3px 0 $highlight-accent;
+    }
+  }
+
+  .nav-links li.active a {
+    border-color: $highlight-accent;
+    color: $text-color;
+  }
+
+  .avatar-container {
+    &,
+    .avatar {
+      color: $text-color;
+      background-color: $highlight-background;
+      border-color: $highlight-background;
+    }
+  }
+
+  .ide-status-bar {
+    background-color: $footer-background;
+  }
+
+  input[type='text'] {
+    border-color: $input-border;
+    background: $input-background;
+  }
+
+  input[type='text'],
+  textarea {
+    color: $input-color !important;
+  }
+
+  .ide-entry-dropdown-toggle:hover {
+    background: $gray-800;
+  }
+
+  .btn:hover {
+    border-width: 2px;
+    padding: 5px 9px;
+  }
+
+  .btn.btn-sm:hover {
+    padding: 3px 9px;
+  }
+
+  .btn.btn-block:hover {
+    padding: 5px 0;
+  }
+
+  .btn-inverted,
+  .btn-default,
+  .dropdown,
+  .dropdown-menu-toggle {
+    background-color: $input-background !important;
+    color: $input-color !important;
+    border-color: $btn-default-border;
+  }
+
+  .btn-inverted,
+  .btn-default {
+    &:hover,
+    &:focus {
+      border-color: $btn-default-hover-border !important;
+    }
+  }
+
+  .dropdown,
+  .dropdown-menu-toggle {
+    &:hover,
+    &:focus {
+      background-color: $gray-900 !important;
+      border-color: $gray-200 !important;
+    }
+  }
+
+  .btn-primary {
+    background-color: $btn-primary-background;
+    border-color: $btn-primary-border !important;
+
+    &:hover,
+    &:focus {
+      border-color: $btn-primary-hover-border !important;
+    }
+  }
+
+  .btn-success {
+    background-color: $btn-success-background;
+    border-color: $btn-success-border !important;
+
+    &:hover,
+    &:focus {
+      border-color: $btn-success-hover-border !important;
+    }
+  }
+
+  .btn[disabled] {
+    background: $btn-default-background !important;
+    border: 1px solid $btn-disabled-border !important;
+    color: $btn-disabled-color !important;
+  }
+
+  .md-previewer,
+  .ide-empty-state {
+    background-color: $border-color;
+  }
+
+  .ide-tree-header svg:focus,
+  .ide-tree-header svg:hover {
+    color: $blue-600;
+  }
+
+  .animation-container {
+    [class^='skeleton-line-'] {
+      background-color: $gray-800;
+
+      &::after {
+        background-image: linear-gradient(to right,
+        $gray-800 0%,
+        $gray-700 20%,
+        $gray-800 40%,
+        $gray-800 100%);
+      }
+    }
+  }
+}
+
+.navbar.theme-dark {
+  border-bottom-color: transparent;
+}

changelogs/unreleased/209808-webide-dark-theme.yml

+---
+title: Add WebIDE Dark Theme Support
+merge_request: 28407
+author:
+type: added