Rename the "Dark" and "Light" theme to avoid confusion with "Dark Mode"

It was confusing to have a "Dark" navigation theme next to "Dark Mode".
Renaming the "Dark" navigation theme to "Gray" avoids these overlapping terms. To follow the same naming pattern as the other color themes, "Light" got also renamed to "Light Gray".

Changelog: changed

app/assets/stylesheets/pages/profiles/preferences.scss

 .application-theme {
-  $ui-dark-bg: #2e2e2e;
-  $ui-light-bg: #dfdfdf;
+  $ui-gray-bg: #2e2e2e;
+  $ui-light-gray-bg: #dfdfdf;
   $ui-dark-mode-bg: #1f1f1f;
 
   .preview {
@@ -42,13 +42,13 @@
       background-color: $theme-light-red-700;
     }
 
-    &.ui-dark {
-      background-color: $ui-dark-bg;
+    &.ui-gray {
+      background-color: $ui-gray-bg;
       border: solid 1px $border-color;
     }
 
-    &.ui-light {
-      background-color: $ui-light-bg;
+    &.ui-light-gray {
+      background-color: $ui-light-gray-bg;
     }
 
     &.gl-dark {

app/assets/stylesheets/themes/theme_dark.scss → app/assets/stylesheets/themes/theme_gray.scss

 @import './theme_helper';
 
 body {
-  &.ui-dark {
+  &.ui-gray {
     @include gitlab-theme(
       $gray-200,
       $gray-300,

app/assets/stylesheets/themes/theme_light.scss → app/assets/stylesheets/themes/theme_light_gray.scss

 @import './theme_helper';
 
 body {
-  &.ui-light {
+  &.ui-light-gray {
     @include gitlab-theme(
       $gray-500,
       $gray-700,

lib/gitlab/themes.rb

@@ -23,8 +23,8 @@ def available_themes
         Theme.new(8, s_('NavigationTheme|Light Green'), 'ui-light-green', 'theme_light_green', '#156b39'),
         Theme.new(9, s_('NavigationTheme|Red'), 'ui-red', 'theme_red', '#691a16'),
         Theme.new(10, s_('NavigationTheme|Light Red'), 'ui-light-red', 'theme_light_red', '#a62e21'),
-        Theme.new(2, s_('NavigationTheme|Dark'), 'ui-dark', 'theme_dark', '#303030'),
-        Theme.new(3, s_('NavigationTheme|Light'), 'ui-light', 'theme_light', '#666'),
+        Theme.new(2, s_('NavigationTheme|Gray'), 'ui-gray', 'theme_gray', '#303030'),
+        Theme.new(3, s_('NavigationTheme|Light Gray'), 'ui-light-gray', 'theme_light_gray', '#666'),
         Theme.new(11, s_('NavigationTheme|Dark Mode (alpha)'), 'gl-dark', nil, '#303030')
       ]
     end

locale/gitlab.pot

@@ -25207,10 +25207,10 @@ msgstr ""
 msgid "NavigationTheme|Blue"
 msgstr ""
-msgid "NavigationTheme|Dark"
+msgid "NavigationTheme|Dark Mode (alpha)"
 msgstr ""
-msgid "NavigationTheme|Dark Mode (alpha)"
+msgid "NavigationTheme|Gray"
 msgstr ""
 msgid "NavigationTheme|Green"
@@ -25219,10 +25219,10 @@ msgstr ""
 msgid "NavigationTheme|Indigo"
 msgstr ""
-msgid "NavigationTheme|Light"
+msgid "NavigationTheme|Light Blue"
 msgstr ""
-msgid "NavigationTheme|Light Blue"
+msgid "NavigationTheme|Light Gray"
 msgstr ""
 msgid "NavigationTheme|Light Green"

spec/helpers/preferences_helper_spec.rb

@@ -75,7 +75,7 @@
       it "returns user's theme's css_class" do
         stub_user(theme_id: 3)
 
-        expect(helper.user_application_theme).to eq 'ui-light'
+        expect(helper.user_application_theme).to eq 'ui-light-gray'
       end
 
       it 'returns the default when id is invalid' do

spec/lib/gitlab/themes_spec.rb

@@ -8,7 +8,7 @@
       css = described_class.body_classes
 
       expect(css).to include('ui-indigo')
-      expect(css).to include('ui-dark')
+      expect(css).to include('ui-gray')
       expect(css).to include('ui-blue')
     end
   end
@@ -16,7 +16,7 @@
   describe '.by_id' do
     it 'returns a Theme by its ID' do
       expect(described_class.by_id(1).name).to eq 'Indigo'
-      expect(described_class.by_id(3).name).to eq 'Light'
+      expect(described_class.by_id(3).name).to eq 'Light Gray'
     end
   end