FuseMaterialColorPicker enhanced

+ Navbar, Footer, Toolbar color options added to theme-options
+ FuseLayoutService moved to FuseConfigService

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { PagesModule } from './main/content/pages/pages.module';
 import { UIModule } from './main/content/ui/ui.module';
 import { ComponentsModule } from './main/content/components/components.module';
 import { FuseSplashScreenService } from './core/services/splash-screen.service';
+import { FuseConfigService } from './core/services/config.service';
 
 const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     suppressScrollX: true
@@ -79,7 +80,8 @@ const appRoutes: Routes = [
         ComponentsModule
     ],
     providers: [
-        FuseSplashScreenService
+        FuseSplashScreenService,
+        FuseConfigService
     ],
     bootstrap   : [
         AppComponent

src/app/core/components/material-color-picker/material-color-picker.component.html

@@ -1,4 +1,5 @@
 <button md-icon-button
+        class="mat-elevation-z1"
         [mdMenuTriggerFor]="colorMenu"
         (onMenuOpen)="onMenuOpen()"
         [ngClass]="'md-'+selectedPalette+'-'+selectedHue+'-bg'">
@@ -64,6 +65,7 @@
                  class="colors" perfect-scrollbar>
                 <div class="color"
                      *ngFor="let hue of hues"
+                     [fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
                      [ngClass]="'md-'+selectedPalette+'-'+hue+'-bg'"
                      (click)="selectHue(hue)"
                      fxLayout="row" fxLayoutAlign="start end" md-ink-ripple>

src/app/core/components/material-color-picker/material-color-picker.component.scss

@@ -10,7 +10,8 @@
             position: relative;
             overflow: hidden;
             min-height: 258px;
-            height: 258px;
+            height: 308px;
+            background-color: #f7f7f7;
 
             .view {
                 position: absolute;

src/app/core/components/material-color-picker/material-color-picker.component.ts

@@ -20,7 +20,7 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
     @Input() selectedHue = '';
     @Input() selectedFg = '';
     @Input() value: any;
-    @Output() valueChange = new EventEmitter();
+    @Output() onValueChange = new EventEmitter();
     @Output() selectedPaletteChange = new EventEmitter();
     @Output() selectedHueChange = new EventEmitter();
     @Output() selectedClassChange = new EventEmitter();
@@ -29,9 +29,9 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
 
     _selectedClass = '';
     @Input()
-    set selectedClass(value: string)
+    set selectedClass(value)
     {
-        if ( value !== '' && this._selectedClass !== value )
+        if ( value && value !== '' && this._selectedClass !== value )
         {
             const color = value.split('-');
             if ( color.length >= 5 )
@@ -55,9 +55,9 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
 
     _selectedBg = '';
     @Input()
-    set selectedBg(value: string)
+    set selectedBg(value)
     {
-        if ( value !== '' && this._selectedBg !== value )
+        if ( value && value !== '' && this._selectedBg !== value )
         {
             for ( const palette in this.colors )
             {
@@ -133,7 +133,6 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
             }
             else
             {
-                this.selectedClass = '';
                 this.selectedBg = '';
                 this.selectedFg = '';
             }
@@ -153,7 +152,7 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
             this.selectedFgChange.emit(this.selectedFg);
 
             this.value = this.selectedColor;
-            this.valueChange.emit(this.selectedColor);
+            this.onValueChange.emit(this.selectedColor);
         });
     }
 

src/app/core/components/search-bar/search-bar.component.html

@@ -1,20 +1,21 @@
-<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxLayout="row" fxLayoutAlign="start center" fxFlex="0 1 auto">
+<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto">
+    <div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex>
+        <label for="fuse-search-bar-input">
+            <button md-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
+                    *ngIf="collapsed">
+                <md-icon class="s-24">search</md-icon>
+            </button>
+            <!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed">
+                <md-progress-spinner color="md-accent" mode="indeterminate"></md-progress-spinner>
+            </span>-->
+        </label>
 
-    <label for="fuse-search-bar-input">
+        <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex>
-        <button md-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
+
-                *ngIf="collapsed">
+        <button md-icon-button class="fuse-search-bar-collapser md-icon-button" (click)="collapse()"
-            <md-icon class="s-24">search</md-icon>
+                aria-label="Collapse Search Bar">
+            <md-icon class="s-24">close</md-icon>
         </button>
-        <!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed">
-            <md-progress-spinner color="md-accent" mode="indeterminate"></md-progress-spinner>
-        </span>-->
-    </label>
-
-    <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex>
-
-    <button md-icon-button class="fuse-search-bar-collapser md-icon-button" (click)="collapse()"
-            aria-label="Collapse Search Bar">
-        <md-icon class="s-24">close</md-icon>
-    </button>
 
+    </div>
 </div>

src/app/core/components/search-bar/search-bar.component.scss

@@ -39,7 +39,6 @@
             right: 0;
             bottom: 0;
             left: 0;
-            background: #FFFFFF;
             z-index: 10;
 
             #fuse-search-bar-input {

src/app/core/components/search-bar/search-bar.component.ts

@@ -1,4 +1,6 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { FuseConfigService } from '../../services/config.service';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector   : 'fuse-search-bar',
@@ -8,12 +10,22 @@ import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 export class FuseSearchBarComponent implements OnInit
 {
     collapsed: boolean;
-
+    toolbarColor: string;
     @Output() onInput: EventEmitter<any> = new EventEmitter();
+    onSettingsChanged: Subscription;
 
-    constructor()
+    constructor(
+        private fuseConfig: FuseConfigService
+    )
     {
         this.collapsed = true;
+        this.onSettingsChanged =
+            this.fuseConfig.onSettingsChanged
+                .subscribe(
+                    (newSettings) => {
+                        this.toolbarColor = newSettings.colorClasses.toolbar;
+                    }
+                );
     }
 
     ngOnInit()

src/app/core/components/shortcuts/shortcuts.component.html

@@ -1,4 +1,4 @@
-<div id="fuse-shortcuts" class="md-white-bg" #shortcuts>
+<div id="fuse-shortcuts" #shortcuts>
 
     <div class="shortcuts-mobile-toggle" *ngIf="!mobileShortcutsPanelActive" fxLayout="row" fxLayoutAlign="start center"
          fxHide fxShow.lt-md>
@@ -7,7 +7,7 @@
         </button>
     </div>
 
-    <div class="shortcuts" fxHide fxShow.gt-sm>
+    <div class="shortcuts" fxHide fxShow.gt-sm [ngClass]="toolbarColor">
 
         <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex>
 

src/app/core/components/shortcuts/shortcuts.component.ts

@@ -3,6 +3,7 @@ import { FuseNavigationService } from '../navigation/navigation.service';
 import { Subscription } from 'rxjs/Subscription';
 import { ObservableMedia } from '@angular/flex-layout';
 import { FuseMatchMedia } from '../../services/match-media.service';
+import { FuseConfigService } from '../../services/config.service';
 
 @Component({
     selector   : 'fuse-shortcuts',
@@ -16,7 +17,9 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     filteredNavigationItems: any[];
     searching = false;
     mobileShortcutsPanelActive = false;
+    toolbarColor: string;
     matchMediaSubscription: Subscription;
+    onSettingsChanged: Subscription;
 
     @ViewChild('searchInput') searchInputField;
     @ViewChild('shortcuts') shortcutsEl: ElementRef;
@@ -25,10 +28,19 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
         private renderer: Renderer2,
         private observableMedia: ObservableMedia,
         private fuseMatchMedia: FuseMatchMedia,
-        private fuseNavigationService: FuseNavigationService
+        private fuseNavigationService: FuseNavigationService,
+        private fuseConfig: FuseConfigService
     )
     {
         this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
+
+        this.onSettingsChanged =
+            this.fuseConfig.onSettingsChanged
+                .subscribe(
+                    (newSettings) => {
+                        this.toolbarColor = newSettings.colorClasses.toolbar;
+                    }
+                );
     }
 
     ngOnInit()

src/app/core/components/theme-options/theme-options.component.html

@@ -2,7 +2,7 @@
     <md-icon>settings</md-icon>
 </button>
 
-<div #panel class="theme-options-panel md-white-bg mat-elevation-z2 p-16">
+<div #panel class="theme-options-panel md-white-bg mat-elevation-z2 pb-16">
 
     <button md-icon-button class="close-button" (click)="closeBar()">
         <md-icon>close</md-icon>
@@ -11,7 +11,7 @@
     <md-list>
         <h3 md-subheader>Navigation:</h3>
         <md-list-item>
-            <md-radio-group [(ngModel)]="layoutSettings.navigation" (ngModelChange)="onLayoutSettingsChanged()">
+            <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()">
                 <md-radio-button class="mr-8" value="left">Left</md-radio-button>
                 <md-radio-button class="mr-8" value="right">Right</md-radio-button>
                 <md-radio-button class="mr-8" value="none">None</md-radio-button>
@@ -20,7 +20,7 @@
 
         <h3 md-subheader>Toolbar:</h3>
         <md-list-item>
-            <md-radio-group [(ngModel)]="layoutSettings.toolbar" (ngModelChange)="onLayoutSettingsChanged()">
+            <md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()">
                 <md-radio-button class="mr-8" value="below">Below</md-radio-button>
                 <md-radio-button class="mr-8" value="above">Above</md-radio-button>
                 <md-radio-button class="mr-8" value="none">None</md-radio-button>
@@ -29,12 +29,37 @@
 
         <h3 md-subheader>Footer:</h3>
         <md-list-item>
-            <md-radio-group [(ngModel)]="layoutSettings.footer" (ngModelChange)="onLayoutSettingsChanged()">
+            <md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()">
                 <md-radio-button class="mr-8" value="below">Below</md-radio-button>
                 <md-radio-button class="mr-8" value="above">Above</md-radio-button>
                 <md-radio-button class="mr-8" value="none">None</md-radio-button>
             </md-radio-group>
         </md-list-item>
 
+        <md-divider></md-divider>
+
+        <h3 md-subheader>Colors:</h3>
+
+        <md-list-item>
+            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+                <h4>Toolbar Color</h4>
+                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
+            </div>
+        </md-list-item>
+
+        <md-list-item>
+            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+                <h4>Navigation Bar Color</h4>
+                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
+            </div>
+        </md-list-item>
+
+        <md-list-item>
+            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+                <h4>Footer Color</h4>
+                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
+            </div>
+        </md-list-item>
+
     </md-list>
 </div>

src/app/core/components/theme-options/theme-options.component.scss

@@ -1,5 +1,14 @@
 @import "src/app/core/scss/fuse";
 
+@keyframes rotating {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 :host {
     position: fixed;
     display: block;
@@ -11,7 +20,6 @@
         right: 0;
         top: 0;
         width: 320px;
-        height: 480px;
         transform: translate3d(100%, 0, 0);
         z-index: 999;
 
@@ -22,6 +30,10 @@
         }
     }
 
+    .mat-list .mat-list-item {
+        font-size: 15px;
+    }
+
     .open-button {
         position: absolute;
         top: 0;
@@ -37,6 +49,10 @@
         opacity: .75;
         z-index: 998;
 
+        md-icon {
+            animation: rotating 3s linear infinite;
+        }
+
         &:hover {
             opacity: 1;
         }

src/app/core/components/theme-options/theme-options.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
 import { Subscription } from 'rxjs/Subscription';
-import { FuseLayoutService } from '../../services/layout.service';
+import { FuseConfigService } from '../../services/config.service';
 
 @Component({
     selector   : 'fuse-theme-options',
@@ -14,24 +14,33 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
     @ViewChild('panel') panel;
 
     public player: AnimationPlayer;
+    fuseSettings: any;
 
     onSettingsChanged: Subscription;
-    layoutSettings: { navigation: string, toolbar: string, footer: string };
 
     constructor(
         private animationBuilder: AnimationBuilder,
-        private layoutService: FuseLayoutService
+        private fuseConfig: FuseConfigService
     )
     {
         this.onSettingsChanged =
-            this.layoutService.onSettingsChanged
+            this.fuseConfig.onSettingsChanged
                 .subscribe(
                     (newSettings) => {
-                        this.layoutSettings = newSettings;
+                        this.fuseSettings = newSettings;
                     }
                 );
     }
 
+    ngOnInit()
+    {
+    }
+
+    onSettingsChange()
+    {
+        this.fuseConfig.setSettings(this.fuseSettings);
+    }
+
     closeBar()
     {
         this.player =
@@ -54,17 +63,8 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
         this.player.play();
     }
 
-    ngOnInit()
-    {
-    }
-
     ngOnDestroy()
     {
         this.onSettingsChanged.unsubscribe();
     }
-
-    onLayoutSettingsChanged()
-    {
-        this.layoutService.onSettingsChanged.next(this.layoutSettings);
-    }
 }

src/app/core/matColors.ts

@@ -634,6 +634,50 @@ const matColors = {
             A400: 'white',
             A700: white87
         }
+    },
+    'fuse-dark': {
+        50      : '#ECECEE',
+        100     : '#C5C6CB',
+        200     : '#9EA1A9',
+        300     : '#7D818C',
+        400     : '#5C616F',
+        500     : '#3C4252',
+        600     : '#353A48',
+        700     : '#2D323E',
+        800     : '#262933',
+        900     : '#1E2129',
+        A100    : '#C5C6CB',
+        A200    : '#9EA1A9',
+        A400    : '#5C616F',
+        A700    : '#2D323E',
+        contrast: {
+            50  : black87,
+            100 : black87,
+            200 : black87,
+            300 : 'white',
+            400 : 'white',
+            500 : white87,
+            600 : white87,
+            700 : white87,
+            800 : white87,
+            900 : white87,
+            A100: black87,
+            A200: white87,
+            A400: white87,
+            A700: white87
+        }
+    },
+    white      : {
+        500     : 'white',
+        contrast: {
+            500: black87
+        }
+    },
+    black      : {
+        500     : 'black',
+        contrast: {
+            500: 'white'
+        }
     }
 };
 

src/app/core/modules/shared.module.ts

@@ -14,7 +14,6 @@ import { FusePipesModule } from '../pipes/pipes.module';
 import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
 import { FuseCountdownComponent } from '../components/countdown/countdown.component';
 import { FuseNavigationService } from '../components/navigation/navigation.service';
-import { FuseLayoutService } from '../services/layout.service';
 import { FuseMatchMedia } from '../services/match-media.service';
 import { FuseNavbarService } from '../../main/navbar/navbar.service';
 import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service';
@@ -67,7 +66,6 @@ import { FuseMaterialColorPickerComponent } from '../components/material-color-p
     ],
     providers      : [
         FuseNavigationService,
-        FuseLayoutService,
         FuseMatchMedia,
         FuseNavbarService,
         FuseMdSidenavHelperService

src/app/core/scss/partials/_colors.scss

@@ -38,7 +38,8 @@ $matColorsMap: (
     grey: $mat-grey,
     blue-grey: $mat-blue-grey,
     white: $mat-white,
-    black: $mat-black
+    black: $mat-black,
+    fuse-dark: $mat-fusedark
 );
 
 // Material color hues list

src/app/core/services/config.service.ts

@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { NavigationStart, Router } from '@angular/router';
+
+@Injectable()
+export class FuseConfigService
+{
+    settings: any;
+    defaultSettings: any;
+    onSettingsChanged: BehaviorSubject<any>;
+
+    /**
+     * @param router
+     */
+    constructor(private router: Router)
+    {
+        // Set the default settings
+        this.defaultSettings = {
+            layout      : {
+                navigation: 'left', // 'right', 'left', 'top', none
+                toolbar   : 'below', // 'above', 'below', none
+                footer    : 'none' // 'above', 'below', none
+            },
+            colorClasses: {
+                toolbar: 'md-white-500-bg',
+                navbar : 'md-fuse-dark-500-bg',
+                footer : 'md-fuse-dark-800-bg'
+            }
+        };
+
+        this.settings = Object.assign({}, this.defaultSettings);
+
+        // Reload the default settings on every navigation start
+        router.events.subscribe(
+            (event) => {
+                if ( event instanceof NavigationStart )
+                {
+                    this.setSettings({layout: this.defaultSettings.layout});
+                }
+            }
+        );
+
+        // Create the behavior subject
+        this.onSettingsChanged = new BehaviorSubject(this.settings);
+
+    }
+
+    /**
+     * Sets settings
+     * @param settings
+     */
+    setSettings(settings)
+    {
+        this.settings = Object.assign({}, this.settings, settings);
+        this.onSettingsChanged.next(this.settings);
+    }
+}

src/app/core/services/layout.service.ts

@@ -1,50 +0,0 @@
-import { Injectable } from '@angular/core';
-import { NavigationStart, Router } from '@angular/router';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/mergeMap';
-
-@Injectable()
-export class FuseLayoutService
-{
-    defaultSettings: { navigation: string, toolbar: string, footer: string };
-    onSettingsChanged: BehaviorSubject<{ navigation: string, toolbar: string, footer: string }>;
-
-    /**
-     * @param router
-     */
-    constructor(private router: Router)
-    {
-        // Set the default settings
-        this.defaultSettings = {
-            navigation: 'left', // 'right', 'left', 'top', none
-            toolbar   : 'below', // 'above', 'below', none
-            footer    : 'none' // 'above', 'below', none
-        };
-
-        // Create the behavior subject
-        this.onSettingsChanged = new BehaviorSubject(this.defaultSettings);
-
-        // Reload the default settings on every navigation start
-        router.events.subscribe(
-            (event) => {
-                if ( event instanceof NavigationStart )
-                {
-                    this.setSettings(this.defaultSettings);
-                }
-            }
-        );
-    }
-
-    /**
-     * Sets settings
-     * @param settings
-     */
-    setSettings(settings)
-    {
-        const newSettings = Object.assign({}, this.defaultSettings, settings);
-        this.onSettingsChanged.next(newSettings);
-    }
-}

src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-
-import { FuseLayoutService } from '../../../../../core/services/layout.service';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FuseConfigService } from '../../../../../core/services/config.service';
 
 @Component({
     selector   : 'fuse-forgot-password',
@@ -14,14 +13,16 @@ export class FuseForgotPasswordComponent implements OnInit
     forgotPasswordFormErrors: any;
 
     constructor(
-        private layoutService: FuseLayoutService,
+        private fuseConfig: FuseConfigService,
         private formBuilder: FormBuilder
     )
     {
-        this.layoutService.setSettings({
+        this.fuseConfig.setSettings({
-            navigation: 'none',
+            layout: {
-            toolbar   : 'none',
+                navigation: 'none',
-            footer    : 'none'
+                toolbar   : 'none',
+                footer    : 'none'
+            }
         });
 
         this.forgotPasswordFormErrors = {

src/app/main/content/pages/authentication/lock/lock.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
-import { FuseLayoutService } from '../../../../../core/services/layout.service';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FuseConfigService } from '../../../../../core/services/config.service';
 
 @Component({
     selector: 'fuse-lock',
@@ -14,14 +14,16 @@ export class FuseLockComponent implements OnInit
     lockFormErrors: any;
 
     constructor(
-        private layoutService: FuseLayoutService,
+        private fuseConfig: FuseConfigService,
         private formBuilder: FormBuilder
     )
     {
-        this.layoutService.setSettings({
+        this.fuseConfig.setSettings({
-            navigation: 'none',
+            layout: {
-            toolbar   : 'none',
+                navigation: 'none',
-            footer    : 'none'
+                toolbar   : 'none',
+                footer    : 'none'
+            }
         });
 
         this.lockFormErrors = {

src/app/main/content/pages/authentication/login-2/login-2.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
-import { FuseLayoutService } from '../../../../../core/services/layout.service';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FuseConfigService } from '../../../../../core/services/config.service';
 
 @Component({
     selector   : 'fuse-login-2',
@@ -13,12 +13,16 @@ export class FuseLogin2Component implements OnInit
     loginForm: FormGroup;
     loginFormErrors: any;
 
-    constructor(private layoutService: FuseLayoutService, private formBuilder: FormBuilder)
+    constructor(
+        private fuseConfig: FuseConfigService,
+        private formBuilder: FormBuilder)
     {
-        this.layoutService.setSettings({
+        this.fuseConfig.setSettings({
-            navigation: 'none',
+            layout: {
-            toolbar   : 'none',
+                navigation: 'none',
-            footer    : 'none'
+                toolbar   : 'none',
+                footer    : 'none'
+            }
         });
 
         this.loginFormErrors = {

src/app/main/content/pages/authentication/login/login.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
-import { FuseLayoutService } from '../../../../../core/services/layout.service';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FuseConfigService } from '../../../../../core/services/config.service';
 
 @Component({
     selector   : 'fuse-login',
@@ -14,14 +14,16 @@ export class FuseLoginComponent implements OnInit
     loginFormErrors: any;
 
     constructor(
-        private layoutService: FuseLayoutService,
+        private fuseConfig: FuseConfigService,
         private formBuilder: FormBuilder
     )
     {
-        this.layoutService.setSettings({
+        this.fuseConfig.setSettings({
-            navigation: 'none',
+            layout: {
-            toolbar   : 'none',
+                navigation: 'none',
-            footer    : 'none'
+                toolbar   : 'none',
+                footer    : 'none'
+            }
         });
 
         this.loginFormErrors = {

src/app/main/content/pages/authentication/register-2/register-2.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
-import { FuseLayoutService } from '../../../../../core/services/layout.service';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FuseConfigService } from '../../../../../core/services/config.service';
 
 @Component({
     selector   : 'fuse-register-2',
@@ -13,12 +13,16 @@ export class FuseRegister2Component implements OnInit
     registerForm: FormGroup;
     registerFormErrors: any;
 
-    constructor(private layoutService: FuseLayoutService, private formBuilder: FormBuilder)
+    constructor(
+        private fuseConfig: FuseConfigService,
+        private formBuilder: FormBuilder)
     {
-        this.layoutService.setSettings({
+        this.fuseConfig.setSettings({
-            navigation: 'none',
+            layout: {
-            toolbar   : 'none',
+                navigation: 'none',
-            footer    : 'none'
+                toolbar   : 'none',
+                footer    : 'none'
+            }
         });
 
         this.registerFormErrors = {

src/app/main/content/pages/authentication/register/register.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
-import { FuseLayoutService } from '../../../../../core/services/layout.service';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FuseConfigService } from '../../../../../core/services/config.service';
 
 @Component({
     selector   : 'fuse-register',
@@ -13,12 +13,16 @@ export class FuseRegisterComponent implements OnInit
     registerForm: FormGroup;
     registerFormErrors: any;
 
-    constructor(private layoutService: FuseLayoutService, private formBuilder: FormBuilder)
+    constructor(
+        private fuseConfig: FuseConfigService,
+        private formBuilder: FormBuilder)
     {
-        this.layoutService.setSettings({
+        this.fuseConfig.setSettings({
-            navigation: 'none',
+            layout: {
-            toolbar   : 'none',
+                navigation: 'none',
-            footer    : 'none'
+                toolbar   : 'none',
+                footer    : 'none'
+            }
         });
 
         this.registerFormErrors = {

src/app/main/content/pages/authentication/reset-password/reset-password.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
-import { FuseLayoutService } from '../../../../../core/services/layout.service';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FuseConfigService } from '../../../../../core/services/config.service';
 
 @Component({
     selector   : 'fuse-reset-password',
@@ -14,14 +14,16 @@ export class FuseResetPasswordComponent implements OnInit
     resetPasswordFormErrors: any;
 
     constructor(
-        private layoutService: FuseLayoutService,
+        private fuseConfig: FuseConfigService,
         private formBuilder: FormBuilder
     )
     {
-        this.layoutService.setSettings({
+        this.fuseConfig.setSettings({
-            navigation: 'none',
+            layout: {
-            toolbar   : 'none',
+                navigation: 'none',
-            footer    : 'none'
+                toolbar   : 'none',
+                footer    : 'none'
+            }
         });
 
         this.resetPasswordFormErrors = {

src/app/main/content/pages/coming-soon/coming-soon.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
-import { FuseLayoutService } from '../../../../core/services/layout.service';
+import { FuseConfigService } from '../../../../core/services/config.service';
 
 @Component({
     selector   : 'fuse-coming-soon',
@@ -13,12 +13,17 @@ export class FuseComingSoonComponent implements OnInit
     comingSoonForm: FormGroup;
     comingSoonFormErrors: any;
 
-    constructor(private layoutService: FuseLayoutService, private formBuilder: FormBuilder)
+    constructor(
+        private fuseConfig: FuseConfigService,
+        private formBuilder: FormBuilder
+    )
     {
-        this.layoutService.setSettings({
+        this.fuseConfig.setSettings({
-            navigation: 'none',
+            layout: {
-            toolbar   : 'none',
+                navigation: 'none',
-            footer    : 'none'
+                toolbar   : 'none',
+                footer    : 'none'
+            }
         });
 
         this.comingSoonFormErrors = {

src/app/main/content/pages/errors/404/error-404.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import { FuseLayoutService } from '../../../../../core/services/layout.service';
+import { FuseConfigService } from '../../../../../core/services/config.service';
 
 @Component({
     selector   : 'fuse-error-404',
@@ -9,12 +9,16 @@ import { FuseLayoutService } from '../../../../../core/services/layout.service';
 })
 export class FuseError404Component implements OnInit
 {
-    constructor(private layoutService: FuseLayoutService)
+    constructor(
+        private fuseConfig: FuseConfigService
+    )
     {
-        this.layoutService.setSettings({
+        this.fuseConfig.setSettings({
-            navigation: 'none',
+            layout: {
-            toolbar   : 'none',
+                navigation: 'none',
-            footer    : 'none'
+                toolbar   : 'none',
+                footer    : 'none'
+            }
         });
     }
 

src/app/main/content/pages/errors/500/error-500.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import { FuseLayoutService } from '../../../../../core/services/layout.service';
+import { FuseConfigService } from '../../../../../core/services/config.service';
 
 @Component({
     selector   : 'fuse-error-500',
@@ -9,12 +9,16 @@ import { FuseLayoutService } from '../../../../../core/services/layout.service';
 })
 export class FuseError500Component implements OnInit
 {
-    constructor(private layoutService: FuseLayoutService)
+    constructor(
+        private fuseConfig: FuseConfigService,
+    )
     {
-        this.layoutService.setSettings({
+        this.fuseConfig.setSettings({
-            navigation: 'none',
+            layout: {
-            toolbar   : 'none',
+                navigation: 'none',
-            footer    : 'none'
+                toolbar   : 'none',
+                footer    : 'none'
+            }
         });
     }
 

src/app/main/content/pages/maintenance/maintenance.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import { FuseLayoutService } from '../../../../core/services/layout.service';
+import { FuseConfigService } from '../../../../core/services/config.service';
 
 @Component({
     selector   : 'fuse-maintenance',
@@ -9,12 +9,16 @@ import { FuseLayoutService } from '../../../../core/services/layout.service';
 })
 export class FuseMaintenanceComponent implements OnInit
 {
-    constructor(private layoutService: FuseLayoutService)
+    constructor(
+        private fuseConfig: FuseConfigService,
+    )
     {
-        this.layoutService.setSettings({
+        this.fuseConfig.setSettings({
-            navigation: 'none',
+            layout: {
-            toolbar   : 'none',
+                navigation: 'none',
-            footer    : 'none'
+                toolbar   : 'none',
+                footer    : 'none'
+            }
         });
     }
 

src/app/main/footer/footer.component.html

@@ -1,5 +1,3 @@
-<md-toolbar class="mat-elevation-z1 md-white-bg">
+<md-toolbar class="mat-elevation-z1">
-
     <span>Footer</span>
-
 </md-toolbar>

src/app/main/footer/footer.component.scss

@@ -3,6 +3,11 @@
     flex: 0 1 auto;
     z-index: 3;
 
+    .mat-toolbar {
+        background: inherit;
+        color: inherit;
+    }
+
     &.above {
         position: relative;
         z-index: 99;

src/app/main/main.component.html

@@ -3,40 +3,44 @@
     <div id="fuse-main-content" fxFlexFill>
 
         <!-- TOOLBAR: Above -->
-        <ng-container *ngIf="layoutSettings.toolbar === 'above'">
+        <ng-container *ngIf="fuseSettings.layout.toolbar === 'above'">
-            <fuse-toolbar class="above"></fuse-toolbar>
+            <fuse-toolbar class="above" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
         </ng-container>
         <!-- / TOOLBAR: Above -->
 
         <div id="wrapper">
 
-            <fuse-navbar [folded]="false" class="md-primary-700-bg left-navbar" *ngIf="layoutSettings.navigation === 'left'"></fuse-navbar>
+            <fuse-navbar [folded]="false"
+                         class="left-navbar"
+                         *ngIf="fuseSettings.layout.navigation === 'left'"
+                         [class]="fuseSettings.colorClasses.navbar">
+            </fuse-navbar>
 
             <div class="content-wrapper">
 
                 <!-- TOOLBAR: Below -->
-                <ng-container *ngIf="layoutSettings.toolbar === 'below'">
+                <ng-container *ngIf="fuseSettings.layout.toolbar === 'below'">
-                    <fuse-toolbar class="below"></fuse-toolbar>
+                    <fuse-toolbar class="below" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
                 </ng-container>
                 <!-- / TOOLBAR: Below -->
 
                 <fuse-content></fuse-content>
 
                 <!-- FOOTER: Below -->
-                <ng-container *ngIf="layoutSettings.footer === 'below'">
+                <ng-container *ngIf="fuseSettings.layout.footer === 'below'">
-                    <fuse-footer class="below"></fuse-footer>
+                    <fuse-footer class="below" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
                 </ng-container>
                 <!-- / FOOTER: Below -->
 
             </div>
 
-            <fuse-navbar [folded]="false" class="md-primary-700-bg right-navbar" *ngIf="layoutSettings.navigation === 'right'"></fuse-navbar>
+            <fuse-navbar [folded]="false" class="md-primary-700-bg right-navbar" *ngIf="fuseSettings.layout.navigation === 'right'"></fuse-navbar>
 
         </div>
 
         <!-- FOOTER: Above -->
-        <ng-container *ngIf="layoutSettings.footer === 'above'">
+        <ng-container *ngIf="fuseSettings.layout.footer === 'above'">
-            <fuse-footer class="above"></fuse-footer>
+            <fuse-footer class="above" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
         </ng-container>
         <!-- FOOTER: Above -->
 

src/app/main/main.component.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
-import { FuseLayoutService } from '../core/services/layout.service';
 import { Subscription } from 'rxjs/Subscription';
+import { FuseConfigService } from '../core/services/config.service';
 
 @Component({
     selector     : 'fuse-main',
@@ -11,19 +11,19 @@ import { Subscription } from 'rxjs/Subscription';
 export class FuseMainComponent implements OnInit, OnDestroy
 {
     onSettingsChanged: Subscription;
-    layoutSettings: { navigation: string, toolbar: string, footer: string };
+    fuseSettings: any;
 
     constructor(
-        private layoutService: FuseLayoutService,
         private _renderer: Renderer2,
-        private _elementRef: ElementRef
+        private _elementRef: ElementRef,
+        private fuseConfig: FuseConfigService
     )
     {
         this.onSettingsChanged =
-            this.layoutService.onSettingsChanged
+            this.fuseConfig.onSettingsChanged
                 .subscribe(
                     (newSettings) => {
-                        this.layoutSettings = newSettings;
+                        this.fuseSettings = newSettings;
                     }
                 );
     }

src/app/main/toolbar/toolbar.component.html

@@ -1,4 +1,4 @@
-<md-toolbar class="p-0 mat-elevation-z1 md-white-bg">
+<md-toolbar class="p-0 mat-elevation-z1">
 
     <div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">
 

src/app/main/toolbar/toolbar.component.scss

@@ -10,6 +10,11 @@
         z-index: 2;
     }
 
+    .mat-toolbar {
+        background: inherit;
+        color: inherit;
+    }
+
     .loading-spinner {
         width: 32px;
         height: 32px;