Merge pull request #504 from taigaio/astagi-feature/newthemes

Add custom themes \o/ (based on Astagi feature/newthemes)

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Ability to create single-line or multi-line custom fields. (thanks to [@artlepool](https://github.com/artlepool))
 - Add custom videoconference system.
 - Make burndown chart collapsible at the backlog panel.
+- Ability to choose a theme (thanks to [@astagi](https://github.com/astagi))
 
 ### Misc
 - Improve performance: Show cropped images in timelines.

app-loader/app-loader.coffee

@@ -4,6 +4,8 @@ window.taigaConfig = {
     "eventsUrl": null,
     "debug": true,
     "defaultLanguage": "en",
+    "themes": ["taiga", "material-design", "high-contrast"],
+    "defaultTheme": "taiga",
     "publicRegisterEnabled": true,
     "feedbackEnabled": true,
     "privacyPolicyUrl": null,

app/coffee/modules/auth.coffee

@@ -37,9 +37,11 @@ class AuthService extends taiga.Service
                  "$tgUrls",
                  "$tgConfig",
                  "$translate",
-                 "tgCurrentUserService"]
+                 "tgCurrentUserService",
+                 "tgThemeService"]
 
-    constructor: (@rootscope, @storage, @model, @rs, @http, @urls, @config, @translate, @currentUserService) ->
+    constructor: (@rootscope, @storage, @model, @rs, @http, @urls, @config, @translate, @currentUserService,
+                  @themeService) ->
         super()
         userModel = @.getUser()
         @.setUserdata(userModel)
@@ -51,9 +53,12 @@ class AuthService extends taiga.Service
         else
             @.userData = null
 
+    _setTheme: ->
+        theme = @rootscope.user?.theme || @config.get("defaultTheme") || "taiga"
+        @themeService.use(theme)
 
     _setLocales: ->
-        lang = @rootscope.user.lang || @config.get("defaultLanguage") || "en"
+        lang = @rootscope.user?.lang || @config.get("defaultLanguage") || "en"
         @translate.preferredLanguage(lang)  # Needed for calls to the api in the correct language
         @translate.use(lang)                # Needed for change the interface in runtime
 
@@ -66,6 +71,7 @@ class AuthService extends taiga.Service
             user = @model.make_model("users", userData)
             @rootscope.user = user
             @._setLocales()
+            @._setTheme()
             return user
 
         return null
@@ -78,6 +84,7 @@ class AuthService extends taiga.Service
         @.setUserdata(user)
 
         @._setLocales()
+        @._setTheme()
 
     clear: ->
         @rootscope.auth = null
@@ -117,9 +124,12 @@ class AuthService extends taiga.Service
     logout: ->
         @.removeToken()
         @.clear()
-
         @currentUserService.removeUser()
 
+        @._setTheme()
+        @._setLocales()
+
+
     register: (data, type, existing) ->
         url = @urls.resolve("auth-register")
 

app/coffee/modules/user-settings/main.coffee

@@ -57,6 +57,7 @@ class UserSettingsController extends mixOf(taiga.Controller, taiga.PageMixin)
             @location.replace()
 
         @scope.lang = @getLan()
+        @scope.theme = @getTheme()
 
         maxFileSize = @config.get("maxUploadFileSize", null)
         if maxFileSize
@@ -68,6 +69,8 @@ class UserSettingsController extends mixOf(taiga.Controller, taiga.PageMixin)
         promise.then null, @.onInitialDataError.bind(@)
 
     loadInitialData: ->
+        @scope.availableThemes = @config.get("themes", [])
+
         return @rs.locales.list().then (locales) =>
             @scope.locales = locales
             return locales
@@ -79,6 +82,11 @@ class UserSettingsController extends mixOf(taiga.Controller, taiga.PageMixin)
         return @scope.user.lang ||
                @translate.preferredLanguage()
 
+    getTheme: ->
+        return @scope.user.theme ||
+               @config.get("defaultTheme") ||
+               "taiga"
+
 module.controller("UserSettingsController", UserSettingsController)
 
 
@@ -96,6 +104,7 @@ UserProfileDirective = ($confirm, $auth, $repo, $translate) ->
 
             changeEmail = $scope.user.isAttributeModified("email")
             $scope.user.lang = $scope.lang
+            $scope.user.theme = $scope.theme
 
             onSuccess = (data) =>
                 $auth.setUser(data)

app/index.jade

@@ -10,7 +10,7 @@ html(lang="en")
         meta(name="description", content="Taiga is a project management platform for startups and agile developers & designers who want a simple, beautiful tool that makes work truly enjoyable.")
         meta(name="keywords", content="agile, scrum, taiga, management, project, developer, designer, user experience")
         //-meta(name="viewport", content="width=device-width, user-scalable=no")
-        link(rel="stylesheet", href="/styles/main.css")
+        link(rel="stylesheet", href="/styles/theme-taiga.css")
         link(rel="icon", type="image/png", href="/images/favicon.png")
 
         //- PRERENDER SERVICE: This is to know when the page is completely loaded.

app/locales/locale-en.json

@@ -1193,7 +1193,9 @@
             "BIO": "Bio (max. 210 chars)",
             "PLACEHOLDER_BIO": "Tell us something about you",
             "LANGUAGE": "Language",
-            "LANGUAGE_DEFAULT": "-- use default language --"
+            "LANGUAGE_DEFAULT": "-- use default language --",
+            "THEME": "Theme",
+            "THEME_DEFAULT": "-- use default theme --"
         }
     },
     "WIZARD": {

app/modules/home/projects/home-project-list.scss

@@ -7,7 +7,7 @@
         padding: 1rem;
         text-overflow: ellipsis;
         &:hover {
-            border-color: $fresh-taiga;
+            border-color: $primary-light;
             transition: all .3s linear;
             p {
                 color: $gray;

app/modules/navigation-bar/navigation-bar.scss

@@ -1,11 +1,11 @@
+$dropdown-width: 350px;
+
 .navbar {
-    background: rgba($black, .5);
     display: flex;
     height: $navbar;
     justify-content: space-between;
     position: relative;
     &:after {
-        background: url('../images/menu-vert.png') repeat top left;
         background-size: 200%;
         bottom: 0;
         content: '';
@@ -24,6 +24,7 @@
     }
     .nav-left {
         >a {
+            color: $white;
             padding: .5rem 1.5rem;
             &.logo {
                 background: rgba($black, .2);
@@ -41,6 +42,7 @@
     .nav-right {
         margin-left: auto;
         a {
+            color: $white;
             padding: .5rem 2rem;
         }
     }
@@ -48,10 +50,12 @@
         color: $white;
         display: inline-block;
         transition: all .2s linear;
-        &.active,
+        svg path {
+            fill: darken($primary-dark, 8%);
+        }
         &:hover {
             background: rgba($black, .2);
-            color: $fresh-taiga;
+            color: $primary-light;
             svg path {
                 fill: $white;
             }
@@ -77,7 +81,7 @@
         height: 1.2rem;
         max-width: 1.2rem;
         path {
-            fill: $dark-taiga;
+            fill: $top-icon-color;
             transition: all .2s;
         }
     }
@@ -130,7 +134,7 @@
         padding: .8rem .5rem;
         &:hover {
             background: rgba($white, .1);
-            color: $fresh-taiga;
+            color: $primary-light;
         }
         &.see-more-projects-btn,
         &.create-organization-btn,

app/modules/profile/styles/profile-contacts.scss

@@ -16,7 +16,7 @@
         &:hover,
         &.active {
             border-bottom: 2px solid $gray-light;
-            color: $green-taiga;
+            color: $primary;
         }
     }
 }

app/modules/profile/styles/profile-content-tabs.scss

@@ -18,7 +18,7 @@
             top: 1px;
             transition: color .2s linear;
             .icon {
-                color: $green-taiga;
+                color: $primary;
                 transition: color .2s linear;
             }
         }

app/modules/profile/styles/profile-favorites.scss

@@ -14,7 +14,7 @@
             &:hover,
             &.active {
                 border-bottom: 2px solid $gray-light;
-                color: $green-taiga;
+                color: $primary;
             }
         }
     }

app/modules/profile/styles/profile-sidebar.scss

@@ -16,7 +16,7 @@
         color: $gray-light;
     }
     a {
-        color: $green-taiga;
+        color: $primary;
     }
     .trans-button {
         margin-bottom: 1rem;

app/modules/projects/listing/projects-listing.scss

@@ -58,7 +58,7 @@
         }
         .active {
             .icon {
-                color: $star-fill;
+                color: $primary-light;
             }
         }
     }

app/modules/projects/listing/styles/project-list.scss

@@ -47,7 +47,7 @@
     .project-list-single {
         background: $white;
         &:hover {
-            background: lighten($green-taiga, 60%);
+            background: lighten($primary, 60%);
             cursor: move;
             transition: background .3s;
             .drag {

app/modules/services/theme.service.coffee

@@ -0,0 +1,15 @@
+taiga = @.taiga
+
+
+class ThemeService extends taiga.Service = ->
+    use: (themeName) ->
+        stylesheetEl = $("link[rel='stylesheet']")
+
+        if stylesheetEl.length == 0
+            stylesheetEl = $("<link rel='stylesheet' href='' type='text/css'>")
+            $("head").append(stylesheetEl)
+
+        stylesheetEl.attr("href", "/styles/theme-#{themeName}.css")
+
+
+angular.module("taigaCommon").service("tgThemeService", ThemeService)

app/modules/services/theme.service.spec.coffee

@@ -0,0 +1,17 @@
+describe "ThemeService", ->
+    themeService = null
+    data = {
+        theme: "testTheme"
+    }
+
+    _inject = () ->
+        inject (_tgThemeService_) ->
+            themeService = _tgThemeService_
+
+    beforeEach ->
+        module "taigaCommon"
+        _inject()
+
+    it "use a test theme", () ->
+        themeService.use(data.theme)
+        expect($("link[rel='stylesheet']")).to.have.attr("href", "/styles/theme-#{data.theme}.css")

app/modules/user-timeline/user-timeline/user-timeline.scss

@@ -7,13 +7,13 @@
             margin-bottom: 0;
         }
         a {
-            color: $green-taiga;
+            color: $primary;
             &:first-child {
                 @extend %bold;
                 color: $gray;
             }
             &:hover {
-                color: $fresh-taiga;
+                color: $primary-light;
             }
         }
         blockquote {

app/partials/user/user-profile.jade

@@ -30,7 +30,7 @@ div.wrapper(tg-user-profile, ng-controller="UserSettingsController as ctrl",
 
                 div.data
                     fieldset
-                        label(for="email", translate="USER_PROFILE.FIELD.USERNAME")
+                        label(for="username", translate="USER_PROFILE.FIELD.USERNAME")
                         input(type="text", name="username", id="username",
                               placeholder="{{'USER_PROFILE.FIELD.USERNAME' | translate}}",
                               ng-model="user.username", data-required="true", data-maxlength="255",
@@ -51,16 +51,23 @@ div.wrapper(tg-user-profile, ng-controller="UserSettingsController as ctrl",
                               data-maxlength="256")
 
                     fieldset
-                        label(for="full-name", translate="USER_PROFILE.FIELD.LANGUAGE")
+                        label(for="lang", translate="USER_PROFILE.FIELD.LANGUAGE")
-                        select(ng-model="lang",
+                        select(name="lang", id="lang", ng-model="lang",
                                ng-options="locale.code as locale.name for locale in locales")
                             option(value="", translate="USER_PROFILE.FIELD.LANGUAGE_DEFAULT")
 
+                     fieldset
+                        label(for="theme", translate="USER_PROFILE.FIELD.THEME")
+                        select(name="theme", id="theme", ng-model="theme",
+                               ng-options="availableTheme for availableTheme in availableThemes")
+                            option(value="", translate="USER_PROFILE.FIELD.THEME_DEFAULT")
+
                     fieldset
                         label(for="bio", translate="USER_PROFILE.FIELD.BIO")
 
                         textarea(name="bio", id="bio", ng-model="user.bio",
-                                 ng-attr-placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_BIO' | translate}}", ng-maxlength="210", maxlength="210")
+                                 ng-attr-placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_BIO' | translate}}",
+                                 ng-maxlength="210", maxlength="210")
 
             fieldset.submit
                 button.button-green.submit-button(type="submit", title="{{'COMMON.SAVE' | translate}}",

app/styles/components/buttons.scss

@@ -46,7 +46,7 @@
     &.active {
         span,
         .icon {
-            color: $green-taiga;
+            color: $primary;
         }
     }
 }
@@ -59,10 +59,10 @@
 .button-green,
 a.button-green {
     @extend %button;
-    background: $green-taiga;
+    background: $primary;
     &:hover,
     &.active {
-        background: $fresh-taiga;
+        background: $primary-light;
         color: $white;
     }
 }
@@ -73,7 +73,7 @@ a.button-gray {
     background: $gray;
     &:hover,
     &.active {
-        background: $fresh-taiga;
+        background: $primary-light;
         color: $white;
     }
 }
@@ -111,13 +111,13 @@ a.button-gray {
 
 .button-bulk {
     @extend %button;
-    background: $green-taiga;
+    background: $primary;
     padding: .35rem .5rem;
     .icon {
         margin-right: 0;
     }
     &:hover {
-        background: $fresh-taiga;
+        background: $primary-light;
     }
 }
 

app/styles/components/check.scss

@@ -39,7 +39,7 @@
     }
     input:checked {
         + div {
-            background-color: $fresh-taiga;
+            background-color: $primary-light;
             margin-left: 50%;
             transition: all .2s linear;
         }

app/styles/components/created-by.scss

@@ -23,7 +23,7 @@
         }
         .created-user {
             @extend %large;
-            color: $green-taiga;
+            color: $primary;
             cursor: default;
             &.editable {
                 cursor: pointer;

app/styles/components/kanban-task.scss

@@ -1,6 +1,6 @@
 .kanban-task {
-    background: $postit;
+    background: $card;
-    border: 1px solid $postit-hover;
+    border: 1px solid $card-hover;
     box-shadow: none;
     cursor: move;
     margin: .2rem;
@@ -11,7 +11,7 @@
     &:hover {
         .icon-edit,
         .icon-drag-h {
-            color: $postit-dark-hover;
+            color: $card-dark;
             display: block;
             opacity: 1;
             transition: color .3s linear, opacity .3s linear;
@@ -34,12 +34,12 @@
         }
     }
     .kanban-tagline {
-        border-color: $postit-hover;
+        border-color: $card-hover;
         display: flex;
         height: .6rem;
     }
     .kanban-tag {
-        border-top: .3rem solid $postit-hover;
+        border-top: .3rem solid $card-hover;
         flex-basis: 0;
         flex-grow: 1;
         height: .6rem;
@@ -66,7 +66,7 @@
         img {
             margin: 0 auto;
             &:hover {
-                border: 2px solid $green-taiga;
+                border: 2px solid $primary;
                 transition: border .3s linear;
             }
         }
@@ -77,7 +77,7 @@
         padding: 0 .5rem 0 .8rem;
     }
     .task-assigned {
-        color: $postit-dark-hover;
+        color: $card-dark;
         display: block;
     }
     .task-num {
@@ -90,12 +90,12 @@
     .icon-edit,
     .icon-drag-h {
         @extend %large;
-        color: $postit-hover;
+        color: $card-hover;
         opacity: 0;
         position: absolute;
         transition: opacity .2s linear;
         &:hover {
-            color: darken($postit-hover, 15%);
+            color: darken($card-hover, 15%);
             transition: color .3s linear;
         }
     }
@@ -144,7 +144,7 @@
     }
     .task-points {
         @extend %small;
-        color: darken($postit-hover, 15%);
+        color: darken($card-hover, 15%);
         margin: 0;
         span {
             display: inline-block;

app/styles/components/markdown-help.scss

@@ -8,7 +8,7 @@ a.help-button {
             transition: color .2s linear;
         }
         .icon {
-            color: $fresh-taiga;
+            color: $primary-light;
             transition: color .2s linear;
         }
     }

app/styles/components/notification-message.scss

@@ -1,5 +1,5 @@
 .notification-message-success {
-    background: rgba($fresh-taiga, .95);
+    background: rgba($primary-light, .95);
     box-shadow: 0 25px 10px -15px rgba(0, 0, 0, .05);
     opacity: 1;
     right: -370px;

app/styles/components/paginator.scss

@@ -24,7 +24,7 @@
     }
     .active {
         span {
-            background: $fresh-taiga;
+            background: $primary-light;
         }
     }
     .dots {

app/styles/components/summary.scss

@@ -15,7 +15,7 @@ $summary-background: $grayer;
     }
     .data {
         .number {
-            color: $fresh-taiga;
+            color: $primary-light;
         }
     }
     .number {
@@ -82,7 +82,7 @@ $summary-background: $grayer;
     position: relative;
     width: 15%;
     .current-progress {
-        background: $fresh-taiga;
+        background: $primary-light;
         height: 24px;
     }
     .defined-points {
@@ -97,7 +97,7 @@ $summary-background: $grayer;
         position: absolute;
     }
     .closed-points-progress {
-        background: $fresh-taiga;
+        background: $primary-light;
         height: 24px;
         position: absolute;
     }
@@ -136,11 +136,11 @@ $summary-background: $grayer;
             float: right;
             transition: color .3s linear;
             &:hover {
-                color: $fresh-taiga;
+                color: $primary-light;
                 transition: color .3s linear;
             }
             &.active {
-                color: $fresh-taiga;
+                color: $primary-light;
             }
             &.active:hover {
                 color: $green-taiga;

app/styles/components/tag.scss

@@ -22,7 +22,7 @@
     border: 1px solid $gray-light;
     z-index: 99910;
     .ui-state-focus {
-        background: $fresh-taiga;
+        background: $primary-light;
     }
     li {
         cursor: pointer;
@@ -49,7 +49,7 @@
     .add-tag {
         color: $gray-light;
         &:hover {
-            color: $fresh-taiga;
+            color: $primary-light;
         }
     }
     .icon-plus {

app/styles/components/taskboard-task.scss

@@ -1,6 +1,6 @@
 .taskboard-task {
-    background: $postit;
+    background: $card;
-    border: 1px solid $postit-hover;
+    border: 1px solid $card-hover;
     box-shadow: none;
     cursor: move;
     margin: .2rem;
@@ -8,7 +8,7 @@
     &:hover {
         .icon-edit,
         .icon-drag-h {
-            color: $postit-dark-hover;
+            color: $card-dark;
             display: block;
             opacity: 1;
             transition: color .3s linear, opacity .3s linear;
@@ -37,12 +37,12 @@
         }
     }
     .taskboard-tagline {
-        border-color: $postit-hover;
+        border-color: $card-hover;
         display: flex;
         height: .6rem;
     }
     .taskboard-tag {
-        border-top: .3rem solid $postit-hover;
+        border-top: .3rem solid $card-hover;
         flex-basis: 0;
         flex-grow: 1;
         height: .6rem;
@@ -64,7 +64,7 @@
         img {
             margin: 0 auto;
             &:hover {
-                border: 2px solid $green-taiga;
+                border: 2px solid $primary;
                 transition: border .3s linear;
             }
         }
@@ -86,10 +86,10 @@
     }
     .task-assigned {
         @extend %small;
-        color: $postit-dark-hover;
+        color: $card-dark;
         display: block;
         &:hover {
-            color: $green-taiga;
+            color: $primary;
         }
     }
     .task-num {
@@ -113,11 +113,11 @@
     .icon-drag-h {
         @extend %large;
         bottom: .5rem;
-        color: $postit-hover;
+        color: $card-hover;
         opacity: 0;
         position: absolute;
         &:hover {
-            color: $postit-dark-hover;
+            color: $card-dark;
         }
     }
     .icon-edit {

app/styles/components/wysiwyg.scss

@@ -40,9 +40,9 @@
         }
     }
     a {
-        color: $green-taiga;
+        color: $primary;
         &:hover {
-            color: $fresh-taiga;
+            color: $primary-light;
         }
     }
     p {

app/styles/core/base.scss

@@ -5,8 +5,6 @@ html {
 }
 body {
     @extend %text;
-    background: $white; // fallback
-    color: $grayer;
     line-height: 1.3;
     min-height: 100%;
     width: 100%;
@@ -17,15 +15,6 @@ body {
     }
     &.loading-project {
         overflow: hidden;
-        .projects-nav-overlay {
-            opacity: 1;
-            overflow: hidden;
-            transition: opacity 1s ease;
-            div {
-                opacity: 1;
-                transition: opacity 1s ease;
-            }
-        }
     }
 }
 
@@ -38,7 +27,6 @@ body {
 }
 
 .master {
-    background: $white;
     height: 100%;
     min-height: 100%;
     position: relative;
@@ -57,7 +45,6 @@ body {
 }
 
 .menu-secondary {
-    background: $whitish;
     flex: 0 0 auto;
     min-height: $main-height;
     min-width: 0;
@@ -84,17 +71,11 @@ body {
 }
 
 .menu-tertiary {
-    background-color: $dark-taiga;
     flex: 0 0 auto;
     min-height: $main-height;
     width: 250px;
 }
 
-.extrabar {
-    background: $whitish;
-}
-
-%main,
 .main {
     flex: 4;
     flex-basis: 600px;

app/styles/core/elements.scss

@@ -3,16 +3,13 @@
 // Blockquotes
 blockquote,
 blockquote p {
-    color: $gray;
     line-height: 1.25rem;
 }
 blockquote {
-    border-left: 5px solid $whitish;
     margin: 0 0 20px;
     padding: .5rem 1.25rem;
     cite {
         @extend %small;
-        color: $gray;
         display: block;
         &:before {
             content: '\2014 \0020';
@@ -59,14 +56,14 @@ sup {
     }
     .is-selected {
         .pika-button {
-            background: $green-taiga;
+            background: $primary;
             border-radius: 0 !important;
-            box-shadow: inset 0 1px 3px $green-taiga;
+            box-shadow: inset 0 1px 3px $primary;
         }
     }
     .is-today {
         .pika-button {
-            color: $green-taiga;
+            color: $primary;
         }
         &.is-selected {
             button {
@@ -76,9 +73,9 @@ sup {
     }
     .pika-button {
         &:hover {
-            background: $fresh-taiga !important; //Important added because plugin has it :S
+            background: $primary-light !important; //Important added because plugin has it :S
             border-radius: 0 !important; //Important added because plugin has it :S
-            box-shadow: inset 0 1px 3px $fresh-taiga !important; //Important added because plugin has it :S
+            box-shadow: inset 0 1px 3px $primary-light !important; //Important added because plugin has it :S
         }
     }
 }

app/styles/core/forms.scss

@@ -19,17 +19,11 @@ input[type="date"],
 input[type="password"],
 select,
 textarea {
-    background: $whitish;
+    border: 1px solid;
-    border: 1px solid $gray-light;
-    color: $grayer;
     margin: 0;
     padding: 8px;
     width: 100%;
-    @include placeholder {
-        color: darken($gray-light, 10%);
-    }
     &.checksley-error {
-        border: 1px solid $red;
         transition: border .3s linear;
     }
 }
@@ -42,14 +36,12 @@ textarea {
 
 .checksley-error-list {
     @extend %small;
-    background: rgba($whitish, .8);
     margin-bottom: 0;
     padding: 0 .5rem;
     position: absolute;
     right: 2rem;
     top: 10px;
     li {
-        color: $red;
         padding: .2rem;
     }
 }

app/styles/core/typography.scss

@@ -53,7 +53,7 @@ h1 {
         max-width: 40%;
     }
     .green {
-        color: $green-taiga;
+        color: $primary;
     }
     .date {
         @include ellipsis(500px);
@@ -92,10 +92,8 @@ hr {
 // __Links__
 a,
 a:visited {
-    color: $grayer;
     text-decoration: none;
     &:hover {
-        color: $green-taiga;
         transition: color .3s linear;
     }
 }

app/styles/dependencies/colors.scss

@@ -1,37 +0,0 @@
-// Colors
-
-$black: #000;
-$blackish: #050505;
-$grayer: #444;
-$gray: #555;
-$gray-light: #b8b8b8;
-$whitish: #f5f5f5;
-$white: #fff;
-
-
-$green-taiga: #72a114;
-$fresh-taiga: #9dce0a;
-$dark-taiga: #879b89;
-
-$red-light: #ff8282;
-$red: #f00;
-
-$postit: #fff8e4;
-$postit-hover: #f1e8cd;
-$postit-dark-hover: #cfc29b;
-
-
-//Loading bar
-$green-japanese-laurel: #237400;
-$green-olive: #618000;
-$red-amaranth: #e43050;
-$purple-eggplant: #810061;
-$yellow-pear: #bbe831;
-
-$menu: #232323;
-$star-fill: #edd400;
-
-// Top menu values
-$top-icon-color: #11241f;
-$dropdown-width: 350px;
-$dropdown-color: rgba(darken($grayer, 20%), 1);

app/styles/dependencies/helpers.scss

@@ -16,7 +16,6 @@
 %mono {font-family: 'courier new', 'monospace';}
 
 %lightbox {
-    background: rgba($white, .95);
     bottom: 0;
     display: none;
     left: 0;
@@ -62,17 +61,6 @@
     }
 }
 
-// Background
-%triangled-bg {
-    background: url('/images/bg.png') no-repeat center center;
-    background-size: cover;
-}
-
-%background-taiga {
-    background: url('/images/invitation_bg.jpg') no-repeat center center;
-    background-size: cover;
-}
-
 %loading-spinner {
     animation-timing-function: ease-in-out;
     animation: rotate 1.5s cubic-bezier(.00, .05, .87, 1.04) infinite alternate;

app/styles/dependencies/mixins.scss

@@ -57,7 +57,7 @@
             border: 0;
         }
         &:hover {
-            color: $fresh-taiga;
+            color: $primary-light;
             transition: color .3s linear;
             &.point {
                 color: $white;

app/styles/extras/dependencies.scss

@@ -10,7 +10,7 @@ $prefix-for-mozilla:   true;
 //             dependencies
 //#################################################
 
-@import '../dependencies/colors';
+@import "variables";
 @import '../dependencies/mixins';
 @import '../dependencies/helpers';
 @import '../dependencies/responsive';

app/styles/layout/admin-project-values.scss

@@ -37,8 +37,3 @@
         display: inline-block;
     }
 }
-
-//.project-values-options {
-//    margin-bottom: 1rem;
-//    text-align: right;
-//}

app/styles/layout/invitation.scss

@@ -84,7 +84,7 @@
     }
     .button-blackish {
         &:hover {
-            background: $green-taiga;
+            background: $primary;
         }
     }
     .login-form {

app/styles/layout/login.scss

@@ -41,17 +41,11 @@
     form {
         margin-bottom: 1rem;
     }
-    input {
-        background: $white;
-        @include placeholder {
-            color: $gray-light;
-        }
-    }
     .login-text,
     .register-text {
         text-align: center;
         a:hover {
-            color: $fresh-taiga;
+            color: $primary-light;
         }
     }
     .button {

app/styles/layout/not-found.scss

@@ -25,9 +25,9 @@
         margin-bottom: 3rem;
     }
     a {
-        color: $green-taiga;
+        color: $primary;
         &:hover {
-            color: $fresh-taiga;
+            color: $primary-light;
         }
     }
 }

app/styles/layout/team.scss

@@ -3,7 +3,7 @@
         margin: 1rem 0;
         span {
             &:last-child {
-                color: $green-taiga;
+                color: $primary;
             }
         }
     }

app/styles/layout/us-detail.scss

@@ -103,7 +103,7 @@
                 padding: 0 .2rem;
             }
             a:hover {
-                color: $green-taiga;
+                color: $primary;
             }
             a:first-child {
                 border: 0;
@@ -237,7 +237,7 @@
 
 .us-detail-status {
     @extend %large;
-    color: $green-taiga;
+    color: $primary;
     vertical-align: middle;
 }
 
@@ -247,7 +247,7 @@
     margin-bottom: 1rem;
     position: relative;
     .current-progress {
-        background: $fresh-taiga;
+        background: $primary-light;
         height: 26px;
         left: 0;
         position: absolute;
@@ -281,7 +281,7 @@
         text-align: center;
         transition: color .3s linear;
         &.active {
-            background: rgba($fresh-taiga, .9);
+            background: rgba($primary-light, .9);
             color: $whitish;
         }
         &:first-child {
@@ -316,7 +316,7 @@
             text-align: center;
             &:hover,
             &.active {
-                background: $fresh-taiga;
+                background: $primary-light;
                 color: $white;
             }
         }
@@ -381,7 +381,7 @@
             }
         }
         &.active {
-            background: $green-taiga;
+            background: $primary;
         }
     }
     .item-block {

app/styles/modules/admin/admin-custom-attributes.scss

@@ -24,7 +24,7 @@
             }
         }
         .row:hover {
-            background: rgba($fresh-taiga, .05);
+            background: rgba($primary-light, .05);
             cursor: move;
             transition: background .2s linear;
             .icon-drag-v,
@@ -89,7 +89,7 @@
             transition: color .2s linear;
             vertical-align: middle;
             &:hover {
-                color: $green-taiga;
+                color: $primary;
                 transition: color .2s linear;
             }
         }

app/styles/modules/admin/admin-functionalities.scss

@@ -19,7 +19,7 @@
         vertical-align: top;
         width: 32%;
         &.active {
-            background-color: rgba($green-taiga, .3);
+            background-color: rgba($primary, .3);
             opacity: 1;
         }
         .icon {

app/styles/modules/admin/admin-membership-table.scss

@@ -55,9 +55,6 @@
     .pending {
         background-color: $red-light;
         color: $white;
-        .icon {
-            float: rsdsdfdvsdvight;
-        }
         &:hover {
             background-color: $red;
             color: $white;

app/styles/modules/admin/admin-project-profile.scss

@@ -54,8 +54,8 @@
     }
     .privacy-project:checked {
         + label {
-            background: $fresh-taiga;
+            background: $primary-light;
-            border: 1px solid $fresh-taiga;
+            border: 1px solid $primary-light;
             span {
                 color: $white;
             }

app/styles/modules/admin/admin-roles.scss

@@ -27,7 +27,7 @@
             margin-left: .5rem;
             transition: color.3s linear;
             &:hover {
-                color: $green-taiga;
+                color: $primary;
                 transition: color.3s linear;
             }
         }

app/styles/modules/admin/admin-submenu.scss

@@ -15,12 +15,12 @@
             justify-content: space-between;
             padding: 1rem 0 1rem 1rem;
             &:hover {
-                background: lighten($dark-taiga, 3%);
+                background: lighten($primary-dark, 3%);
                 color: $white;
                 transition: all .2s;
             }
             &.active {
-                background: lighten($dark-taiga, 10%);
+                background: lighten($primary-dark, 10%);
                 color: $white;
                 transition: all .2s;
             }

app/styles/modules/admin/admin-third-parties-webhooks.scss

@@ -47,10 +47,10 @@
             vertical-align: middle;
         }
         a {
-            color: $green-taiga;
+            color: $primary;
             margin-left: .5rem;
             &:hover {
-                color: $fresh-taiga;
+                color: $primary-light;
             }
         }
     }
@@ -65,7 +65,7 @@
             transition: color .2s linear;
             vertical-align: middle;
             &:hover {
-                color: $green-taiga;
+                color: $primary;
                 transition: color .2s linear;
 
             }
@@ -102,7 +102,7 @@
         padding: .5rem;
         transition: background .2s linear;
         &:hover {
-            background: rgba($fresh-taiga, .1);
+            background: rgba($primary-light, .1);
             transition: background .2s linear;
         }
         &.history-single-open {
@@ -127,7 +127,7 @@
         margin-right: .5rem;
         width: .8rem;
         &.history-success {
-            background: $fresh-taiga;
+            background: $primary-light;
         }
         &.history-error {
             background: $red;
@@ -149,7 +149,7 @@
             @extend %small;
             color: $gray-light;
             &:hover {
-                color: $fresh-taiga;
+                color: $primary-light;
                 transition: color .2s linear;
             }
         }

app/styles/modules/admin/project-values.scss

@@ -33,7 +33,7 @@
     }
     .project-values-row {
         &:hover {
-            background: lighten($green-taiga, 60%);
+            background: lighten($primary, 60%);
             cursor: move;
             transition: background .2s ease-in;
             .icon {
@@ -72,7 +72,7 @@
         color: $gray;
         margin-right: .5rem;
         &:hover {
-            color: $green-taiga;
+            color: $primary;
             transition: color .3s linear;
             .icon-delete {
                 color: $red;

app/styles/modules/backlog/backlog-table.scss

@@ -67,7 +67,7 @@
         @include popover(200px, 0, 65%, '', '');
         a {
             &.active {
-                background: $fresh-taiga;
+                background: $primary-light;
                 color: $white;
             }
         }
@@ -90,7 +90,7 @@
             text-align: center;
             &:hover,
             &.active {
-                background: $fresh-taiga;
+                background: $primary-light;
                 color: $white;
             }
         }
@@ -122,7 +122,7 @@
         flex-wrap: nowrap;
         position: relative;
         &:hover {
-            background: lighten($green-taiga, 60%);
+            background: lighten($primary, 60%);
             transition: background .2s ease-in;
             .us-settings,
             .icon-drag-v {
@@ -134,7 +134,7 @@
             border-bottom: 0;
         }
         &.ui-sortable-helper {
-            background: lighten($green-taiga, 60%);
+            background: lighten($primary, 60%);
             box-shadow: 1px 1px 10px rgba($black, .1);
             transition: background .2s ease-in;
         }
@@ -151,7 +151,7 @@
         width: 100%;
     }
     .row-selected {
-        background: lighten($green-taiga, 60%);
+        background: lighten($primary, 60%);
         transition: background .2s ease-in;
     }
     .user-story-name {
@@ -163,7 +163,7 @@
             margin-right: 1rem;
             vertical-align: super;
             &:checked+a {
-                color: $fresh-taiga;
+                color: $primary-light;
                 transition: color .2s ease-in;
             }
         }

app/styles/modules/backlog/sprints.scss

@@ -69,7 +69,7 @@
                 transition: all .2s linear;
             }
             &:hover {
-                color: $fresh-taiga;
+                color: $primary-light;
                 transition: color .2s linear;
             }
         }
@@ -82,7 +82,7 @@
             transition: opacity .2s ease-in;
             vertical-align: baseline;
             &:hover {
-                color: $green-taiga;
+                color: $primary;
                 transition: color .2s ease-in;
             }
         }
@@ -126,7 +126,7 @@
         position: relative;
         width: 100%;
         .current-progress {
-            background: $green-taiga;
+            background: $primary;
             border-radius: 2px;
             height: 8px;
             left: 0;
@@ -158,7 +158,7 @@
                 height: 40px;
             }
             &.ui-sortable-helper {
-                background: lighten($green-taiga, 60%);
+                background: lighten($primary, 60%);
                 box-shadow: 1px 1px 10px rgba($black, .1);
                 transition: background .2s ease-in;
             }

app/styles/modules/backlog/taskboard-table.scss

@@ -91,7 +91,7 @@ $column-margin: 0 10px 0 0;
             margin-right: .3rem;
             transition: color .2s linear;
             &:hover {
-                color: $green-taiga;
+                color: $primary;
             }
             &.hfold,
             &.hunfold {
@@ -178,9 +178,6 @@ $column-margin: 0 10px 0 0;
             }
         }
     }
-    .taskboard-tasks-box {
-        background: $whitish;
-    }
 
     .taskboard-userstory-box {
         padding: .5rem .5rem .5rem 1.5rem;
@@ -191,7 +188,7 @@ $column-margin: 0 10px 0 0;
             top: .7rem;
             transition: color .2s linear;
             &:hover {
-                color: $green-taiga;
+                color: $primary;
             }
             &.icon-plus {
                 right: 2rem;
@@ -234,7 +231,7 @@ $column-margin: 0 10px 0 0;
 
 .points-list {
     a {
-        color: $green-taiga;
+        color: $primary;
         margin-left: .5rem;
         &:hover {
             span {

app/styles/modules/common/assigned-to.scss

@@ -33,7 +33,7 @@
         }
         .user-assigned {
             @extend %large;
-            color: $green-taiga;
+            color: $primary;
             cursor: default;
             line-height: 1.5rem;
             &.editable {

app/styles/modules/common/attachments.scss

@@ -23,7 +23,7 @@
         color: $grayer;
         cursor: pointer;
         &:hover {
-            color: $green-taiga;
+            color: $primary;
             transition: color .2s ease-in;
         }
     }
@@ -45,7 +45,7 @@
         }
     }
     &.ui-sortable-helper {
-        background: lighten($green-taiga, 60%);
+        background: lighten($primary, 60%);
         box-shadow: 1px 1px 10px rgba($black, .1);
         transition: background .2s ease-in;
     }
@@ -96,7 +96,7 @@
             display: block;
             position: absolute;
             &:hover {
-                color: $green-taiga;
+                color: $primary;
             }
         }
         .settings {
@@ -143,7 +143,7 @@
         }
     }
     .percentage {
-        background: rgba($green-taiga, .1);
+        background: rgba($primary, .1);
         bottom: 0;
         height: 40px;
         left: 0;
@@ -162,11 +162,11 @@
         color: $gray-light;
     }
     .more-attachments-num {
-        color: $green-taiga;
+        color: $primary;
         margin-left: .5rem;
     }
     &:hover {
-        background: lighten($green-taiga, 60%);
+        background: lighten($primary, 60%);
         transition: background .2s ease-in;
     }
 }

app/styles/modules/common/category-config.scss

@@ -28,7 +28,7 @@
             margin-right: .1rem;
             width: 15px;
             &.active {
-                background: $green-taiga;
+                background: $primary;
             }
             &.inactive {
                 background: $gray;

app/styles/modules/common/colors-table.scss

@@ -24,7 +24,7 @@
         justify-content: center;
         padding: 1rem;
         &:hover {
-            background: lighten($green-taiga, 60%);
+            background: lighten($primary, 60%);
             cursor: move;
             transition: background .2s ease-in;
             .icon {
@@ -117,7 +117,7 @@
         margin-right: 1rem;
         opacity: 0;
         &:hover {
-            color: $green-taiga;
+            color: $primary;
             transition: all .2s ease-in;
         }
         &.icon-check-square {
@@ -131,7 +131,7 @@
     }
     .icon-check-square {
         @extend %large;
-        color: $green-taiga;
+        color: $primary;
     }
 
 }

app/styles/modules/common/custom-fields.scss

@@ -43,7 +43,7 @@
                 color: $gray-light;
             }
             a:hover {
-                color: $green-taiga;
+                color: $primary;
             }
         }
     }

app/styles/modules/common/external-reference.scss

@@ -20,7 +20,7 @@
         padding: 0 .2rem;
         transition: color .3s linear;
         &:hover {
-            color: $green-taiga;
+            color: $primary;
         }
         &:first-child {
             border: 0;

app/styles/modules/common/history.scss

@@ -6,7 +6,7 @@
     padding: .5rem;
     &:hover {
         .icon {
-            color: $green-taiga;
+            color: $primary;
             transform: rotate(180deg);
             transition: all .2s linear;
         }
@@ -58,7 +58,7 @@
             color: $grayer;
         }
         &:hover {
-            color: $green-taiga;
+            color: $primary;
             transition: color .2s ease-in;
         }
     }
@@ -119,7 +119,7 @@
     display: block;
     padding: 1rem 0 1rem 1rem;
     &:hover {
-        background: lighten($green-taiga, 60%);
+        background: lighten($primary, 60%);
         transition: background .2s ease-in;
     }
 }
@@ -130,7 +130,7 @@
     display: block;
     padding: 1rem;
     .prev-comments-num {
-        color: $green-taiga;
+        color: $primary;
         margin-left: .5rem;
     }
 }
@@ -180,7 +180,7 @@
             color: $gray-light;
             margin-left: .3rem;
             &:hover {
-                color: $green-taiga;
+                color: $primary;
                 transition: color .2s linear;
             }
         }
@@ -206,12 +206,12 @@
             vertical-align: baseline;
         }
         &:hover {
-            color: $green-taiga;
+            color: $primary;
             transition: color .2s linear;
         }
     }
     .username {
-        color: $green-taiga;
+        color: $primary;
         margin-bottom: .5rem;
     }
     .activity-user {
@@ -223,7 +223,7 @@
         }
     }
     .activity-username {
-        color: $green-taiga;
+        color: $primary;
         margin-bottom: .5rem;
     }
     .activity-content {
@@ -272,7 +272,7 @@
     display: block;
     padding: 1rem;
     .prev-activity-num {
-        color: $green-taiga;
+        color: $primary;
         margin-left: .5rem;
     }
 }

app/styles/modules/common/lightbox.scss

@@ -57,8 +57,8 @@
         .requirement,
         .iocaine {
             &:hover {
-                background: $fresh-taiga;
+                background: $primary-light;
-                border: 1px solid $green-taiga;
+                border: 1px solid $primary;
                 color: $white;
                 transition: all .2s ease-in;
             }
@@ -79,8 +79,8 @@
         .team-requirement,
         .iocaine-flag {
             input:checked+label {
-                background: $green-taiga;
+                background: $primary;
-                border: 1px solid $green-taiga;
+                border: 1px solid $primary;
                 color: $white;
 
             }
@@ -400,7 +400,7 @@
         padding: 3px;
         position: relative;
         .bar {
-            background: $fresh-taiga;
+            background: $primary-light;
             height: 24px;
             position: absolute;
             transition: width .1s linear;
@@ -477,7 +477,7 @@
         position: relative;
         &:hover,
         &.active {
-            background: lighten($green-taiga, 55%);
+            background: lighten($primary, 55%);
             cursor: pointer;
         }
         &:hover {

app/styles/modules/common/nav.scss

@@ -1,8 +1,6 @@
 $label-arrow-wh: 12px;
 
 tg-project-menu {
-    background-color: $dark-taiga;
-    background-image: url('../images/menu.png');
     background-position: 0 -300px;
     min-height: $main-height;
     padding: 1rem 0;
@@ -22,7 +20,7 @@ tg-project-menu {
     }
     a:hover {
         background: rgba($black, .2);
-        color: $fresh-taiga;
+        color: $primary-light;
         transition: color .3s linear;
         .helper {
             @extend %small;
@@ -52,7 +50,6 @@ tg-project-menu {
         }
     }
     svg path {
-        fill: $white;
         opacity: 1;
     }
     span {
@@ -70,9 +67,9 @@ tg-project-menu {
     }
     .active {
         background: rgba($black, .2);
-        color: $fresh-taiga;
+        color: $primary-light;
         svg path {
-            fill: $fresh-taiga;
+            fill: $primary-light;
             opacity: 1;
         }
     }

app/styles/modules/common/projects-nav.scss

@@ -1,141 +0,0 @@
-.projects-nav {
-    background-color: $menu;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    left: 0;
-    overflow: hidden;
-    padding: 2rem 1rem;
-    position: fixed;
-    top: 0;
-    transform: translate3d(-300px, 0, 0);
-    width: 300px;
-    z-index: 99;
-    form {
-        flex-shrink: 0;
-    }
-    h1 {
-        color: $white;
-        flex-shrink: 0;
-        margin-bottom: 2rem;
-        text-align: center;
-    }
-    input {
-        background-color: $gray;
-        color: $whitish;
-    }
-    .icon-search {
-        position: absolute;
-        right: .7rem;
-        top: .7rem;
-    }
-    ul {
-        left: 0;
-        margin-bottom: 0;
-        margin-top: 1rem;
-        position: relative;
-        top: 0;
-        width: 100%;
-    }
-    .projects-pagination {
-        display: flex;
-        flex-direction: column;
-        margin-top: 1rem;
-        min-height: 1px; //firefox bug #2057
-    }
-    .create-project-button-wrapper {
-        display: flex;
-        flex-shrink: 0;
-        margin-top: 1rem;
-        .create-project-button {
-            flex-grow: 8;
-            margin-right: .2rem;
-            text-align: center;
-        }
-        .import-project-button {
-            flex-grow: 1;
-            padding-left: .5rem;
-            padding-right: .5rem;
-            text-align: center;
-            .icon {
-                color: $grayer;
-                margin: 0;
-            }
-        }
-    }
-    .v-pagination-previous,
-    .v-pagination-next {
-        flex-shrink: 0;
-    }
-}
-
-.projects-list {
-    a {
-        @extend %large;
-        @extend %title;
-        color: $whitish;
-        display: block;
-        padding: 1rem;
-        position: relative;
-        text-transform: uppercase;
-        width: 100%;
-        &.active,
-        &:hover {
-            background-color: $gray;
-            color: $green-taiga;
-            transition: background-color .3s linear;
-            .icon {
-                opacity: 1;
-                transition: opacity .3s linear;
-            }
-        }
-        .project-name {
-            display: block;
-            max-width: 90%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-    .icon {
-        color: $whitish;
-        opacity: 0;
-        position: absolute;
-        right: 1rem;
-        top: 1rem;
-    }
-    li {
-        border-bottom: 2px solid $gray;
-    }
-}
-
-.projects-nav-overlay {
-    // @include transition (all 1s ease);
-    @extend %background-taiga;
-    // background-blend-mode: multiply;
-    // background-color: $green-taiga;
-    bottom: 0;
-    display: none;
-    left: 0;
-    opacity: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    width: 100%;
-    z-index: 99900;
-    .container {
-        left: -200px;
-        margin: 0 auto;
-        margin-top: 15%;
-        opacity: 0;
-        position: relative;
-        transform: translateY(-50%);
-        width: 150px;
-    }
-    p {
-        @extend %medium;
-        color: $fresh-taiga;
-        padding-top: 20px;
-        text-align: center;
-    }
-}

app/styles/modules/common/related-tasks.scss

@@ -19,7 +19,7 @@
         color: $grayer;
         cursor: pointer;
         &:hover {
-            color: $green-taiga;
+            color: $primary;
             transition: color .2s ease-in;
         }
     }
@@ -153,7 +153,7 @@
     }
     .iocaine,
     .iocaine:hover {
-        background: rgba($fresh-taiga, .3);
+        background: rgba($primary-light, .3);
         .icon-iocaine {
             @extend %large;
             display: inline-block;

app/styles/modules/common/wizard.scss

@@ -1,6 +1,6 @@
 .wizard-create-project {
     @extend %lightbox;
-    background: url('/images/invitation_bg.jpg') no-repeat center center;
+    @extend %background-taiga;
     background-size: cover;
     color: $white;
     text-align: center;
@@ -77,7 +77,7 @@
         }
         input:checked {
             +label {
-                background: rgba($fresh-taiga, .7);
+                background: rgba($primary-light, .7);
                 transition: background .3s ease-in;
             }
         }
@@ -90,7 +90,7 @@
             text-align: center;
             transition: background .3s ease-in;
             &:hover {
-                background: rgba($green-taiga, .7);
+                background: rgba($primary, .7);
                 transition: background .3s ease-in;
             }
             .icon {
@@ -160,12 +160,8 @@
                 left: 25%;
             }
             &:nth-child(2) {
-                // left: 50%;
                 left: 75%;
             }
-            // &:nth-child(3) {
-            //     left: 75%;
-            // }
         }
     }
     .progress-bar-wrapper {
@@ -173,7 +169,7 @@
         height: .5rem;
     }
     .bar {
-        background: rgba($fresh-taiga, .9);
+        background: rgba($primary-light, .9);
         height: .5rem;
         left: 0;
         position: absolute;

app/styles/modules/create-project.scss

@@ -47,7 +47,7 @@
         margin-bottom: .5rem;
         text-align: center;
         &:hover {
-            background: $fresh-taiga;
+            background: $primary-light;
        }
     }
     a {

app/styles/modules/filters/filters.scss

@@ -75,7 +75,7 @@
     }
     .custom-filters {
         .title {
-            color: $green-taiga;
+            color: $primary;
         }
     }
     a {
@@ -84,7 +84,7 @@
         padding: .5rem 0 .5rem .5rem;
         transition: color .2s ease-in;
         &:hover {
-            color: $green-taiga;
+            color: $primary;
             transition: color .2s ease-in;
             .icon {
                 opacity: 1;

app/styles/modules/home-project.scss

@@ -49,9 +49,6 @@
         display: flex;
         flex-wrap: wrap;
         margin-bottom: 1rem;
-        a {
-            display: block;
-        }
         li {
             margin-right: .14rem;
             width: 24%;
@@ -59,6 +56,9 @@
                 margin-right: 0;
             }
         }
+        a {
+            display: block;
+        }
         img {
             border-radius: .2rem;
             width: 100%;

app/styles/modules/issues/issues-table.scss

@@ -6,7 +6,7 @@
     }
     .row {
         &:hover {
-            background: lighten($green-taiga, 60%);
+            background: lighten($primary, 60%);
             transition: background .2s ease-in;
         }
         .icon {
@@ -14,7 +14,7 @@
         }
     }
     .row-selected {
-        background: lighten($green-taiga, 60%);
+        background: lighten($primary, 60%);
         transition: background .2s ease-in;
     }
     .title {

app/styles/modules/kanban/kanban-table.scss

@@ -87,7 +87,7 @@ $column-margin: 0 10px 0 0;
             margin-right: .3rem;
             transition: color .2s linear;
             &:hover {
-                color: $green-taiga;
+                color: $primary;
             }
             &.hfold,
             &.hunfold {

app/styles/modules/search/search-result-table.scss

@@ -1,5 +1,4 @@
 .search-result-table {
-
     .empty {
         .title {
             border: 0;
@@ -13,7 +12,7 @@
         justify-content: space-between;
         padding: .5rem;
         &:hover {
-            background: lighten($green-taiga, 60%);
+            background: lighten($primary, 60%);
             transition: background .2s ease-in;
         }
         .ref {
@@ -40,7 +39,7 @@
         }
     }
     .row-selected {
-        background: lighten($green-taiga, 60%);
+        background: lighten($primary, 60%);
         transition: background .2s ease-in;
     }
 

app/styles/modules/team/team-filters.scss

@@ -18,7 +18,7 @@
             padding: 1rem 0 1rem 1rem;
             &:hover,
             &.active {
-                color: $green-taiga;
+                color: $primary;
                 transition: color .3s linear;
             }
             &.active.icon {

app/styles/modules/team/team-table.scss

@@ -28,7 +28,7 @@
             color: $grayer;
         }
         .top {
-            color: $fresh-taiga;
+            color: $primary-light;
             opacity: 1;
         }
         &:hover {

app/styles/modules/user-settings/mail-notifications-table.scss

@@ -33,7 +33,7 @@
         display: none;
         &:checked {
             +label {
-                background: $green-taiga;
+                background: $primary;
                 transition: background .3s linear;
             }
         }
@@ -45,7 +45,7 @@
         display: block;
         padding: .5rem;
         &:hover {
-            background: $fresh-taiga;
+            background: $primary-light;
             cursor: pointer;
             transition: background .3s linear;
         }

app/styles/modules/wiki/wiki-summary.scss

@@ -22,7 +22,7 @@
     }
     .username {
         @extend %large;
-        color: $fresh-taiga;
+        color: $primary-light;
         white-space: nowrap;
     }
 }

app/themes/high-contrast/custom.scss

@@ -0,0 +1,117 @@
+// Any styles in this stylesheet will override any previous defined style in Taiga.
+
+//    Max: Beat it or I'll call the Brute Squad!
+//    Fezzik: I'm on the Brute Squad.
+//    Max: [sees Fezzik's size] You are the Brute Squad!
+
+.working-on .duty-id,
+.watching .duty-id,
+.activity-item p,
+.table-team .avatar .position,
+.points-per-role > li,
+.private path {
+    color: $black;
+}
+.navbar a:hover {
+    color: $white;
+}
+
+.points-per-role > li:first-child {
+    background: $black;
+}
+
+.login-main {
+    color: $white;
+    a {
+        color: $white;
+    }
+}
+
+.home-project-list {
+    li {
+        border: 1px solid $black;
+    }
+    p {
+        color: $black;
+    }
+}
+
+.main-nav .active {
+    background: $white;
+    svg path {
+        fill: $black;
+    }
+}
+
+// Titles
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: Arial, Helvetica, sans-serif;
+    .date {
+        color: $black;
+    }
+}
+
+.tag {
+    background: $white;
+    border: 1px solid $black;
+}
+
+.master,
+.menu-secondary,
+.menu-tertiary,
+.extrabar {
+    background: $white;
+    border-left: 1px solid $black;
+    border-right: 1px solid $black;
+}
+
+.button-gray {
+    background: $black;
+}
+
+.settings-nav {
+    .active {
+        background: $black;
+        color: $white;
+    }
+}
+
+.admin-submenu ul a {
+    color: $black;
+}
+
+.policy-table {
+    input:checked {
+        +label {
+            color: $white;
+        }
+    }
+    label {
+        color: $black;
+        &:hover {
+            color: $white;
+        }
+    }
+}
+
+.admin-common .admin-subtitle {
+    color: $black;
+}
+
+.admin-functionalities .functionality.active {
+    background: $white;
+    border: 1px solid $black;
+}
+
+.admin-membership-table {
+    .avatar .email,
+    .delete {
+        color: $black;
+    }
+
+}

app/themes/high-contrast/variables.scss

@@ -0,0 +1,237 @@
+//*************************
+//** COLORS
+//************************
+
+// Colors
+$black: #000;
+$blackish: #212121;
+$grayer: #212121;
+$gray: #757575;
+$gray-light: #f5f5f5;
+$whitish: #f5f5f5;
+$white: #fff;
+
+// Primary colors
+$primary-light: #212121;
+$primary: #000;
+$primary-dark: #000;
+
+//Warning colors
+$red-light: #ff0062;
+$red: #ff2400;
+
+//Card color
+$card: #F0EFD1;
+$card-hover: $black;
+$card-dark: $black;
+
+$green-japanese-laurel: #009688;
+$green-olive: #cddc39;
+$red-amaranth: #e91e63;
+$purple-eggplant: #9c27b0;
+$yellow-pear: #ffc107;
+
+//*************************
+//** LAYOUT
+//*************************
+
+// Default body color and background
+body {
+    background: $white; // fallback
+    color: $grayer;
+}
+
+// Main
+.master {
+    background: $white;
+}
+
+// Secondary panel
+.menu-secondary {
+    background: $white;
+}
+
+// Tertiary panel
+.menu-tertiary {
+    background-color: $white;
+}
+
+// Extra bar panel
+.extrabar {
+   background: $white;
+}
+
+
+//**************************
+//** TYPOGRAPHY
+//**************************
+
+// Font Sizes
+%xsmall {font-size: .75rem;}
+%small {font-size: .9rem;}
+%medium {font-size: 1rem;}
+%large {font-size: 1.2rem;}
+%larger {font-size: 1.6rem;}
+%xlarge {font-size: 2rem;}
+%xxlarge {font-size: 3rem;}
+
+// Font Types
+%title {font-family: Arial, Helvetica, sans-serif; }
+%light {font-family: Arial, Helvetica, sans-serif; font-weight: 100; }
+%text {font-family:  Arial, Helvetica, sans-serif; font-weight: 400; }
+%bold {font-family: Arial, Helvetica, sans-serif; font-weight:800; }
+%taiga {font-family: 'taiga';}
+%mono {font-family: 'courier new', 'monospace';}
+
+// Titles
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: $blackish;
+}
+
+a {
+    color: $grayer;
+    &:hover {
+        color: $primary;
+    }
+}
+
+//**************************
+//** SCAFFOLDING
+//**************************
+
+//Forms
+input[type="text"],
+input[type="number"],
+input[type="password"],
+input[type="email"],
+input[type="date"],
+input[type="password"],
+select,
+textarea {
+    background: $white;
+    border-color: $black;
+    color: $black;
+    @include placeholder {
+        color:$black;
+    }
+    &.checksley-error {
+        border: 1px solid $red;
+    }
+}
+
+
+// Input errors
+.checksley-error-list {
+    background: rgba($whitish, .8);
+    color: $red;
+}
+
+// Blockquote
+blockquote {
+    border-left: 5px solid $gray;
+}
+
+blockquote,
+blockquote p {
+    color: $black;
+}
+
+cite {
+    color: $black;
+}
+
+// lightbox
+%lightbox {
+    background: rgba($white, .95);
+}
+
+// Background images
+%triangled-bg {
+    background: url('https://farm9.staticflickr.com/8449/7893171238_a201af22bc_k_d.jpg') no-repeat center center;
+    background-size: cover;
+}
+
+%background-taiga {
+    background: url('https://farm9.staticflickr.com/8449/7893171238_a201af22bc_k_d.jpg') no-repeat center center;
+    background-size: cover;
+}
+
+.summary {
+    background: $grayer;
+    color: $white;
+}
+
+
+//************************
+//** NAVIGATION
+//***********************
+
+// Top navigation bar
+.navbar {
+    background: $black;
+    &:after {
+        background: url('../images/menu-vert.png') repeat top left;
+    }
+}
+
+$top-icon-color: $white;
+$dropdown-color: rgba(darken($primary-dark, 20%), 1);
+
+//In project left navigation bar
+tg-project-menu {
+    background-color: rgba(darken($primary-dark, 15%), 1);
+    background-image: none;
+}
+
+.main-nav {
+    svg path {
+        fill: $white;
+    }
+}
+
+//*****************************
+//** TASKBOARD
+//******************************
+
+//Taskboard table
+.taskboard-table-header {
+    .task-colum-name {
+        background: lighten($white, 20%);
+        border-top: 3px solid $black;
+        .icon {
+            color: $black;
+        }
+    }
+}
+.taskboard-table-body {
+    .taskboard-tasks-box {
+        background: $white;
+        border: 1px solid $black;
+    }
+}
+
+//*****************************
+//** KANBAN
+//******************************
+
+//Kanban table
+.kanban-table-header {
+    .task-colum-name {
+        background: lighten($white, 20%);
+        border-top: 3px solid $black;
+        .icon {
+            color: $black;
+        }
+    }
+}
+
+.kanban-table-body {
+    .kanban-uses-box {
+        background: $whitish;
+    }
+}

app/themes/material-design/custom.scss

@@ -0,0 +1,5 @@
+// Any styles in this stylesheet will override any previous defined style in Taiga.
+
+//    Max: Beat it or I'll call the Brute Squad!
+//    Fezzik: I'm on the Brute Squad.
+//    Max: [sees Fezzik's size] You are the Brute Squad!

app/themes/material-design/variables.scss

@@ -0,0 +1,246 @@
+//*************************
+//** COLORS
+//************************
+
+// Colors
+$black: #000;
+$blackish: #212121;
+$grayer: #424242;
+$gray: #757575;
+$gray-light: #bdbdbd;
+$whitish: #f5f5f5;
+$white: #fff;
+
+// Primary colors
+$primary-light: #8c9eff;
+$primary: #3f51b5;
+$primary-dark: #1a237e;
+
+//Warning colors
+$red-light: #ff5252;
+$red: #f44336;
+
+//Card color
+$card: #fff8e4;
+$card-hover: #f1e8cd;
+$card-dark: #cfc29b;
+
+$green-japanese-laurel: #009688;
+$green-olive: #cddc39;
+$red-amaranth: #e91e63;
+$purple-eggplant: #9c27b0;
+$yellow-pear: #ffc107;
+
+//*************************
+//** LAYOUT
+//*************************
+
+// Default body color and background
+body {
+    background: $white; // fallback
+    color: $grayer;
+}
+
+// Main
+.master {
+    background: $white;
+}
+
+// Secondary panel
+.menu-secondary {
+    background: lighten($primary-light, 22%);
+}
+
+// Tertiary panel
+.menu-tertiary {
+    background-color: $primary-dark;
+}
+
+// Extra bar panel
+.extrabar {
+   background: lighten($primary-light, 22%);
+}
+
+
+//**************************
+//** TYPOGRAPHY
+//**************************
+
+@each $font-face in OpenSans-CondLight, OpenSans-Light, opensans-regular, opensans-semibold, taiga {
+    @font-face {
+        font-family: '#{$font-face}';
+        src: url('../fonts/#{$font-face}.eot?#iefix') format('embedded-opentype'),
+            url('../fonts/#{$font-face}.woff') format('woff'),
+            url('../fonts/#{$font-face}.ttf')  format('truetype'),
+            url('../fonts/#{$font-face}.svg#{$font-face}') format('svg');
+    }
+}
+
+// Font Sizes
+%xsmall {font-size: .75rem;}
+%small {font-size: .9rem;}
+%medium {font-size: 1rem;}
+%large {font-size: 1.2rem;}
+%larger {font-size: 1.6rem;}
+%xlarge {font-size: 2rem;}
+%xxlarge {font-size: 3rem;}
+
+// Font Types
+%title {font-family: 'OpenSans-CondLight', Arial, Helvetica, sans-serif; }
+%light {font-family: 'OpenSans-Light', Arial, Helvetica, sans-serif; }
+%text {font-family: 'opensans-regular', Arial, Helvetica, sans-serif; }
+%bold {font-family: 'opensans-semibold', Arial, Helvetica, sans-serif; }
+%taiga {font-family: 'taiga';}
+%mono {font-family: 'courier new', 'monospace';}
+
+// Titles
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: $blackish;
+}
+
+a {
+    color: $grayer;
+    &:hover {
+        color: $primary;
+    }
+}
+
+//**************************
+//** SCAFFOLDING
+//**************************
+
+//Forms
+input[type="text"],
+input[type="number"],
+input[type="password"],
+input[type="email"],
+input[type="date"],
+input[type="password"],
+select,
+textarea {
+    background: $whitish;
+    border-color: $primary;
+    color: $grayer;
+    @include placeholder {
+        color: darken($gray-light, 10%);
+    }
+    &.checksley-error {
+        border: 1px solid $red;
+    }
+}
+
+
+// Input errors
+.checksley-error-list {
+    background: rgba($whitish, .8);
+    color: $red;
+}
+
+// Blockquote
+blockquote {
+    border-left: 5px solid $primary-light;
+}
+
+blockquote,
+blockquote p {
+    color: $gray;
+}
+
+cite {
+    color: $gray;
+}
+
+// lightbox
+%lightbox {
+    background: rgba($white, .95);
+}
+
+// Background images
+%triangled-bg {
+    background: url('https://lh4.googleusercontent.com/-k7YewfrSQ_Q/VGdNZND0NBI/AAAAAAAAD1A/UDZBeSGR7iM/w1465-h824-no/Ultimate%2BMaterial%2BLollipop%2BCollection%2B-%2B480') no-repeat center center;
+    background-size: cover;
+}
+
+%background-taiga {
+    background: url('https://lh6.googleusercontent.com/-2l_mJ5g6j4k/VGdNZCpaERI/AAAAAAAAD2o/zCx5Z3cYv6Y/w1465-h824-no/Ultimate%2BMaterial%2BLollipop%2BCollection%2B-%2B497') no-repeat center center;
+    background-size: cover;
+}
+
+.summary {
+    background: $grayer;
+    color: $white;
+}
+
+
+//************************
+//** NAVIGATION
+//***********************
+
+// Top navigation bar
+.navbar {
+    background: rgba($red-amaranth, .6);
+    &:after {
+        background: url('../images/menu-vert.png') repeat top left;
+    }
+}
+
+$top-icon-color: $white;
+$dropdown-color: rgba(darken($primary-dark, 20%), 1);
+
+//In project left navigation bar
+tg-project-menu {
+    background-color: rgba(darken($primary-dark, 15%), 1);
+    background-image: none;
+}
+
+.main-nav {
+    svg path {
+        fill: $white;
+    }
+}
+
+//*****************************
+//** TASKBOARD
+//******************************
+
+//Taskboard table
+.taskboard-table-header {
+    .task-colum-name {
+        background: lighten($primary-light, 20%);
+        border-top: 3px solid $primary;
+        .icon {
+            color: $primary;
+        }
+    }
+}
+.taskboard-table-body {
+    .taskboard-tasks-box {
+        background: $whitish;
+    }
+}
+
+//*****************************
+//** KANBAN
+//******************************
+
+//Kanban table
+.kanban-table-header {
+    .task-colum-name {
+        background: lighten($primary-light, 20%);
+        border-top: 3px solid $primary;
+        .icon {
+            color: $primary;
+        }
+    }
+}
+
+.kanban-table-body {
+    .kanban-uses-box {
+        background: $whitish;
+    }
+}

app/themes/taiga/custom.scss

@@ -0,0 +1,5 @@
+// Any styles in this stylesheet will override any previous defined style in Taiga.
+
+//    Max: Beat it or I'll call the Brute Squad!
+//    Fezzik: I'm on the Brute Squad.
+//    Max: [sees Fezzik's size] You are the Brute Squad!

app/themes/taiga/variables.scss

@@ -0,0 +1,236 @@
+//*************************
+//** COLORS
+//************************
+
+// Colors
+$black: #000;
+$blackish: #050505;
+$grayer: #444;
+$gray: #555;
+$gray-light: #b8b8b8;
+$whitish: #f5f5f5;
+$white: #fff;
+
+// Primary colors
+$primary-light: #9dce0a;
+$primary: #72a114;
+$primary-dark: #879b89;
+
+//Warning colors
+$red-light: #ff8282;
+$red: #f00;
+
+//Card color
+$card: #fff8e4;
+$card-hover: #f1e8cd;
+$card-dark: #cfc29b;
+
+$green-japanese-laurel: #237400;
+$green-olive: #618000;
+$red-amaranth: #e43050;
+$purple-eggplant: #810061;
+$yellow-pear: #bbe831;
+
+//*************************
+//** LAYOUT
+//*************************
+
+// Default body color and background
+body {
+    background: $white; // fallback
+    color: $grayer;
+}
+
+// Main
+.master {
+    background: $white;
+}
+
+// Secondary panel
+.menu-secondary {
+    background: $whitish;
+}
+
+// Tertiary panel
+.menu-tertiary {
+    background-color: $primary-dark;
+}
+
+// Extra bar panel
+.extrabar {
+    background: $whitish;
+}
+
+
+//**************************
+//** TYPOGRAPHY
+//**************************
+
+// Font Sizes
+%xsmall {font-size: .75rem;}
+%small {font-size: .9rem;}
+%medium {font-size: 1rem;}
+%large {font-size: 1.2rem;}
+%larger {font-size: 1.6rem;}
+%xlarge {font-size: 2rem;}
+%xxlarge {font-size: 3rem;}
+
+// Font Types
+%title {font-family: 'OpenSans-CondLight', Arial, Helvetica, sans-serif; }
+%light {font-family: 'OpenSans-Light', Arial, Helvetica, sans-serif; }
+%text {font-family: 'opensans-regular', Arial, Helvetica, sans-serif; }
+%bold {font-family: 'opensans-semibold', Arial, Helvetica, sans-serif; }
+%taiga {font-family: 'taiga';}
+%mono {font-family: 'courier new', 'monospace';}
+
+// Titles
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: $blackish;
+}
+
+a {
+    color: $grayer;
+    &:hover {
+        color: $primary;
+    }
+}
+
+//**************************
+//** SCAFFOLDING
+//**************************
+
+//Forms
+input[type="text"],
+input[type="number"],
+input[type="password"],
+input[type="email"],
+input[type="date"],
+input[type="password"],
+select,
+textarea {
+    background: $whitish;
+    border-color: $gray-light;
+    color: $grayer;
+    @include placeholder {
+        color: darken($gray-light, 10%);
+    }
+    &.checksley-error {
+        border: 1px solid $red;
+    }
+}
+
+
+// Input errors
+.checksley-error-list {
+    background: rgba($whitish, .8);
+    color: $red;
+}
+
+// Blockquote
+blockquote {
+    border-left: 5px solid $whitish;
+}
+
+blockquote,
+blockquote p {
+    color: $gray;
+}
+
+cite {
+    color: $gray;
+}
+
+// lightbox
+%lightbox {
+    background: rgba($white, .95);
+}
+
+// Background images
+%triangled-bg {
+    background: url('/images/bg.png') no-repeat center center;
+    background-size: cover;
+}
+
+%background-taiga {
+    background: url('/images/invitation_bg.jpg') no-repeat center center;
+    background-size: cover;
+}
+
+.summary {
+    background: $grayer;
+    color: $white;
+}
+
+
+//************************
+//** NAVIGATION
+//***********************
+
+// Top navigation bar
+.navbar {
+    background: rgba($black, .5);
+    &:after {
+        background: url('../images/menu-vert.png') repeat top left;
+    }
+}
+
+$top-icon-color: #11241f;
+$dropdown-color: rgba(darken($grayer, 20%), 1);
+
+//In project left navigation bar
+tg-project-menu {
+    background-color: $primary-dark;
+    background-image: url('../images/menu.png');
+}
+
+.main-nav {
+    svg path {
+        fill: $white;
+    }
+}
+
+//*****************************
+//** TASKBOARD
+//******************************
+
+//Taskboard table
+.taskboard-table-header {
+    .task-colum-name {
+        background: $whitish;
+        border-top: 3px solid $gray-light;
+        .icon {
+            color: $gray-light;
+        }
+    }
+}
+.taskboard-table-body {
+    .taskboard-tasks-box {
+        background: $whitish;
+    }
+}
+
+//*****************************
+//** KANBAN
+//******************************
+
+//Kanban table
+.kanban-table-header {
+    .task-colum-name {
+        background: $whitish;
+        border-top: 3px solid $gray-light;
+        .icon {
+            color: $gray-light;
+        }
+    }
+}
+
+.kanban-table-body {
+    .kanban-uses-box {
+        background: $whitish;
+    }
+}

conf/conf.example.json

@@ -4,6 +4,8 @@
     "debug": true,
     "debugInfo": false,
     "defaultLanguage": "en",
+    "themes": ["taiga"],
+    "defaultTheme": "taiga",
     "publicRegisterEnabled": true,
     "feedbackEnabled": true,
     "privacyPolicyUrl": null,

gulp-utils.js

@@ -0,0 +1,74 @@
+var exports = module.exports = {};
+var fs = require("fs");
+
+var Theme = function() {
+    var defaultTheme = "taiga";
+
+    var themesPath = "app/themes";
+    var tmpThemesPath = "tmp/themes";
+
+    var themesSequenceIndex = 0;
+    var themesSequence = [];
+
+    var searchIndex = function(name) {
+        for(var i = 0; i < themesSequence.length; i++) {
+            if (themesSequence[i].name === name) {
+                return i;
+            }
+        }
+    };
+
+    var initThemes = function () {
+        var availableThemes = {};
+        var files = fs.readdirSync(themesPath);
+
+        files.forEach(function(file) {
+            var path = themesPath + '/' + file;
+            var tmpPath = tmpThemesPath + '/' + file;
+
+            if (fs.statSync(path).isDirectory()) {
+                availableThemes[file] = {
+                    name: file,
+                    path: path,
+                    customVariables: path + "/variables.scss",
+                    customScss: path + "/custom.scss",
+                    customCss: tmpPath + "/custom.css",
+                };
+            }
+        });
+
+        themesSequence.push(availableThemes[defaultTheme]);
+
+        for (var theme in availableThemes) {
+            if (theme !== defaultTheme) {
+                themesSequence.push(availableThemes[theme]);
+            }
+        }
+    };
+
+    initThemes();
+
+    var obj = {};
+
+    obj.next = function() {
+        themesSequenceIndex++;
+    };
+
+    obj.set = function(name) {
+        themesSequenceIndex = searchIndex(name);
+    };
+
+    Object.defineProperty(obj, "current", {
+        get: function() {
+            return themesSequence[themesSequenceIndex];
+        }
+    });
+
+    return obj;
+};
+
+exports.themes = {
+    sequence: function() {
+        return Theme();
+    }
+};

gulpfile.js

@@ -27,6 +27,16 @@ var gulp = require("gulp"),
     del = require("del"),
     coffeelint = require('gulp-coffeelint');
 
+var argv = require('minimist')(process.argv.slice(2));
+
+var utils = require("./gulp-utils");
+
+var themes = utils.themes.sequence();
+
+if (argv.theme) {
+    themes.set(argv.theme);
+}
+
 var paths = {};
 paths.app = "app/";
 paths.dist = "dist/";
@@ -55,10 +65,16 @@ paths.sass = [
     paths.app + "**/*.scss",
     "!" + paths.app + "/styles/bourbon/**/*.scss",
     "!" + paths.app + "/styles/dependencies/**/*.scss",
-    "!" + paths.app + "/styles/extras/**/*.scss"
+    "!" + paths.app + "/styles/extras/**/*.scss",
+    "!" + paths.app + "/themes/**/variables.scss",
 ];
 
-paths.styles_dependencies = paths.app + "/styles/dependencies/**/*.scss";
+paths.sass_watch = paths.sass.concat(themes.current.customScss);
+
+paths.styles_dependencies = [
+    paths.app + "/styles/dependencies/**/*.scss",
+    themes.current.customVariables
+];
 
 paths.css = [
     paths.tmp + "styles/**/*.css",
@@ -79,7 +95,8 @@ paths.css_order = [
     paths.tmp + "styles/modules/**/*.css",
     paths.tmp + "modules/**/*.css",
     paths.tmp + "styles/shame/*.css",
-    paths.tmp + "plugins/**/*.css"
+    paths.tmp + "plugins/**/*.css",
+    paths.tmp + "themes/**/*.css"
 ];
 
 paths.coffee = [
@@ -153,7 +170,7 @@ paths.libs = [
     paths.app + "js/sha1-custom.js"
 ];
 
-var isDeploy = process.argv[process.argv.length - 1] == "deploy";
+var isDeploy = argv["_"].indexOf("deploy") !== -1;
 
 /*
 ############################################################################
@@ -213,7 +230,9 @@ gulp.task("scss-lint", [], function() {
 
     var fail = process.argv.indexOf("--fail") !== -1;
 
-    return gulp.src(paths.sass.concat(ignore))
+    var sassFiles = paths.sass.concat(themes.current.customScss, ignore);
+
+    return gulp.src(sassFiles)
         .pipe(gulpif(!isDeploy, cache(scsslint({endless: true, sync: true, config: "scsslint.yml"}), {
           success: function(scsslintFile) {
             return scsslintFile.scsslint.success;
@@ -232,20 +251,25 @@ gulp.task("clear-sass-cache", function() {
 });
 
 gulp.task("sass-compile", [], function() {
-    return gulp.src(paths.sass)
+    var sassFiles = paths.sass.concat(themes.current.customScss);
+
+    return gulp.src(sassFiles)
         .pipe(plumber())
         .pipe(insert.prepend('@import "dependencies";'))
         .pipe(cached("sass"))
         .pipe(sass({
             includePaths: [
-                paths.app + "styles/extras/"
+                paths.app + "styles/extras/",
+                themes.current.path
             ]
         }))
         .pipe(gulp.dest(paths.tmp));
 });
 
 gulp.task("css-lint-app", function() {
-    return gulp.src(paths.css)
+    var cssFiles = paths.css.concat(themes.current.customCss);
+
+    return gulp.src(cssFiles)
         .pipe(gulpif(!isDeploy, cache(csslint("csslintrc.json"), {
           success: function(csslintFile) {
             return csslintFile.csslint.success;
@@ -260,9 +284,11 @@ gulp.task("css-lint-app", function() {
 });
 
 gulp.task("app-css", function() {
-    return gulp.src(paths.css)
+    var cssFiles = paths.css.concat(themes.current.customCss);
+
+    return gulp.src(cssFiles)
         .pipe(order(paths.css_order, {base: '.'}))
-        .pipe(concat("app.css"))
+        .pipe(concat("theme-" + themes.current.name + ".css"))
         .pipe(autoprefixer({
             cascade: false
         }))
@@ -278,15 +304,37 @@ gulp.task("vendor-css", function() {
 gulp.task("main-css", function() {
     var _paths = [
         paths.tmp + "vendor.css",
-        paths.tmp + "app.css"
+        paths.tmp + "theme-" + themes.current.name + ".css"
     ];
 
     return gulp.src(_paths)
-        .pipe(concat("main.css"))
+        .pipe(concat("theme-" + themes.current.name + ".css"))
         .pipe(gulpif(isDeploy, minifyCSS({noAdvanced: true})))
         .pipe(gulp.dest(paths.dist + "styles/"))
 });
 
+var compileThemes = function (cb) {
+    return runSequence("clear",
+                       "scss-lint",
+                       "sass-compile",
+                       "css-lint-app",
+                       ["app-css", "vendor-css"],
+                       "main-css",
+                       function() {
+                           themes.next()
+
+                           if (themes.current) {
+                               compileThemes(cb);
+                           } else {
+                               cb();
+                           }
+                       });
+};
+
+gulp.task("compile-themes", function(cb) {
+    compileThemes(cb);
+});
+
 gulp.task("styles", function(cb) {
     return runSequence("scss-lint",
                        "sass-compile",
@@ -294,7 +342,6 @@ gulp.task("styles", function(cb) {
                        ["app-css", "vendor-css"],
                        "main-css",
                        cb);
-
 });
 
 gulp.task("styles-dependencies", function(cb) {
@@ -396,7 +443,7 @@ gulp.task("app-deploy", ["coffee", "conf", "locales", "app-loader"], function()
 # Common tasks
 ##############################################################################
 */
-gulp.task("clear", function(done) {
+gulp.task("clear", ["clear-sass-cache"], function(done) {
   return cache.clearAll(done);
 });
 
@@ -406,17 +453,33 @@ gulp.task("copy-svg", function() {
         .pipe(gulp.dest(paths.dist + "/svg/"));
 });
 
+gulp.task("copy-theme-svg", function() {
+    return gulp.src(themes.current.path + "/svg/**/*")
+        .pipe(gulp.dest(paths.dist + "/svg/" + themes.current.name));
+});
+
 gulp.task("copy-fonts", function() {
     return gulp.src(paths.app + "/fonts/*")
         .pipe(gulp.dest(paths.dist + "/fonts/"));
 });
 
+gulp.task("copy-theme-fonts", function() {
+    return gulp.src(themes.current.path + "/fonts/*")
+        .pipe(gulp.dest(paths.dist + "/fonts/" + themes.current.name));
+});
+
 gulp.task("copy-images", function() {
     return gulp.src(paths.app + "/images/**/*")
         .pipe(gulpif(isDeploy, imagemin({progressive: true})))
         .pipe(gulp.dest(paths.dist + "/images/"));
 });
 
+gulp.task("copy-theme-images", function() {
+    return gulp.src(themes.current.path + "/images/**/*")
+        .pipe(gulpif(isDeploy, imagemin({progressive: true})))
+        .pipe(gulp.dest(paths.dist + "/images/"  + themes.current.name));
+});
+
 gulp.task("copy-images-plugins", function() {
     return gulp.src(paths.app + "/plugins/**/images/*")
         .pipe(flatten())
@@ -433,7 +496,17 @@ gulp.task("copy-extras", function() {
         .pipe(gulp.dest(paths.dist + "/"));
 });
 
-gulp.task("copy", ["copy-fonts", "copy-images", "copy-images-plugins", "copy-plugin-templates", "copy-svg", "copy-extras"]);
+gulp.task("copy", [
+    "copy-fonts",
+    "copy-theme-fonts",
+    "copy-images",
+    "copy-theme-images",
+    "copy-images-plugins",
+    "copy-plugin-templates",
+    "copy-svg",
+    "copy-theme-svg",
+    "copy-extras"
+]);
 
 gulp.task("delete-tmp", function() {
     del.sync(paths.tmp);
@@ -464,7 +537,7 @@ gulp.task("express", function() {
 //Rerun the task when a file changes
 gulp.task("watch", function() {
     gulp.watch(paths.jade, ["jade-watch"]);
-    gulp.watch(paths.sass, ["styles"]);
+    gulp.watch(paths.sass_watch, ["styles"]);
     gulp.watch(paths.styles_dependencies, ["styles-dependencies"]);
     gulp.watch(paths.svg, ["copy-svg"]);
     gulp.watch(paths.coffee, ["app-watch"]);
@@ -480,7 +553,7 @@ gulp.task("deploy", function(cb) {
         "jade-deploy",
         "app-deploy",
         "jslibs-deploy",
-        "styles"
+        "compile-themes"
     ], cb);
 });
 //The default task (called when you run gulp from cli)

package.json

@@ -64,6 +64,7 @@
     "karma-sinon": "^1.0.4",
     "karma-sinon-chai": "^0.3.0",
     "karma-sourcemap-loader": "^0.3.4",
+    "minimist": "^1.1.1",
     "mocha": "^2.2.4",
     "pre-commit": "^1.0.5",
     "readable-stream": "~1.0.33",