resolves #359

client/imports/views/layouts/navigation/navigation.html

@@ -180,6 +180,39 @@
                         </li>
                     {{/if}}
 
+                    <li>
+                        <a href="#"><i class="fa fa-star"></i> <span
+                                class="nav-label">Mongoclient Skin</span>
+                            <span class="fa arrow pull-right"></span>
+                        </a>
+
+                        <ul class="nav nav-second-level collapse out">
+                            <li>
+                                <a id="skin-default" class="anchor-skin" href="#"><i
+                                        class="fa fa-star"></i> <span
+                                        class="nav-label">Skin - 1</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a id="skin-1" class="anchor-skin" href="#"><i
+                                        class="fa fa-star"></i> <span
+                                        class="nav-label">Skin - 2</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a id="skin-2" class="anchor-skin" href="#"><i
+                                        class="fa fa-star"></i> <span
+                                        class="nav-label">Skin - 3</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a id="skin-3" class="anchor-skin" href="#"><i
+                                        class="fa fa-star"></i> <span
+                                        class="nav-label">Skin - 4</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
                     {{initializeMetisMenu}}
                 {{/if}}
             </ul>

client/imports/views/layouts/navigation/navigation.js

@@ -139,6 +139,16 @@ const showMongoBinaryInfo = function () {
 };
 
 Template.navigation.events({
+    'click .anchor-skin' (e){
+        const body = $('body');
+        const skin = e.currentTarget.id;
+        localStorage.setItem(Enums.LOCAL_STORAGE_KEYS.MONGOCLIENT_SKIN, skin);
+        body.removeClass('skin-1');
+        body.removeClass('skin-2');
+        body.removeClass('skin-3');
+        if (skin !== 'skin-default') body.addClass(skin);
+    },
+
     'click #anchorShell'(e) {
         e.preventDefault();
         let connection = Connections.findOne({_id: Session.get(Helper.strSessionConnection)});

client/imports/views/layouts/top_navbar/top_navbar.js

@@ -5,6 +5,7 @@ import {FlowRouter} from "meteor/kadira:flow-router";
 import Helper from "/client/imports/helper";
 import {Connections} from "/lib/imports/collections/connections";
 import {connect, populateConnectionsTable} from "/client/imports/views/layouts/top_navbar/connections/connections";
+import Enums from "/lib/imports/enums";
 import "/client/imports/views/layouts/top_navbar/connections/connections";
 import "./top_navbar.html";
 
@@ -49,7 +50,11 @@ const init = function () {
         }
     });
 
-    $("body").addClass('fixed-sidebar');
+    let body = $("body");
+    let skin = localStorage.getItem(Enums.LOCAL_STORAGE_KEYS.MONGOCLIENT_SKIN);
+    body.addClass('fixed-sidebar');
+    if (skin && skin !== 'skin-default') body.addClass(skin);
+
 };
 
 const populateSwitchDatabaseTable = function (data) {

client/stylesheets/theme.css

@@ -6992,7 +6992,7 @@ body.skin-2 {
 }
 
 .skin-2 .nav-header {
-    background: url(patterns/header-profile-skin-2.png)
+    background-color: #213a53;
 }
 
 .skin-2.mini-navbar .nav-second-level {

lib/imports/enums.js

@@ -4,7 +4,8 @@
 let Enums = function () {
     this.LOCAL_STORAGE_KEYS = {
         MONGO_BINARY_INFO: 'mongoclient-mongo-binary-warn',
-        SHELL_COMMAND_HISTORY: 'mongoclient-shell-history'
+        SHELL_COMMAND_HISTORY: 'mongoclient-shell-history',
+        MONGOCLIENT_SKIN: 'mongoclient-skin'
     };
 
     this.QUERY_TYPES = {