Add functionality for two themes

app/assets/stylesheets/framework.scss

@@ -19,6 +19,7 @@
 @import "framework/flash";
 @import "framework/forms";
 @import "framework/gfm";
+@import "framework/gitlab-theme.scss";
 @import "framework/header";
 @import "framework/highlight";
 @import "framework/issue_box";

app/assets/stylesheets/framework/gitlab-theme.scss

@@ -0,0 +1,122 @@
+/**
+ * Styles the GitLab application with a specific color theme
+ *
+ * $color-light  -
+ * $color        -
+ * $color-darker -
+ * $color-dark   -
+ */
+@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
+
+
+  header.navbar-gitlab-new {
+    background: linear-gradient(to right, $color-darker, $color);
+  }
+
+
+
+
+
+
+
+
+
+  .page-with-sidebar {
+    .toggle-nav-collapse,
+    .pin-nav-btn {
+      color: $color-light;
+
+      &:hover {
+        color: $white-light;
+      }
+    }
+
+    .sidebar-wrapper {
+      background: $color-darker;
+    }
+
+    .sidebar-action-buttons {
+      color: $color-light;
+      background-color: lighten($color-darker, 5%);
+    }
+
+    .nav-sidebar {
+      li {
+        a {
+          color: $color-light;
+
+          &:hover,
+          &:focus,
+          &:active {
+            background: $color-dark;
+          }
+
+          i {
+            color: $color-light;
+          }
+
+          path,
+          polygon {
+            fill: $color-light;
+          }
+
+          .count {
+            color: $color-light;
+            background: $color-dark;
+          }
+
+          svg {
+            position: relative;
+            top: 3px;
+          }
+        }
+
+        &.separate-item {
+          border-top: 1px solid $color;
+        }
+
+        &.active a {
+          color: $white-light;
+          background: $color-dark;
+
+          &.no-highlight {
+            border: none;
+          }
+
+          i {
+            color: $white-light;
+          }
+
+          path,
+          polygon {
+            fill: $white-light;
+          }
+        }
+      }
+
+      .about-gitlab {
+        color: $color-light;
+      }
+    }
+  }
+}
+
+$theme-black-light: #979797;
+$theme-black: #373737;
+$theme-black-dark: #272727;
+$theme-black-darker: #222;
+
+$theme-indigo-light: #98c;
+$theme-indigo: #548;
+$theme-indigo-dark: #436;
+$theme-indigo-darker: #325;
+
+body {
+  &.ui_indigo {
+    @include gitlab-theme($theme-indigo-light, $theme-indigo, $theme-indigo-dark, $theme-indigo-darker);
+  }
+
+  &.ui_dark {
+    @include gitlab-theme($theme-black-light, $theme-black, $theme-black-dark, $theme-black-darker);
+  }
+}

app/views/layouts/application.html.haml

@@ -1,7 +1,7 @@
 !!! 5
 %html{ lang: I18n.locale, class: page_class }
   = render "layouts/head"
-  %body{ class: @body_class, data: { page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}", find_file: find_file_path } }
+  %body{ class: "#{user_application_theme} #{@body_class}", data: { page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}", find_file: find_file_path } }
     = render "layouts/init_auto_complete" if @gfm_form
     = render 'peek/bar'
     = render "layouts/header/default"

app/views/profiles/preferences/show.html.haml

@@ -3,6 +3,19 @@
 = 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 theme
+  .col-lg-8.application-theme
+    - Gitlab::Themes.each do |theme|
+      = label_tag do
+        .preview{ class: theme.css_class }
+        = 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

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')

config/gitlab.yml.example

@@ -77,13 +77,9 @@ production: &base
     # default_can_create_group: false  # default: true
     # username_changing_enabled: false # default: true - User can change her username/namespace
     ## Default theme ID
-    ##   1 - Graphite
-    ##   2 - Charcoal
-    ##   3 - Green
-    ##   4 - Gray
-    ##   5 - Violet
-    ##   6 - Blue
-    # default_theme: 2 # default: 2
+    ##   1 - Indigo
+    ##   2 - Dark
+    # default_theme: 1 # default: 1
 
     ## Automatic issue closing
     # If a commit message matches this regular expression, all issues referenced from the matched text will be closed.
@@ -749,4 +745,4 @@ test:
         admin_group: ''
 
 staging:
-  <<: *base
+  <<: *base

lib/gitlab/themes.rb

@@ -12,12 +12,8 @@ module Gitlab
 
     # All available Themes
     THEMES = [
-      Theme.new(1, 'Graphite', 'ui_graphite'),
-      Theme.new(2, 'Charcoal', 'ui_charcoal'),
-      Theme.new(3, 'Green',    'ui_green'),
-      Theme.new(4, 'Black',    'ui_black'),
-      Theme.new(5, 'Violet',   'ui_violet'),
-      Theme.new(6, 'Blue',     'ui_blue')
+      Theme.new(1, 'Indigo', 'ui_indigo'),
+      Theme.new(2, 'Dark', 'ui_dark')
     ].freeze
 
     # Convenience method to get a space-separated String of all the theme

spec/lib/gitlab/themes_spec.rb

@@ -5,16 +5,16 @@ describe Gitlab::Themes, lib: true do
     it 'returns a space-separated list of class names' do
       css = described_class.body_classes
 
-      expect(css).to include('ui_graphite')
-      expect(css).to include(' ui_charcoal ')
-      expect(css).to include(' ui_blue')
+      expect(css).to include('ui_indigo')
+      # expect(css).to include(' ui_charcoal ')
+      # expect(css).to include(' ui_blue')
     end
   end
 
   describe '.by_id' do
     it 'returns a Theme by its ID' do
-      expect(described_class.by_id(1).name).to eq 'Graphite'
-      expect(described_class.by_id(6).name).to eq 'Blue'
+      expect(described_class.by_id(1).name).to eq 'Indigo'
+      # expect(described_class.by_id(6).name).to eq 'Blue'
     end
   end