Skip to content

Rework themes for parity with the old nav

Problem to solve

We've received numerous requests about missing the theme options available in the old navigation. These themes served as a simple way to distinguish GitLab from other webpages, and without them it can be hard to swap between different instances.

Proposal

Each available theme should have a distinct visual representation in the new navigation.

Default.png

Figmacon2.svg View Figma →

Implementation specs

Each of the colored theme will use a similar scale of color variables.

Theme Scale Sidebar border color
Gray $gray-900/100/50 $gray-950 8%
Indigo $t-indigo-900/100/50 $gray-950 8%
Light Indigo $t-indigo-700/100/50 $gray-950 8%
Blue $t-blue-900/100/50 $gray-950 8%
Light Blue $t-light-blue-700/100/50 $gray-950 8%
Green $t-green-900/100/50 $gray-950 8%
Light green $t-green-700/100/50 $gray-950 8%
Red $t-red-900/100/50 $gray-950 8%
Light Red $t-light-red-700/100/50 $gray-950 8%

Data

Current theme usage

Snapshot

Screen_Shot_2022-11-16_at_9.42.49_AM

What does success look like, and how can we measure that?

Edited by Austin Regnery