Skip to content

Introduce new navigation themes in GitLab 11.0

In 10.0 we introduced GitLab navigation themes:

Screen_Shot_2018-02-25_at_8.51.15_PM

For the 11.0 release, let's add an additional color theme.

Design

We add a new red theme, as well as light versions of all the existing themes.

Screenshot_2018-06-02_02.15.51

The hex values for each theme are inside the following block:

$theme-red-50: #fcf4f2; $theme-red-100: #fae9e6; $theme-red-200: #ebcac5; $theme-red-300: #d99b91; $theme-red-400: #b0655a; $theme-red-500: #ad4a3b; $theme-red-600: #9e4133; $theme-red-700: #912f20; $theme-red-800: #78291d; $theme-red-900: #691a16; $theme-red-950: #36140f;

$light-indigo-50: $indigo-50; $light-indigo-100: $indigo-100; $light-indigo-200: $indigo-200; $light-indigo-300: $indigo-300; $light-indigo-400: $indigo-400; $light-indigo-500: $indigo-500; $light-indigo-600: $indigo-600; $light-indigo-700: $indigo-700; $light-indigo-800: $indigo-800; $light-indigo-900: $indigo-900; $light-indigo-950: $indigo-950;

$theme-light-blue-50: #f2f7fc; $theme-light-blue-100: #ebf1f7; $theme-light-blue-200: #c9dcf2; $theme-light-blue-300: #83abd4; $theme-light-blue-400: #4d86bf; $theme-light-blue-500: #367cc2; $theme-light-blue-600: #3771ab; $theme-light-blue-700: #2261a1; $theme-light-blue-800: $theme-blue-800; $theme-light-blue-900: $theme-blue-900; $theme-light-blue-950: $theme-blue-950;

$theme-light-green-50: $theme-green-50; $theme-light-green-100: $theme-green-100; $theme-light-green-200: $theme-green-200; $theme-light-green-300: $theme-green-300; $theme-light-green-400: $theme-green-400; $theme-light-green-500: $theme-green-500; $theme-light-green-600: $theme-green-600; $theme-light-green-700: #156b39; $theme-light-green-800: $theme-green-800; $theme-light-green-900: $theme-green-900; $theme-light-green-950: $theme-green-950;

$theme-light-red-50: #fff6f5; $theme-light-red-100: #fae2de; $theme-light-red-200: #f7d5d0; $theme-light-red-300: #d9796a; $theme-light-red-400: #cf604e; $theme-light-red-500: #c24b38; $theme-light-red-600: #b03927; $theme-light-red-700: #a62e21; $theme-light-red-800: $theme-red-800; $theme-light-red-900: $theme-red-900; $theme-light-red-950: $theme-red-950;

The light themes will be applied throughout the interface just like the existing dark ones, except for these values:

The themes will be in the folowing order in the preferences:

  • Indigo
  • Light indigo
  • Blue
  • Light blue
  • Green
  • Light green
  • Red
  • Light red
  • Dark
  • Light

For the theme preview in preferences, the dark themes stay the same. For the light themes the values are as follows:

| | | | --- | --- | --- | | $theme-700 | $theme-500 | | $theme-600 | $theme-400 |

Edited by Chris Peressini