Use GitLab Syntax Highlighting Preference for Web IDE
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 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 that provides themes to match preferences that we already support. Also available as npm package.
Example 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
Original Description
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 |