GitLab currently supports a Syntax Highlighting preference for users:  This preference is carried over to source view of files within a project, but is not used within the Web IDE. ### Proposal GitLab should apply the users Syntax Highlighting preference to the Web IDE. Monaco already has built in [support for themes](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.idiffeditorconstructionoptions.html#theme) and initially ships with `vs (default)`, `vs-dark` and `hc-black`. We should leverage the Monaco API to dynamically set the theme for each user based on their GitLab Syntax highlighting preference. There is a [3rd party library](https://github.com/brijeshb42/monaco-themes) that provides themes to match preferences that we already support. [Also available as npm package](https://www.npmjs.com/package/monaco-themes). [Example](https://editor.bitwiser.in/) of theme support within Monaco. | Syntax theme | Monaco mode (`base`) | | --- | --- | | White | `vs` | | Dark | `vs-dark` | | Solarized | `Solarized-light` | | Solarized Dark | `Solarized-dark` | | Monokai | `Monokai` | This will provide a more consistent editing experience for users across the GitLab platform and in the Web IDE. ### Links / references - https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-tokens-and-colors - https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.idiffeditorconstructionoptions.html#theme - https://www.npmjs.com/package/monaco-themes <details><summary>Original Description</summary> The Web IDE is for the moment in light theme, but Monaco also supports a dark theme. People who are accustomed to writing code in a dark theme should be able to use the Monaco dark theme. ### Proposal If a dark syntax theme is selected in GitLab preferences, the dark Monaco theme should be used. There should be a mapping table in the Web IDE source code so that the corresponding syntax themes can be added to the Web IDE incrementally and easily. | Syntax theme | Monaco mode (`base`) | | --- | --- | | White | `vs` | | Dark | `vs-dark` | | Solarized | `vs` | | Solarized Dark | `vs-dark` | | Monokai | `vs-dark` | ### Links / references https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-tokens-and-colors </details>