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 | `Pygments - Tomorrow Theme`* | | Solarized | `Solarized-light` | | Solarized Dark | `Solarized-dark` | | Monokai | `Monokai` | * Notes on [Pygments - Tomorrow Theme](https://gitlab.com/gitlab-org/gitlab/issues/195701#note_268717800) This will provide a more consistent editing experience for users across the GitLab platform and in the Web IDE. ### Metrics Data We're currently tracking the use of this preference here https://docs.google.com/spreadsheets/d/1I5h9gf3vGJYF9VfXJg_X3NSZ9Ugu5QoxnHPqqDKIp6s/edit#gid=0 (Internal Only) ### 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