…
|
||
---|---|---|
.. | ||
README.md | ||
_dark.scss | ||
_monokai.scss | ||
_solarized-dark.scss | ||
_solarized-light.scss |
README.md
Web IDE Themes
Web IDE currently supports 5 syntax highlighting themes based on themes from the user's profile preferences:
- White
- Dark
- Monokai
- Solarized Dark
- Solarized Light
Currently, the Web IDE supports the white theme by default, and the dark theme by the introduction of CSS variables.
The Web IDE automatically adds an appropriate theme class to the ide.vue
component based on the current syntax
highlighting theme. Below are those theme classes, which come from the gon.user_color_scheme
global setting:
# | Color Scheme | gon.user_color_scheme |
Theme class |
---|---|---|---|
1 | White | "white" |
.theme-white |
2 | Dark | "dark" |
.theme-dark |
3 | Monokai | "monokai" |
.theme-monokai |
4 | Solarized Dark | "solarized-dark" |
.theme-solarized-dark |
5 | Solarized Light | "solarized-light" |
.theme-solarized-light |
6 | None | "none" |
.theme-none |
Adding New Themes (SCSS)
To add a new theme, follow the following steps:
- Pick a theme from the table above, lets say Solarized Dark.
- Create a new file in this folder called
_solarized_dark.scss
. - Copy over all the CSS variables from
_dark.scss
to_solarized_dark.scss
and assign them your own values. Put them under the selector.ide.theme-solarized-dark
. - Import this newly created SCSS file in
ide.scss
file in the parent directory. - That's it! Raise a merge request with your newly added theme.
Modifying Monaco Themes
Monaco themes are defined in Javascript and are stored in the app/assets/javascripts/ide/lib/themes/
directory.
To modify any syntax highlighting colors or to synchronize the theme colors with syntax highlighting colors, you
can modify the files in that directory directly.