Dark mode for the Web IDE in GitLab

The Web IDE is fully integrated into the GitLab workflow:

• Edit/upload a file
• Write and code with advanced syntax highlighting & tools tips
• Commit the change, create a branch and Merge Request
• CI/CD feedback on the right, no context switches

This really works well and has improved my workflows ever since. The context switch to the shell or a separate IDE always led to "What was I doing before?".

Dark Mode

One thing which is greatly requested for GitLab and the Web IDE: Dark mode as a theme. The forms, buttons and views in GitLab itself will need iterative changes, as it is not just inverting from white to black backgrounds for the color scheme.

Marcel highlighted in his UX showcase video that the Web IDE has several components less, allowing to iterate on the views and theming options more easily. Still, there are challenges involved with using the existing themes - dark, solarized dark, etc.

When you watch the video, you'll learn another cool thing: Figma for creation and design of the UX assets. Marcel provides a demo how color changes affect the entire Web IDE. He also outlines that Figma provides interfaces for developers who may later just adopt the SCSS variables. Implementation alongside UX design is a great and efficient way to work!

Please follow the progress on dark mode for the Web IDE in this epic targeting GitLab 13.0 and share your feedback!

PS: You can learn more about the Web IDE and CI/CD in my recent meetup workshop, including several exercises.