diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index c0524bf6aa3d84787ad075b228d03caf8346d2a8..14e191343028ff350c232904ea0827d872f6664d 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/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";
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cec306642887875e3685bd74ed1ebf7f2eea5319
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 65ac8aaa59b629bf83de943a3a0f026e2a1ea516..0ca34b276a71f202b3bd21eda0efaffecb2c9f1d 100644
--- a/app/views/layouts/application.html.haml
+++ b/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"
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 9e7fe556d88a17664e282a0636d1e132de24ca83..9787a567b4dc9ea9cf5892934b04de1fc3b4cca7 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/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
diff --git a/app/views/profiles/preferences/update.js.erb b/app/views/profiles/preferences/update.js.erb
index 431ab9d052b989fedd2bff41f6c568f17054dbc9..8966dd3fd862fe8bc3dd4c4c20a6fcb84375fa86 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')
diff --git a/config/gitlab.yml.example b/config/gitlab.yml.example
index 1ca0f263f133b9e44949465ad87e16528e2a63ff..5439cd3d4a2226a387346bbb47fb58582ed42583 100644
--- a/config/gitlab.yml.example
+++ b/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
\ No newline at end of file
+ <<: *base
diff --git a/lib/gitlab/themes.rb b/lib/gitlab/themes.rb
index 19ab76ae80f6a6b26d3e5c694e76511b14700499..1714b6d2c994be118ecaa21335e08ba2930c8621 100644
--- a/lib/gitlab/themes.rb
+++ b/lib/gitlab/themes.rb
@@ -12,12 +12,8 @@ module Themes
# 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
diff --git a/spec/lib/gitlab/themes_spec.rb b/spec/lib/gitlab/themes_spec.rb
index 7a140518dd2448f348fa46907157d7caab6da44c..296ac6269384135390b19d679bbf088b06586321 100644
--- a/spec/lib/gitlab/themes_spec.rb
+++ b/spec/lib/gitlab/themes_spec.rb
@@ -5,16 +5,16 @@
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