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