Add Dracula syntax highlighting theme
What does this MR do and why?
This adds Dracula as a syntax highlighting color scheme in user preferences, alongside Monokai, Solarized and the others.
It's registered in Gitlab::ColorSchemes with id 7, so it shows up in the dropdown and gets validated like the rest without a migration. The stylesheet and the merge conflict colors start from the Monokai theme and are remapped to the official Dracula palette.
Every scheme in preferences has a small preview thumbnail. Rather than hand-draw the Dracula one, I added a rake task (gitlab:color_schemes:preview_images) that builds all of them from a single HTML template in GitLab Mono. It runs a sample snippet through the real Rouge lexer and colors each token with whatever its class is set to in that scheme's stylesheet, so a thumbnail always matches the theme it stands for and they line up with each other. I regenerated all seven with it. For Dracula the colors follow the official dracula/pygments mapping: class names green, constants foreground, instance variables cyan.
The task is documented under doc/development/fe_guide/blob_syntax_highlighting.md. Specs and the gettext catalog are updated to match.
Closes #349287.
References
- Closes #349287
- Dracula palette reference: https://draculatheme.com/contribute
Screenshots or screen recordings
Here is a short demo running in a local GDK. It switches to the new Dracula scheme in user preferences, then opens JavaScript, Ruby, Go and Python files and a commit diff with the theme applied.
| Before | After |
|---|---|
| Preferences offered Light, Dark, Monokai, Solarized Light and Solarized Dark | Dracula is now available as an additional option with its own preview |
How to set up and validate locally
- Check out this branch in your GDK.
- Go to
http://127.0.0.1:3000/-/profile/preferencesand find the Syntax highlighting theme section. - Pick Dracula and save. The preview thumbnail should render with the Dracula colors.
- Open any file or commit diff, for example a
.rb,.js,.goor.pyfile, and confirm the highlighting uses the Dracula palette.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.