refactor: remove opacity from GitLab color themes
Overview
- Refactors most 8 digit hex codes in the dark, dark grey, and light themes to be 6 digits (no opacity)
- Two properties keep their opacity to fit with VS Code theme conventions
- Closes #293 (closed)
How to test
- Preview new themes: Clone this project and launch the Web IDE locally
- View current themes: Open any live GitLab project using the Web IDE
- To change themes:
File > Preferences > Theme > Color Theme > Pick Theme
- Theme options: GitLab Light, GitLab Dark, GitLab Dark Grey
- Can quickly check for 8 digit hex codes using a regex search in each theme file:
#[A-Fa-f0-9]{8}\b
- Note: Intentionally kept 2 properties using the 8 digit hex code since they interact with multiple backgrounds
Change Details
Description
- 8 digit hex codes were overlaid on their respective background elements and converted to matching 6 digit color codes.
- Exception for
colors.statusBarItem.hoverBackground
andcolors.sideBar.dropBackground
which should remain as 8 digits. They keep opacity because they interact with multiple backgrounds. - Specific color swap details can be found in Figma
Additional changes
Updated colors.checkbox.border
, colors.dropdown.border
, colors.input.border
to better match background in the light theme.
Examples
Theme | Before & After |
---|---|
Dark Grey | |
Dark | |
Light |
Risks
- Converting opacity values requires finding the correct background when color matching. This process was a mix of deciphering theme property names along with an eye test in the theme previewer so it's possible that some edge case color combos were overlooked.
Other notes
- VS Code deprecated some properties. Their API reference is a bit vague if the linter recommendations match behavior 1:1 so I'll research and address these in a future MR.
- e.g.
IndentGuide.background
,IndentGuide.activeBackground
, andfontStyle
.
- e.g.