1 files changed, 20 insertions, 4 deletions

diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 7ebcacc530f..36c8b18e205 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -3,6 +3,7 @@ import Vue from 'vue';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
+import { modalTypes } from '../constants';
 import FindFile from '~/vue_shared/components/file_finder/index.vue';
 import NewModal from './new_dropdown/modal.vue';
 import IdeSidebar from './ide_side_bar.vue';
@@ -12,6 +13,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 +28,7 @@ export default {
     GlDeprecatedButton,
     GlLoadingIcon,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     rightPaneComponent: {
       type: Vue.Component,
@@ -52,13 +55,20 @@ export default {
       'allBlobs',
       'emptyRepo',
       'currentTree',
+      'editorTheme',
     ]),
+    themeName() {
+      return 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']),
+    ...mapActions(['toggleFileFinder']),
     onBeforeUnload(e = {}) {
       const returnValue = __('Are you sure you want to lose unsaved changes?');
 
@@ -72,12 +82,18 @@ export default {
     openFile(file) {
       this.$router.push(`/project${file.url}`);
     },
+    createNewFile() {
+      this.$refs.newModal.open(modalTypes.blob);
+    },
   },
 };
 </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
@@ -125,7 +141,7 @@ export default {
                       variant="success"
                       :title="__('New file')"
                       :aria-label="__('New file')"
-                      @click="openNewEntryModal({ type: 'blob' })"
+                      @click="createNewFile()"
                     >
                       {{ __('New file') }}
                     </gl-deprecated-button>
@@ -147,6 +163,6 @@ export default {
       <component :is="rightPaneComponent" v-if="currentProjectId" />
     </div>
     <ide-status-bar />
-    <new-modal />
+    <new-modal ref="newModal" />
   </article>
 </template>