Merge branch '35012-navigation-add-option-to-change-navigation-color-palette' into 'master'

Add option to change navigation color palette

Closes #35012

See merge request !13619

2 files changed, 24 insertions, 0 deletions

diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 9e7fe556d88..2b72eeab8d6 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -3,6 +3,26 @@
 = render 'profiles/head'
 
 = form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { class: 'row prepend-top-default js-preferences-form' } do |f|
+  .col-lg-4.application-theme
+    %h4.prepend-top-0
+      GitLab navigation theme
+    %p Customize the appearance of the application header and navigation sidebar.
+  .col-lg-8.application-theme
+    - Gitlab::Themes.each do |theme|
+      = label_tag do
+        .preview{ class: theme.name.downcase }
+          .preview-row
+            .quadrant.one
+            .quadrant.two
+          .preview-row
+            .quadrant.three
+            .quadrant.four
+        = f.radio_button :theme_id, theme.id
+        = theme.name
+
+  .col-sm-12
+    %hr
+
   .col-lg-4.profile-settings-sidebar
     %h4.prepend-top-0
       Syntax highlighting theme
diff --git a/app/views/profiles/preferences/update.js.erb b/app/views/profiles/preferences/update.js.erb
index 431ab9d052b..8966dd3fd86 100644
--- a/app/views/profiles/preferences/update.js.erb
+++ b/app/views/profiles/preferences/update.js.erb
@@ -1,3 +1,7 @@
+// Remove body class for any previous theme, re-add current one
+$('body').removeClass('<%= Gitlab::Themes.body_classes %>')
+$('body').addClass('<%= user_application_theme %>')
+
 // Toggle container-fluid class
 if ('<%= current_user.layout %>' === 'fluid') {
   $('.content-wrapper .container-fluid').removeClass('container-limited')