Handles user preference theme in the Editor Lite

app/assets/javascripts/editor/editor_lite.js

 import { editor as monacoEditor, languages as monacoLanguages, Uri } from 'monaco-editor';
-import whiteTheme from '~/ide/lib/themes/white';
+import { DEFAULT_THEME, themes } from '~/ide/lib/themes';
 import { defaultEditorOptions } from '~/ide/lib/editor_options';
 import { clearDomElement } from './utils';
 
@@ -19,8 +19,10 @@ export default class Editor {
   }
 
   static setupMonacoTheme() {
-    monacoEditor.defineTheme('white', whiteTheme);
-    monacoEditor.setTheme('white');
+    const themeName = window.gon?.user_color_scheme || DEFAULT_THEME;
+    const theme = themes.find(t => t.name === themeName);
+    if (theme) monacoEditor.defineTheme(themeName, theme.data);
+    monacoEditor.setTheme(theme ? themeName : DEFAULT_THEME);
   }
 
   createInstance({ el = undefined, blobPath = '', blobContent = '' } = {}) {

changelogs/unreleased/202426-editor-lite-theme-preference.yml

+---
+title: In single-file editor set syntax highlighting theme according to user's preference
+merge_request: 26606
+author:
+type: changed

spec/javascripts/editor/editor_lite_spec.js

 import { editor as monacoEditor, Uri } from 'monaco-editor';
 import Editor from '~/editor/editor_lite';
+import { DEFAULT_THEME, themes } from '~/ide/lib/themes';
 
 describe('Base editor', () => {
   let editorEl;
@@ -108,4 +109,52 @@ describe('Base editor', () => {
       expect(editor.model.getLanguageIdentifier().language).toEqual('plaintext');
     });
   });
+
+  describe('syntax highlighting theme', () => {
+    let themeDefineSpy;
+    let themeSetSpy;
+    let defaultScheme;
+
+    beforeEach(() => {
+      themeDefineSpy = spyOn(monacoEditor, 'defineTheme');
+      themeSetSpy = spyOn(monacoEditor, 'setTheme');
+      defaultScheme = window.gon.user_color_scheme;
+    });
+
+    afterEach(() => {
+      window.gon.user_color_scheme = defaultScheme;
+    });
+
+    it('sets default syntax highlighting theme', () => {
+      const expectedTheme = themes.find(t => t.name === DEFAULT_THEME);
+
+      editor = new Editor();
+
+      expect(themeDefineSpy).toHaveBeenCalledWith(DEFAULT_THEME, expectedTheme.data);
+      expect(themeSetSpy).toHaveBeenCalledWith(DEFAULT_THEME);
+    });
+
+    it('sets correct theme if it is set in users preferences', () => {
+      const expectedTheme = themes.find(t => t.name !== DEFAULT_THEME);
+
+      expect(expectedTheme.name).not.toBe(DEFAULT_THEME);
+
+      window.gon.user_color_scheme = expectedTheme.name;
+      editor = new Editor();
+
+      expect(themeDefineSpy).toHaveBeenCalledWith(expectedTheme.name, expectedTheme.data);
+      expect(themeSetSpy).toHaveBeenCalledWith(expectedTheme.name);
+    });
+
+    it('falls back to default theme if a selected one is not supported yet', () => {
+      const name = 'non-existent-theme';
+      const nonExistentTheme = { name };
+
+      window.gon.user_color_scheme = nonExistentTheme.name;
+      editor = new Editor();
+
+      expect(themeDefineSpy).not.toHaveBeenCalled();
+      expect(themeSetSpy).toHaveBeenCalledWith(DEFAULT_THEME);
+    });
+  });
 });