Skip to content

refactor: remove opacity from GitLab color themes

Taylor Vanderhelm requested to merge 293-tv-remove-opacity-ide-themes into main

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 and colors.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_Grey_-_Examples
Dark Dark_-_Examples
Light Light_-_Examples

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

Merge request reports