(Theming) Dark theme + Ability to use multiple themes

src/@fuse/components/countdown/countdown.component.scss

@@ -1,4 +1,4 @@
-:host {
+fuse-countdown {
     display: flex;
     flex-direction: row;
     align-items: center;

src/@fuse/components/countdown/countdown.theme.scss

@@ -0,0 +1,17 @@
+@mixin fuse-countdown-theme($theme) {
+
+    $foreground: map-get($theme, foreground);
+
+    fuse-countdown {
+
+        .fuse-countdown {
+
+            .time {
+
+                .title {
+                    color: map-get($foreground, secondary-text);
+                }
+            }
+        }
+    }
+}

src/@fuse/components/highlight/highlight.component.scss

@@ -1,5 +1,6 @@
 :host {
     display: block;
+    width: 100%;
     padding: 8px;
     background: #263238;
     cursor: text;

src/@fuse/components/material-color-picker/material-color-picker.theme.scss

@@ -1,6 +1,6 @@
 @mixin fuse-material-color-picker-theme($theme) {
 
-    $background: map_get($theme, background);
+    $background: map-get($theme, background);
 
     .fuse-material-color-picker-menu {
 

src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html

@@ -1,42 +1,42 @@
 <ng-container *ngIf="!item.hidden">
 
     <!-- normal collapse -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function" matRipple>
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.url -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.externalUrl -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.function -->
     <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
-          (click)="item.function()" matRipple>
+          (click)="item.function()">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </span>
 
     <!-- item.url && item.function -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
        (click)="item.function()"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.externalUrl && item.function -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
        (click)="item.function()"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
@@ -52,7 +52,7 @@
 
     <div class="children" [ngClass]="{'open': isOpen}">
 
-        <div class="{{fuseConfig.layout.navbar.background}}">
+        <div class="{{fuseConfig.layout.navbar.primaryBackground}}">
 
             <ng-container *ngFor="let item of item.children">
                 <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>

src/@fuse/components/navigation/horizontal/item/item.component.html

@@ -2,37 +2,37 @@
 
     <!-- item.url -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.externalUrl -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.function -->
     <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
-          (click)="item.function()" matRipple>
+          (click)="item.function()">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </span>
 
     <!-- item.url && item.function -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
        (click)="item.function()"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.externalUrl && item.function -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
        (click)="item.function()"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 

src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html

@@ -1,45 +1,45 @@
 <ng-container *ngIf="!item.hidden">
 
-    <!-- normal collapse -->
+    <!-- normal collapsable -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function"
-       (click)="toggleOpen($event)" matRipple>
+       (click)="toggleOpen($event)">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.url -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
        (click)="toggleOpen($event)"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.externalUrl -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
        (click)="toggleOpen($event)"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.function -->
     <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
-          (click)="toggleOpen($event);item.function()" matRipple>
+          (click)="toggleOpen($event);item.function()">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </span>
 
     <!-- item.url && item.function -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
        (click)="toggleOpen($event);item.function()"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.externalUrl && item.function -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
        (click)="toggleOpen($event);item.function()"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 

src/@fuse/components/navigation/vertical/item/item.component.html

@@ -2,37 +2,37 @@
 
     <!-- item.url -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.externalUrl -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.function -->
     <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
-          (click)="item.function()" matRipple>
+          (click)="item.function()">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </span>
 
     <!-- item.url && item.function -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
        (click)="item.function()"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.externalUrl && item.function -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
        (click)="item.function()"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 

src/@fuse/components/search-bar/search-bar.component.html

@@ -1,15 +1,12 @@
 <div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}">
 
-    <div class="fuse-search-bar-content" [ngClass]="fuseConfig.layout.toolbar.background">
+    <div class="fuse-search-bar-content">
 
         <label for="fuse-search-bar-input">
             <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
                     *ngIf="collapsed">
                 <mat-icon class="s-24 secondary-text">search</mat-icon>
             </button>
-            <!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed">
-                <mat-progress-spinner color="mat-accent" mode="indeterminate"></mat-progress-spinner>
-            </span>-->
         </label>
 
         <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)"

src/@fuse/components/search-bar/search-bar.component.scss

@@ -53,8 +53,9 @@
                 display: none;
                 flex: 1 0 auto;
                 min-height: 64px;
-                background-color: transparent;
                 font-size: 16px;
+                background-color: transparent;
+                color: currentColor;
             }
         }
 

src/@fuse/components/search-bar/search-bar.theme.scss

@@ -0,0 +1,11 @@
+@mixin fuse-search-bar-theme($theme) {
+
+    $background: map-get($theme, background);
+
+    .fuse-search-bar {
+
+        &.expanded {
+            background-color: map-get($background, background);
+        }
+    }
+}

src/@fuse/components/shortcuts/shortcuts.component.scss

@@ -19,6 +19,10 @@
                     display: flex !important;
                     flex: 1;
                     height: 100%;
+
+                    > div {
+                        flex: 1 1 auto !important;
+                    }
                 }
             }
         }

src/@fuse/components/shortcuts/shortcuts.theme.scss

@@ -0,0 +1,11 @@
+@mixin fuse-shortcuts-theme($theme) {
+
+    $background: map-get($theme, background);
+
+    #fuse-shortcuts {
+
+        &.show-mobile-panel {
+            background-color: map-get($background, background);
+        }
+    }
+}

src/@fuse/components/sidebar/sidebar.component.scss

@@ -15,7 +15,6 @@ fuse-sidebar {
     max-width: 280px;
     z-index: 1000;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
-    background: white;
 
     @include media-breakpoint-down('xs') {
         min-width: 0 !important;
@@ -62,10 +61,5 @@ fuse-sidebar {
     left: 0;
     right: 0;
     z-index: 999;
-    background-color: rgba(0, 0, 0, 0.6);
     opacity: 0;
-
-    &.fuse-sidebar-overlay-invisible {
-        background-color: transparent;
-    }
 }

src/@fuse/components/sidebar/sidebar.component.ts

@@ -318,7 +318,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
                 // Get the active status
                 const isActive = this._observableMedia.isActive(this.lockedOpen);
-
                 // If the both status are the same, don't act
                 if ( this._wasActive === isActive )
                 {

src/@fuse/components/sidebar/sidebar.theme.scss

@@ -0,0 +1,16 @@
+@mixin fuse-sidebar-theme($theme) {
+
+    $background: map-get($theme, background);
+
+    fuse-sidebar {
+        background: map-get($background, background);
+    }
+
+    .fuse-sidebar-overlay {
+        background-color: rgba(0, 0, 0, 0.6);
+
+        &.fuse-sidebar-overlay-invisible {
+            background-color: transparent;
+        }
+    }
+}

src/@fuse/components/theme-options/theme-options.component.html

@@ -12,6 +12,19 @@
 
     <form [formGroup]="form">
 
+        <!-- COLOR THEME -->
+        <div class="group">
+
+            <h2>Color themes</h2>
+
+            <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="colorTheme">
+                <mat-radio-button class="mb-12" value="theme-default">Default</mat-radio-button>
+                <mat-radio-button class="mb-12" value="theme-default-dark">Default Dark</mat-radio-button>
+                <mat-radio-button class="mb-12" value="theme-yellow-light">Yellow Light</mat-radio-button>
+            </mat-radio-group>
+
+        </div>
+
         <!-- LAYOUT STYLES -->
         <div class="group" formGroupName="layout">
 
@@ -79,10 +92,13 @@
                             <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <h3 class="mt-16 mb-8">Primary background:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
+                                                    formControlName="primaryBackground"></fuse-material-color-picker>
-                        </fuse-material-color-picker>
+
+                        <h3 class="mt-16 mb-8">Secondary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="secondaryBackground"></fuse-material-color-picker>
 
                     </div>
 
@@ -102,10 +118,13 @@
                             <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.toolbar.background">
+                                                    formControlName="background"></fuse-material-color-picker>
-                        </fuse-material-color-picker>
 
                     </div>
 
@@ -125,10 +144,13 @@
                             <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
                         </mat-radio-group>
 
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
                         <h3 class="mt-24 mb-8">Color:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
+                                                    formControlName="background"></fuse-material-color-picker>
-                        </fuse-material-color-picker>
 
                     </div>
 
@@ -190,10 +212,13 @@
                             <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <h3 class="mt-16 mb-8">Primary background:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
+                                                    formControlName="primaryBackground"></fuse-material-color-picker>
-                        </fuse-material-color-picker>
+
+                        <h3 class="mt-16 mb-8">Secondary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="secondaryBackground"></fuse-material-color-picker>
 
                     </div>
 
@@ -213,10 +238,13 @@
                             <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.toolbar.background">
+                                                    formControlName="background"></fuse-material-color-picker>
-                        </fuse-material-color-picker>
 
                     </div>
 
@@ -236,10 +264,13 @@
                             <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
+                                                    formControlName="background"></fuse-material-color-picker>
-                        </fuse-material-color-picker>
 
                     </div>
 
@@ -301,10 +332,13 @@
                             <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <h3 class="mt-16 mb-8">Primary background:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
+                                                    formControlName="primaryBackground"></fuse-material-color-picker>
-                        </fuse-material-color-picker>
+
+                        <h3 class="mt-16 mb-8">Secondary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="secondaryBackground"></fuse-material-color-picker>
 
                     </div>
 
@@ -323,10 +357,13 @@
                             <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.toolbar.background">
+                                                    formControlName="background"></fuse-material-color-picker>
-                        </fuse-material-color-picker>
 
                     </div>
 
@@ -345,10 +382,13 @@
                             <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
+                                                    formControlName="background"></fuse-material-color-picker>
-                        </fuse-material-color-picker>
 
                     </div>
 
@@ -405,9 +445,14 @@
                             <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <h3 class="mt-16 mb-8">Primary background:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
+                                                    formControlName="primaryBackground">
+                        </fuse-material-color-picker>
+
+                        <h3 class="mt-16 mb-8">Secondary background (Vertical):</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="secondaryBackground">
                         </fuse-material-color-picker>
 
                     </div>
@@ -427,10 +472,13 @@
                             <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.toolbar.background">
+                                                    formControlName="background"></fuse-material-color-picker>
-                        </fuse-material-color-picker>
 
                     </div>
 
@@ -449,10 +497,13 @@
                             <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
+                                                    formControlName="background"></fuse-material-color-picker>
-                        </fuse-material-color-picker>
 
                     </div>
 

src/@fuse/components/theme-options/theme-options.component.scss

@@ -9,7 +9,7 @@
     }
 }
 
-:host {
+fuse-theme-options {
     display: flex;
     overflow: hidden;
 
@@ -45,7 +45,6 @@
                 flex: 1 0 auto;
                 flex-direction: column;
                 position: relative;
-                border: 1px solid rgba(0, 0, 0, 0.12);
                 border-radius: 2px;
                 padding: 28px 16px 8px 16px;
                 margin: 16px 0;
@@ -58,14 +57,11 @@
                     padding: 0 8px;
                     font-size: 16px;
                     font-weight: 500;
-                    background: white;
-                    color: rgba(0, 0, 0, 0.54);
                 }
 
                 h3 {
                     font-size: 14px;
                     font-weight: 500;
-                    color: rgba(0, 0, 0, 0.54);
                     margin: 24px 0 16px 0;
                     padding: 0;
 

src/@fuse/components/theme-options/theme-options.component.ts

@@ -1,5 +1,6 @@
-import { Component, HostBinding, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { Component, HostBinding, Inject, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { DOCUMENT } from '@angular/common';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -9,10 +10,11 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 
 @Component({
-    selector   : 'fuse-theme-options',
+    selector     : 'fuse-theme-options',
-    templateUrl: './theme-options.component.html',
+    templateUrl  : './theme-options.component.html',
-    styleUrls  : ['./theme-options.component.scss'],
+    styleUrls    : ['./theme-options.component.scss'],
-    animations : fuseAnimations
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
 export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 {
@@ -28,6 +30,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
     /**
      * Constructor
      *
+     * @param {DOCUMENT} document
      * @param {FormBuilder} _formBuilder
      * @param {FuseConfigService} _fuseConfigService
      * @param {FuseNavigationService} _fuseNavigationService
@@ -35,6 +38,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
      * @param {Renderer2} _renderer
      */
     constructor(
+        @Inject(DOCUMENT) private document: any,
         private _formBuilder: FormBuilder,
         private _fuseConfigService: FuseConfigService,
         private _fuseNavigationService: FuseNavigationService,
@@ -61,25 +65,29 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
         // Build the config form
         // noinspection TypeScriptValidateTypes
         this.form = this._formBuilder.group({
+            colorTheme      : new FormControl(),
             layout          : this._formBuilder.group({
                 style    : new FormControl(),
                 width    : new FormControl(),
                 navbar   : this._formBuilder.group({
-                    background: new FormControl(),
+                    primaryBackground  : new FormControl(),
-                    folded    : new FormControl(),
+                    secondaryBackground: new FormControl(),
-                    hidden    : new FormControl(),
+                    folded             : new FormControl(),
-                    position  : new FormControl(),
+                    hidden             : new FormControl(),
-                    variant   : new FormControl()
+                    position           : new FormControl(),
+                    variant            : new FormControl()
                 }),
                 toolbar  : this._formBuilder.group({
-                    background: new FormControl(),
+                    background           : new FormControl(),
-                    hidden    : new FormControl(),
+                    customBackgroundColor: new FormControl(),
-                    position  : new FormControl()
+                    hidden               : new FormControl(),
+                    position             : new FormControl()
                 }),
                 footer   : this._formBuilder.group({
-                    background: new FormControl(),
+                    background           : new FormControl(),
-                    hidden    : new FormControl(),
+                    customBackgroundColor: new FormControl(),
-                    position  : new FormControl()
+                    hidden               : new FormControl(),
+                    position             : new FormControl()
                 }),
                 sidepanel: this._formBuilder.group({
                     hidden  : new FormControl(),
@@ -179,21 +187,24 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                     layout: {
                         width    : 'fullwidth',
                         navbar   : {
-                            background: 'mat-fuse-dark-700-bg',
+                            primaryBackground  : 'fuse-navy-700',
-                            folded    : false,
+                            secondaryBackground: 'indigo-600',
-                            hidden    : false,
+                            folded             : false,
-                            position  : 'left',
+                            hidden             : false,
-                            variant   : 'vertical-style-1'
+                            position           : 'left',
+                            variant            : 'vertical-style-1'
                         },
                         toolbar  : {
-                            background: 'mat-white-500-bg',
+                            background           : 'fuse-white-500',
-                            hidden    : false,
+                            customBackgroundColor: false,
-                            position  : 'below-static'
+                            hidden               : false,
+                            position             : 'below-static'
                         },
                         footer   : {
-                            background: 'mat-fuse-dark-900-bg',
+                            background           : 'fuse-navy-900',
-                            hidden    : false,
+                            customBackgroundColor: true,
-                            position  : 'below-static'
+                            hidden               : false,
+                            position             : 'below-static'
                         },
                         sidepanel: {
                             hidden  : false,
@@ -212,21 +223,24 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                     layout: {
                         width    : 'fullwidth',
                         navbar   : {
-                            background: 'mat-fuse-dark-700-bg',
+                            primaryBackground  : 'fuse-navy-700',
-                            folded    : false,
+                            secondaryBackground: 'indigo-600',
-                            hidden    : false,
+                            folded             : false,
-                            position  : 'left',
+                            hidden             : false,
-                            variant   : 'vertical-style-1'
+                            position           : 'left',
+                            variant            : 'vertical-style-1'
                         },
                         toolbar  : {
-                            background: 'mat-white-500-bg',
+                            background           : 'fuse-white-500',
-                            hidden    : false,
+                            customBackgroundColor: false,
-                            position  : 'below'
+                            hidden               : false,
+                            position             : 'below'
                         },
                         footer   : {
-                            background: 'mat-fuse-dark-900-bg',
+                            background           : 'fuse-navy-900',
-                            hidden    : false,
+                            customBackgroundColor: true,
-                            position  : 'below'
+                            hidden               : false,
+                            position             : 'below'
                         },
                         sidepanel: {
                             hidden  : false,
@@ -245,21 +259,24 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                     layout: {
                         width    : 'fullwidth',
                         navbar   : {
-                            background: 'mat-fuse-dark-700-bg',
+                            primaryBackground  : 'fuse-navy-700',
-                            folded    : false,
+                            secondaryBackground: 'indigo-600',
-                            hidden    : false,
+                            folded             : false,
-                            position  : 'left',
+                            hidden             : false,
-                            layout    : 'vertical-style-1'
+                            position           : 'left',
+                            layout             : 'vertical-style-1'
                         },
                         toolbar  : {
-                            background: 'mat-white-500-bg',
+                            background           : 'fuse-white-500',
-                            hidden    : false,
+                            customBackgroundColor: false,
-                            position  : 'above-static'
+                            hidden               : false,
+                            position             : 'above-static'
                         },
                         footer   : {
-                            background: 'mat-fuse-dark-900-bg',
+                            background           : 'fuse-navy-900',
-                            hidden    : false,
+                            customBackgroundColor: true,
-                            position  : 'above-static'
+                            hidden               : false,
+                            position             : 'above-static'
                         },
                         sidepanel: {
                             hidden  : false,
@@ -278,21 +295,24 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                     layout: {
                         width    : 'fullwidth',
                         navbar   : {
-                            background: 'mat-fuse-dark-700-bg',
+                            primaryBackground  : 'fuse-navy-700',
-                            folded    : false,
+                            secondaryBackground: 'indigo-600',
-                            hidden    : false,
+                            folded             : false,
-                            position  : 'top',
+                            hidden             : false,
-                            variant   : 'vertical-style-1'
+                            position           : 'top',
+                            variant            : 'vertical-style-1'
                         },
                         toolbar  : {
-                            background: 'mat-white-500-bg',
+                            background           : 'fuse-white-500',
-                            hidden    : false,
+                            customBackgroundColor: false,
-                            position  : 'above'
+                            hidden               : false,
+                            position             : 'above'
                         },
                         footer   : {
-                            background: 'mat-fuse-dark-900-bg',
+                            background           : 'fuse-navy-900',
-                            hidden    : false,
+                            customBackgroundColor: true,
-                            position  : 'above-fixed'
+                            hidden               : false,
+                            position             : 'above-fixed'
                         },
                         sidepanel: {
                             hidden  : false,

src/@fuse/components/theme-options/theme-options.module.ts

@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
+import { MatButtonModule, MatCheckboxModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
 
 import { FuseDirectivesModule } from '@fuse/directives/directives';
-import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module';
 import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';
+import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module';
 
 import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component';
 
@@ -22,6 +22,7 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-
         FlexLayoutModule,
 
         MatButtonModule,
+        MatCheckboxModule,
         MatDividerModule,
         MatFormFieldModule,
         MatIconModule,

src/@fuse/components/theme-options/theme-options.theme.scss

@@ -0,0 +1,27 @@
+@mixin fuse-theme-options-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    fuse-theme-options {
+
+        .theme-options-panel {
+
+            form {
+
+                .group {
+                    border: 1px solid map-get($foreground, divider);
+
+                    h2 {
+                        background: map-get($background, background);
+                        color: map-get($foreground, secondary-text);
+                    }
+
+                    h3 {
+                        color: map-get($foreground, secondary-text);
+                    }
+                }
+            }
+        }
+    }
+}

src/@fuse/components/widget/widget.theme.scss

@@ -0,0 +1,13 @@
+@mixin fuse-widget-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    fuse-widget {
+
+        > .fuse-widget-front,
+        > .fuse-widget-back {
+            background: map-get($background, card);
+        }
+    }
+}

src/@fuse/mat-colors/index.ts

@@ -4,6 +4,7 @@ const black12 = 'rgba(black, 0.12)';
 const white12 = 'rgba(white, 0.12)';
 const black6 = 'rgba(black, 0.06)';
 const white6 = 'rgba(white, 0.06)';
+
 const matColors = {
     'red': {
         50      : '#ffebee',
@@ -635,7 +636,8 @@ const matColors = {
             A700: white87
         }
     },
-    'fuse-dark': {
+
+    'fuse-navy': {
         50      : '#ECECEE',
         100     : '#C5C6CB',
         200     : '#9EA1A9',
@@ -667,13 +669,15 @@ const matColors = {
             A700: white87
         }
     },
-    white      : {
+
+    'fuse-white': {
         500     : 'white',
         contrast: {
             500: black87
         }
     },
-    black      : {
+
+    'fuse-black': {
         500     : 'black',
         contrast: {
             500: 'white'
@@ -693,7 +697,6 @@ const matPresetColors = [
 export class MatColors
 {
     public static all = matColors;
-
     public static presets = matPresetColors;
 
     public static getColor(colorName)
@@ -702,6 +705,7 @@ export class MatColors
         {
             return matColors[colorName];
         }
+
         return false;
     }
 }

src/@fuse/scss/core.scss

@@ -10,15 +10,12 @@
 // Fuse
 @import "fuse";
 
+// Theme
+@import "theme";
+
 // Include core Angular Material styles
 @include mat-core();
 
-// Setup the typography
-@include angular-material-typography($typography);
-
-// Create an Angular Material theme from the $theme map
-@include angular-material-theme($theme);
-
 // Partials
 @import "partials/reset";
 @import "partials/normalize";

src/@fuse/scss/fuse.scss

@@ -1,5 +1,5 @@
-// Material theming
+// Material theming tools
-@import "theming";
+@import '~@angular/material/theming';
 
 // Breakpoint mixins
-@import "mixins/breakpoints";
+@import "mixins/breakpoints";

src/@fuse/scss/mixins/_breakpoints.scss

@@ -25,7 +25,7 @@ $grid-breakpoints: (
 
 @mixin media-breakpoint($breakpointName) {
 
-    $mediaQuery: map_get($breakpoints, $breakpointName);
+    $mediaQuery: map-get($breakpoints, $breakpointName);
 
     @if ($mediaQuery != null) {
 

src/@fuse/scss/partials/_angular-material-fix.scss

@@ -12,10 +12,6 @@
 }
 
 // Fix: "Inconsistent font sizes across elements"
-.mat-form-field-wrapper {
-    font-size: 16px;
-}
-
 .mat-checkbox {
     font-size: 16px;
 }
@@ -34,7 +30,7 @@
     background-color: rgba(0, 0, 0, 0.12);
 }
 
-// Fix: "Some idiots using table-cell and inline-table in mat-select"
+// Fix: "Table-cell and inline-table in mat-select"
 .mat-form-field {
 
     &.mat-form-field-type-mat-select {

src/@fuse/scss/partials/_cards.scss

@@ -1,7 +1,26 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Theming
+// -----------------------------------------------------------------------------------------------------
+@mixin cards-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .fuse-card {
+        background: map-get($background, card);
+
+        .card-divider {
+            border-top: 1px solid map-get($foreground, divider);
+        }
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Cards
+// -----------------------------------------------------------------------------------------------------
 .fuse-card {
     max-width: 320px;
     min-width: 320px;
-    background: white;
     border-radius: 2px;
     @include mat-elevation(2);
 
@@ -37,13 +56,8 @@
 
     // Divider
     .card-divider {
-        border-top: 1px solid rgba(0, 0, 0, 0.12);
         margin: 16px;
 
-        &.light {
-            border-top-color: rgba(255, 255, 255, 0.12);
-        }
-
         &.full-width {
             margin: 0;
         }

src/@fuse/scss/partials/_colors.scss

@@ -1,23 +1,52 @@
-.secondary-text,
+// -----------------------------------------------------------------------------------------------------
-.icon,
+// @ Theming
-i {
+// -----------------------------------------------------------------------------------------------------
-    color: rgba(0, 0, 0, 0.54);
+@mixin colors-theme($theme) {
+
+    $is-dark: map-get($theme, is-dark);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    // Base colors
+    & {
+        color: map-get($foreground, text);
+
+        // If it's a light theme, use a darker background
+        // color other than the default #fafafa
+        @if ($is-dark == false) {
+            background: #F5F5F5;
+        } @else {
+            background: map-get($background, background);
+        }
+    }
+
+    .secondary-text {
+        color: map-get($foreground, secondary-text);
+    }
+
+    .icon,
+    i {
+        color: map-get($foreground, icon);
+    }
+
+    .hint-text {
+        color: map-get($foreground, hint-text);
+    }
+
+    .disabled-text {
+        color: map-get($foreground, disabled-text);
+    }
+
+    .fade-text,
+    .divider {
+        color: map-get($foreground, divider);
+    }
 }
 
-.hint-text,
+// -----------------------------------------------------------------------------------------------------
-.disabled-text {
+// @ Material colors map
-    color: rgba(0, 0, 0, 0.38);
+// -----------------------------------------------------------------------------------------------------
-}
-
-.divider {
-    color: rgba(0, 0, 0, 0.12);
-}
-
-// Material colors map
 $matPalettes: (
-    primary: $primary,
-    accent: $accent,
-    warn: $warn,
     red: $mat-red,
     pink: $mat-pink,
     purple: $mat-purple,
@@ -36,17 +65,16 @@ $matPalettes: (
     deep-orange: $mat-deep-orange,
     brown: $mat-brown,
     grey: $mat-grey,
-    blue-grey: $mat-blue-grey,
+    blue-grey: $mat-blue-grey
-    white: $mat-white,
-    black: $mat-black,
-    fuse-dark: $mat-fusedark
 );
 
 // Material color hues list
 $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
 
-// Text color levels generator mixin
+// -----------------------------------------------------------------------------------------------------
-@mixin generateTextColorLevels($classes, $contrast) {
+// @ Text color levels generator
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-text-color-levels($classes, $contrast) {
 
     // If the contrast is dark...
     @if ($contrast == 'dark') {
@@ -125,7 +153,10 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
     }
 }
 
-@mixin generateMaterialElementColors($classes, $contrast) {
+// -----------------------------------------------------------------------------------------------------
+// @ Material element colors generator
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-material-element-colors($classes, $contrast) {
 
     // If the contrast color is light...
     $fuseForeground: (
@@ -150,53 +181,55 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
 
         // Native Input
         input[type="text"] {
-            color: map_get($fuseForeground, base);
+            color: map-get($fuseForeground, base);
         }
 
         // Input
         .mat-form-field-label {
-            color: map_get($fuseForeground, hint-text);
+            color: map-get($fuseForeground, hint-text);
         }
 
         .mat-form-field-underline {
-            background-color: map_get($fuseForeground, divider);
+            background-color: map-get($fuseForeground, divider);
         }
 
         // Select
         .mat-select-trigger,
         .mat-select-arrow {
-            color: map_get($fuseForeground, hint-text);
+            color: map-get($fuseForeground, hint-text);
         }
 
         .mat-select-underline {
-            background-color: map_get($fuseForeground, divider);
+            background-color: map-get($fuseForeground, divider);
         }
 
         .mat-select-disabled .mat-select-value,
         .mat-select-arrow,
         .mat-select-trigger {
-            color: map_get($fuseForeground, hint-text);
+            color: map-get($fuseForeground, hint-text);
         }
 
         .mat-select-content,
         .mat-select-panel-done-animating {
-            background: map_get($background, card);
+            //background: map-get($background, card);
         }
 
         .mat-select-value {
-            color: map_get($fuseForeground, text);
+            color: map-get($fuseForeground, text);
         }
     }
 }
 
-// Color classes generator mixin
+// -----------------------------------------------------------------------------------------------------
-@mixin generateColorClasses($colorName, $color, $contrastColor, $hue) {
+// @ Color classes generator
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-color-classes($colorName, $color, $contrastColor, $hue) {
 
     .#{$colorName}#{$hue}-bg {
         background-color: $color !important;
     }
 
-    .mat-#{$colorName}#{$hue}-bg {
+    .#{$colorName}#{$hue} {
         background-color: $color !important;
         color: $contrastColor !important;
 
@@ -231,13 +264,10 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
     }
 }
 
-@mixin generateFuseColorClasses($primary, $accent, $warn) {
+// -----------------------------------------------------------------------------------------------------
-
+// @ Fuse color classes
-    $palettes: (
+// -----------------------------------------------------------------------------------------------------
-        primary: $primary,
+@mixin fuse-color-classes($palettes) {
-        accent: $accent,
-        warn: $warn
-    );
 
     // Define contrast lists
     $light-contrasting-classes: ();
@@ -258,32 +288,32 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
             @if ($color != null and $contrast != null) {
 
                 // Generate color classes
-                @include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
+                @include generate-color-classes($paletteName, $color, $contrast, '-#{$hue}');
 
                 // If the contrast color is dark
                 @if (rgba(black, 1) == rgba($contrast, 1)) {
-                    $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+                    $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}-#{$hue}'), 'comma');
                 }
                     // if the contrast color is light
                 @else {
-                    $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+                    $light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}-#{$hue}'), 'comma');
                 }
 
                 // Run the generator one more time for default values (500)
                 @if ($hue == 500) {
 
                     // Generate color classes
-                    @include generateColorClasses($paletteName, $color, $contrast, '');
+                    @include generate-color-classes($paletteName, $color, $contrast, '');
 
                     // Add color to the correct list depending on the contrasting color
 
                     // If the contrast color is dark
                     @if (rgba(black, 1) == rgba($contrast, 1)) {
-                        $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
+                        $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
                     }
                         // if the contrast color is light
                     @else {
-                        $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
+                        $light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
                     }
                 }
             }
@@ -291,68 +321,13 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
     }
 
     // Generate contrasting colors
-    @include generateTextColorLevels($dark-contrasting-classes, 'dark');
+    @include generate-text-color-levels($dark-contrasting-classes, 'dark');
-    @include generateTextColorLevels($light-contrasting-classes, 'light');
+    @include generate-text-color-levels($light-contrasting-classes, 'light');
-    @include generateMaterialElementColors($dark-contrasting-classes, 'dark');
+    @include generate-material-element-colors($dark-contrasting-classes, 'dark');
-    @include generateMaterialElementColors($light-contrasting-classes, 'light');
+    @include generate-material-element-colors($light-contrasting-classes, 'light');
 }
 
-// Generate the color classes...
+// -----------------------------------------------------------------------------------------------------
-
+// @ Generate Fuse color classes for default Material palettes
-// Define contrast lists
+// -----------------------------------------------------------------------------------------------------
-$light-contrasting-classes: ();
+@include fuse-color-classes($matPalettes);
-$dark-contrasting-classes: ();
-
-@each $paletteName, $palette in $matPalettes {
-
-    // Get the contrasts map
-    $contrasts: map-get($palette, 'contrast');
-
-    @each $hue in $matHues {
-
-        // Get the color and the contrasting color
-        $color: map-get($palette, $hue);
-        $contrast: map-get($contrasts, $hue);
-
-        @if ($color != null and $contrast != null) {
-
-            // Generate color classes
-            @include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
-
-            // Add color to the correct list depending on the contrasting color
-
-            // If the contrast color is dark
-            @if (rgba(black, 1) == rgba($contrast, 1)) {
-                $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
-            }
-                // if the contrast color is light
-            @else {
-                $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
-            }
-
-            // Run the generator one more time for default values (500)
-            @if ($hue == 500) {
-
-                // Generate color classes
-                @include generateColorClasses($paletteName, $color, $contrast, '');
-
-                // Add color to the correct list depending on the contrasting color
-
-                // If the contrast color is dark
-                @if (rgba(black, 1) == rgba($contrast, 1)) {
-                    $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
-                }
-                    // if the contrast color is light
-                @else {
-                    $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
-                }
-            }
-        }
-    }
-}
-
-// Generate contrasting colors
-@include generateTextColorLevels($dark-contrasting-classes, 'dark');
-@include generateTextColorLevels($light-contrasting-classes, 'light');
-@include generateMaterialElementColors($dark-contrasting-classes, 'dark');
-@include generateMaterialElementColors($light-contrasting-classes, 'light');

src/@fuse/scss/partials/_global.scss

@@ -9,7 +9,6 @@ body {
     margin: 0;
     padding: 0;
     overflow: hidden;
-    background: #F5F5F5;
 }
 
 body {

src/@fuse/scss/partials/_helpers.scss

@@ -199,7 +199,7 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
 }
 
 .border-horizontal,
-.b-x {
+.bx {
     border-left: $border-style;
     border-right: $border-style;
 }

src/@fuse/scss/partials/_material.scss

@@ -1,6 +1,169 @@
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
-/*  Avatars
+// @ Theming
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
+@mixin material-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Avatar
+    // -----------------------------------------------------------------------------------------------------
+    .avatar {
+        color: map-get($foreground, text);
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Forms
+    // -----------------------------------------------------------------------------------------------------
+    .form-wrapper {
+        background-color: map-get($background, card);
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Navigation - Simple
+    // -----------------------------------------------------------------------------------------------------
+    .navigation-simple {
+
+        .item {
+
+            &.selected {
+                background-color: map-get($background, hover);
+            }
+        }
+
+        .subheader {
+            border-top: 1px solid map-get($foreground, divider);
+        }
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Pagination - Simple
+    // -----------------------------------------------------------------------------------------------------
+    .simple-pagination {
+        background: map-get($background, card);
+
+        .pagination-item {
+            color: map-get($foreground, secondary-text);
+
+            &:hover {
+                color: map-get($foreground, text);
+            }
+
+            &.disabled {
+                color: map-get($foreground, disabled-text);
+            }
+        }
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Price tables
+    // -----------------------------------------------------------------------------------------------------
+    .price-tables {
+
+        .price-table {
+            background: map-get($background, card);
+
+            &.style-1 {
+
+                .price {
+
+                    .currency {
+                        color: map-get($foreground, secondary-text);
+                    }
+
+                    .period {
+                        color: map-get($foreground, secondary-text);
+                    }
+                }
+            }
+
+            &.style-2 {
+
+                .price {
+
+                    .currency {
+                        color: map-get($foreground, secondary-text);
+                    }
+
+                }
+
+                .period {
+                    color: map-get($foreground, secondary-text);
+                }
+            }
+
+            &.style-3 {
+
+                .package-type {
+
+                    .subtitle {
+                        color: map-get($foreground, secondary-text);
+                    }
+                }
+
+                .terms {
+                    color: map-get($foreground, secondary-text);
+                }
+
+                .note {
+                    color: map-get($foreground, secondary-text);
+                }
+            }
+        }
+    }
+
+    // -------------------------------------------------------------------------------------------------
+    // @ Table - Simple
+    // -------------------------------------------------------------------------------------------------
+    .simple-table-container {
+        background: map-get($background, card);
+    }
+
+    table {
+
+        &.simple {
+
+            thead {
+
+                tr {
+
+                    th {
+                        color: map-get($foreground, secondary-text);
+                        border-bottom: 1px solid map-get($foreground, divider);
+                    }
+                }
+            }
+
+            tbody {
+
+                tr {
+
+                    td {
+                        border-bottom: 1px solid map-get($foreground, divider);
+                    }
+                }
+            }
+
+            &.clickable {
+
+                tbody {
+
+                    tr {
+
+                        &:hover {
+                            background-color: map-get($background, hover);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Avatar
+// -----------------------------------------------------------------------------------------------------
 .avatar {
     width: 40px;
     min-width: 40px;
@@ -11,7 +174,6 @@
     font-size: 17px;
     font-weight: 500;
     text-align: center;
-    color: #FFFFFF;
 
     &.square {
         border-radius: 0;
@@ -58,6 +220,7 @@ mat-icon.status {
 
     &.online {
         color: #4CAF50;
+
         &:before {
             content: "check_circle";
         }
@@ -65,6 +228,7 @@ mat-icon.status {
 
     &.do-not-disturb {
         color: #F44336;
+
         &:before {
             content: "do_not_disturb_on";
         }
@@ -73,6 +237,7 @@ mat-icon.status {
     &.away {
         background-color: #FFC107;
         color: #FFFFFF;
+
         &:before {
             content: "access_time";
         }
@@ -81,17 +246,17 @@ mat-icon.status {
     &.offline {
         color: #646464;
         background-color: #FFFFFF;
+
         &:before {
             content: "not_interested";
         }
     }
 }
 
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
-/*  Forms
+// @ Forms
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
 .form-wrapper {
-    background: #FFFFFF;
     padding: 16px;
 
     .form-title {
@@ -100,9 +265,9 @@ mat-icon.status {
     }
 }
 
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
-/*  Navigation - Simple
+// @ Navigation - Simple
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
 .navigation-simple {
 
     .item {
@@ -125,21 +290,12 @@ mat-icon.status {
             font-weight: 500;
             line-height: 1;
         }
-
-        &.selected {
-            background-color: rgba(0, 0, 0, 0.06);
-        }
     }
 
     .subheader {
         font-size: 13px;
-        border-top: 1px solid rgba(0, 0, 0, 0.12);
         font-weight: 500;
         margin-top: 8px;
-
-        &.light {
-            border-top: 1px solid rgba(255, 255, 255, 0.12);
-        }
     }
 
     mat-divider {
@@ -147,15 +303,14 @@ mat-icon.status {
     }
 }
 
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
-/*  Pagination
+// @ Pagination - Simple
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
 .simple-pagination {
     position: relative;
     display: inline-flex;
     flex-direction: row;
     @include mat-elevation(1);
-    background-color: #FFFFFF;
     padding: 0 8px;
 
     .pagination-item {
@@ -168,32 +323,24 @@ mat-icon.status {
         border-radius: 0;
         margin: 0;
         font-weight: normal;
-        color: rgba(0, 0, 0, 0.54);
-
-        &:hover {
-            color: rgba(0, 0, 0, 0.87);
-        }
 
         &.active {
             cursor: default;
-            color: rgba(0, 0, 0, 0.87);
         }
 
         &.disabled {
             cursor: default;
-            color: rgba(0, 0, 0, 0.26);
         }
     }
 }
 
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
-/*  Price Tables
+// @ Price tables
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
 .price-tables {
 
     .price-table {
         position: relative;
-        background-color: #FFFFFF;
         width: 280px;
         border-radius: 2px;
         margin: 12px;
@@ -218,7 +365,6 @@ mat-icon.status {
                     padding-right: 4px;
                     font-size: 24px;
                     font-weight: 500;
-                    color: rgba(0, 0, 0, 0.54);
                 }
 
                 .value {
@@ -230,7 +376,6 @@ mat-icon.status {
                 .period {
                     padding: 0 0 5px 4px;
                     font-size: 17px;
-                    color: rgba(0, 0, 0, 0.54);
                 }
             }
 
@@ -279,7 +424,6 @@ mat-icon.status {
                     padding-right: 4px;
                     font-size: 24px;
                     font-weight: 500;
-                    color: rgba(0, 0, 0, 0.54);
                 }
 
                 .value {
@@ -293,7 +437,6 @@ mat-icon.status {
                 padding: 0 32px;
                 font-size: 15px;
                 font-weight: 500;
-                color: rgba(0, 0, 0, 0.54);
                 text-align: center;
             }
 
@@ -328,7 +471,6 @@ mat-icon.status {
 
                 .subtitle {
                     font-size: 17px;
-                    color: rgba(0, 0, 0, 0.54);
                     font-weight: 500;
                 }
             }
@@ -357,7 +499,6 @@ mat-icon.status {
             .terms {
                 margin: 32px;
                 font-size: 15px;
-                color: rgba(0, 0, 0, 0.54);
 
                 .term {
                     padding-bottom: 16px;
@@ -375,17 +516,15 @@ mat-icon.status {
             .note {
                 padding: 8px 32px 16px 32px;
                 text-align: center;
-                color: rgba(0, 0, 0, 0.54);
             }
         }
     }
 }
 
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
-/*  Table - Simple
+// @ Table - Simple
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
 .simple-table-container {
-    background: #FFFFFF;
 
     .table-title {
         font-size: 20px;
@@ -408,8 +547,6 @@ table {
                 th {
                     padding: 16px 8px;
                     font-weight: 500;
-                    color: rgba(0, 0, 0, 0.54);
-                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                     white-space: nowrap;
 
                     &:first-child {
@@ -429,7 +566,6 @@ table {
 
                 td {
                     padding: 16px 8px;
-                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
                     &:first-child {
                         padding-left: 24px;
@@ -455,12 +591,8 @@ table {
 
                 tr {
                     cursor: pointer;
-
-                    &:hover {
-                        background: rgba(0, 0, 0, 0.03);
-                    }
                 }
             }
         }
     }
-}
+}

src/@fuse/scss/partials/_navigation.scss

@@ -64,11 +64,11 @@
             }
 
             &:hover {
-                background-color: map-get($background, hover);
+                background-color: rgba(0, 0, 0, 0.04);
             }
 
             .mat-ripple-element {
-                background-color: map-get($background, hover);
+                background-color: rgba(0, 0, 0, 0.04);
             }
 
             &.active {

src/@fuse/scss/partials/_page-layouts.scss

@@ -1,4 +1,83 @@
-// Page Layouts
+// -----------------------------------------------------------------------------------------------------
+// @ Theming
+// -----------------------------------------------------------------------------------------------------
+@mixin page-layouts-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .page-layout {
+
+        // Carded layout
+        &.carded {
+
+            // Fullwidth
+            &.fullwidth {
+
+                > .center {
+
+                    > .content-card {
+                        background: map-get($background, card);
+
+                        > .toolbar {
+                            border-bottom-color: map-get($foreground, divider);
+                        }
+                    }
+                }
+            }
+
+            // Left / Right sidebar
+            &.left-sidebar,
+            &.right-sidebar {
+
+                > .center {
+
+                    > .content-card {
+                        background: map-get($background, card);
+
+                        > .toolbar {
+                            border-bottom-color: map-get($foreground, divider);
+                        }
+                    }
+                }
+            }
+        }
+
+        // Simple layout
+        &.simple {
+
+            // Left / Right sidebar
+            &.left-sidebar,
+            &.right-sidebar {
+
+                > .center {
+
+                    > .content {
+                        background: map-get($background, card);
+                    }
+                }
+
+                // Inner sidebar
+                &.inner-sidebar {
+
+                    > .content {
+
+                        > .center {
+
+                            > .content {
+                                background: map-get($background, card);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Page Layouts
+// -----------------------------------------------------------------------------------------------------
 $carded-header-height: 200px !default;
 $carded-header-height-sm: 160px !default;
 $carded-toolbar-height: 64px !default;
@@ -75,7 +154,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         display: flex;
                         justify-content: flex-start;
                         align-items: center;
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+                        border-bottom: 1px solid;
                         height: $carded-toolbar-height;
                         min-height: $carded-toolbar-height;
                         max-height: $carded-toolbar-height;
@@ -273,7 +352,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         justify-content: flex-start;
                         align-items: center;
                         flex: 1 1 auto;
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+                        border-bottom: 1px solid;
                         height: $carded-toolbar-height;
                         min-height: $carded-toolbar-height;
                         max-height: $carded-toolbar-height;
@@ -516,7 +595,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                 }
             }
 
-            // Inner Sidebar
+            // Inner sidebar
             &.inner-sidebar {
                 flex-direction: column;
                 overflow: hidden;

src/@fuse/scss/partials/_typography.scss

@@ -1,3 +1,44 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Theming
+// -----------------------------------------------------------------------------------------------------
+@mixin typography-theme($theme) {
+
+    $background: map-get($theme, background);
+    $accent: map-get($theme, accent);
+    $is-dark: map-get($theme, is-dark);
+
+    a {
+        color: map-get($accent, default);
+    }
+
+    code {
+
+        &:not(.highlight) {
+            background-color: map-get($background, app-bar);
+        }
+    }
+
+    .changelog {
+
+        .entry {
+            background-color: map-get($background, card);
+        }
+    }
+
+    .text-boxed {
+        @if ($is-dark) {
+            background-color: rgba(255, 255, 255, 0.12);
+            color: rgba(255, 255, 255, 0.54);
+        } @else {
+            background-color: rgba(0, 0, 0, 0.12);
+            color: rgba(0, 0, 0, 0.54);
+        }
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Typography
+// -----------------------------------------------------------------------------------------------------
 html {
     font-size: 62.5%;
     font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
@@ -46,7 +87,6 @@ h6, .h6 {
 
 // Links
 a {
-    color: mat-color($accent);
     text-decoration: none;
 
     &:not(.mat-button):not(.mat-raised-button):not(.mat-icon-button) {
@@ -103,11 +143,10 @@ code {
     font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;;
 
     &:not(.highlight) {
-        background: rgba(0, 0, 0, 0.065);
         color: #106CC8;
-        margin: 0 1px;
         padding: 2px 3px;
         border-radius: 2px;
+        line-height: 1.7;
     }
 }
 
@@ -237,6 +276,7 @@ strong {
     line-height: 1.25;
 }
 
+.line-height-1\.5,
 .line-height-1\.50 {
     line-height: 1.5;
 }
@@ -245,6 +285,19 @@ strong {
     line-height: 1.75;
 }
 
+// Letter spacing helpers
+.letter-spacing-condensed {
+    letter-spacing: -0.02em;
+}
+
+.letter-spacing-normal {
+    letter-spacing: normal;
+}
+
+.letter-spacing-relaxed {
+    letter-spacing: 0.02em;
+}
+
 // Boxed text
 .text-boxed {
     border-radius: 2px;
@@ -252,17 +305,9 @@ strong {
     margin: 0 8px;
     font-size: 11px;
     font-weight: 500;
-    color: rgba(0, 0, 0, 0.54);
-    background-color: rgba(0, 0, 0, 0.12);
     white-space: nowrap;
 }
 
-// Boxed text light
-.text-boxed-light {
-    @extend .text-boxed;
-    background-color: rgba(255, 255, 255, 0.7);
-}
-
 // Truncate
 .text-truncate {
     display: block;
@@ -280,7 +325,6 @@ strong {
 .changelog {
 
     .entry {
-        background: white;
         margin-bottom: 24px;
         padding: 24px 32px;
         @include mat-elevation(2);

src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss

@@ -1,361 +0,0 @@
-/*@font-face {
-  font-family: 'fontello';
-  src: url('../font/fontello.eot?81091010');
-  src: url('../font/fontello.eot?81091010#iefix') format('embedded-opentype'),
-  url('../font/fontello.woff2?81091010') format('woff2'),
-  url('../font/fontello.woff?81091010') format('woff'),
-  url('../font/fontello.ttf?81091010') format('truetype'),
-  url('../font/fontello.svg?81091010#fontello') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}*/
-
-owl-date-time {
-
-    [class^="icon-"]:before, [class*=" icon-"]:before {
-        font-family: "Material Icons";
-        font-style: normal;
-        font-weight: normal;
-        speak: none;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        /* For safety - reset parent styles, that can break glyph codes*/
-        font-variant: normal;
-        text-transform: none;
-
-        /* Font smoothing. That was taken from TWBS */
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-    }
-
-    .icon-cancel:before {
-        content: 'close';
-    }
-
-    .icon-up-open:before {
-        content: 'keyboard_arrow_up';
-    }
-
-    .icon-down-open:before {
-        content: 'keyboard_arrow_down';
-    }
-
-    .icon-left-open:before {
-        content: 'chevron_left';
-    }
-
-    .icon-right-open:before {
-        content: 'chevron_right';
-    }
-
-    $white: #FFFFFF;
-    $black: #000000;
-    $grey: #DDDDDD;
-    $blue: #0070BA;
-
-    .owl-widget,
-    .owl-widget * {
-        box-sizing: border-box;
-    }
-
-    .owl-widget {
-        font-size: 1em;
-    }
-
-    .owl-state-focus {
-
-    }
-
-    .owl-corner-all {
-        border-radius: 2px;
-    }
-
-    .owl-corner-top {
-        border-top-left-radius: 2px;
-        border-top-right-radius: 2px;
-    }
-
-    .owl-state-default {
-        background: #FFFFFF;
-        color: rgba(0, 0, 0, 0.87);
-    }
-
-    .owl-dateTime-inputWrapper {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        align-items: center;
-
-        .owl-dateTime-input {
-            background: none !important;
-            padding: 0 !important;
-            cursor: pointer;
-
-            .owl-inputtext {
-                margin: 0;
-                padding: 8px;
-                background: none !important;
-                color: rgba(0, 0, 0, 0.87);
-            }
-        }
-
-        .owl-dateTime-cancel {
-            position: relative !important;
-            right: 0 !important;
-            top: 0 !important;
-            transform: none !important;
-            font-size: 16px !important;
-            width: 16px !important;
-            height: 16px !important;
-            min-width: 16px !important;
-            min-height: 16px !important;
-            line-height: 16px !important;
-            color: rgba(0, 0, 0, 0.54) !important;
-        }
-    }
-
-    .owl-dateTime {
-        position: relative;
-        width: 140px;
-
-        &.owl-dateTime-inline {
-            width: auto;
-
-            .owl-dateTime-dialog {
-                position: relative;
-                z-index: auto;
-            }
-        }
-    }
-
-    .owl-dateTime-dialog {
-        width: 256px;
-        user-select: none;
-        z-index: 99999;
-        top: 24px !important;
-        right: 0 !important;
-        left: auto !important;
-        @include mat-elevation(4);
-    }
-
-    .owl-dateTime-dialogHeader {
-        height: 2.5em;
-        padding: .25em;
-        background-color: rgba(0, 0, 0, .1);
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-    }
-
-    .owl-calendar-wrapper {
-        padding: 16px !important;
-    }
-
-    .owl-calendar-control {
-
-        .owl-calendar-controlNav {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            .nav-prev,
-            .nav-next {
-                display: flex;
-
-                &:before {
-                    font-family: "Material Icons";
-                    position: relative !important;
-                    right: 0 !important;
-                    top: 0 !important;
-                    transform: none !important;
-                    font-size: 20px !important;
-                    width: 20px !important;
-                    height: 20px !important;
-                    min-width: 20px !important;
-                    min-height: 20px !important;
-                    line-height: 20px !important;
-                    content: "chevron_left";
-                    color: rgba(0, 0, 0, 0.54);
-                }
-            }
-
-            .nav-next:before {
-                content: "chevron_right";
-            }
-        }
-
-        .owl-calendar-controlContent {
-
-            .month-control,
-            .year-control {
-                font-size: 14px;
-                font-weight: 500;
-                cursor: pointer;
-            }
-
-            .month-control {
-                margin-right: 8px;
-            }
-
-            .year-control {
-            }
-        }
-    }
-
-    .owl-calendar {
-
-        table {
-            border-spacing: 0 !important;
-        }
-
-        tbody td {
-
-            &.owl-calendar-selected {
-                background-color: $blue;
-                color: $white;
-            }
-
-            &.owl-calendar-invalid {
-                color: #ACACAC;
-            }
-
-            &.owl-calendar-outFocus {
-                color: $grey;
-            }
-
-            &.owl-calendar-hidden {
-                visibility: hidden;
-            }
-
-            &:not(.owl-calendar-selected):not(.owl-calendar-invalid):hover {
-                background-color: lighten($blue, 50%);
-                color: $black;
-            }
-        }
-    }
-
-    .owl-years,
-    .owl-months {
-
-        td.owl-year,
-        td.owl-month {
-            padding: 0;
-            font-size: 16px;
-            width: 72px;
-            height: 48px;
-            line-height: 48px;
-            cursor: pointer;
-        }
-    }
-
-    .owl-calendar-yearArrow {
-        width: 24px !important;
-        height: 24px !important;
-
-        &.left {
-            left: -16px !important;
-        }
-
-        &.right {
-            right: -16px !important;
-        }
-    }
-
-    .owl-weekdays {
-
-        th.owl-weekday {
-            height: 32px;
-            line-height: 32px;
-            text-align: center;
-            font-size: 12px;
-            padding: 0;
-            color: rgba(0, 0, 0, 0.37);
-        }
-    }
-
-    .owl-days {
-
-        td.owl-day {
-            height: 32px;
-            width: 32px;
-            line-height: 32px;
-            cursor: pointer;
-            border-radius: 100%;
-            padding: 0;
-
-            &.owl-day-today:before {
-                content: '';
-                display: block;
-                position: absolute;
-                right: 2px;
-                top: 2px;
-                border-top: .5em solid lighten($blue, 20%);
-                border-left: .5em solid transparent;
-            }
-        }
-    }
-
-    .owl-timer-wrapper {
-        height: 88px;
-        padding: 8px !important;
-        background-color: rgba(0, 0, 0, 0.06);
-
-        .owl-timer-input {
-            background: none;
-            width: 100% !important;
-            text-align: center;
-        }
-
-        .owl-timer-text {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            height: 40%;
-            font-size: 20px;
-        }
-
-        .owl-meridian-btn {
-            font-size: .8em;
-            color: $blue;
-            background-image: none;
-            background-color: transparent;
-            border-color: $blue;
-
-            &:hover {
-                color: $white;
-                background-color: $blue;
-                border-color: $blue;
-            }
-        }
-    }
-
-    .owl-timer-divider {
-        display: inline-block;
-        position: absolute;
-        width: 8px;
-        height: 100%;
-        left: -2px;
-
-        .owl-timer-dot {
-            display: block;
-            background: rgba(0, 0, 0, 0.37);
-            width: 3px;
-            height: 3px;
-            position: absolute;
-            left: 50%;
-            border-radius: 100%;
-            transform: translateX(-50%);
-
-            &.dot-top {
-                top: 40%;
-            }
-
-            &.dot-bottom {
-                bottom: 40%;
-            }
-        }
-    }
-}

src/@fuse/scss/partials/plugins/_ngx-datatable.scss

@@ -1,3 +1,76 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Theming
+// -----------------------------------------------------------------------------------------------------
+@mixin ngx-datatable-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    ngx-datatable {
+
+        &.material {
+            background: map-get($background, card);
+            color: map-get($foreground, text);
+
+            .datatable-header {
+
+                .datatable-header-cell {
+                    color: map-get($foreground, secondary-text);
+                }
+            }
+
+            .datatable-body {
+
+                .datatable-row-wrapper {
+                    border-bottom-color: map-get($foreground, divider);
+
+                    &:first-child {
+                        border-top-color: map-get($foreground, divider);
+                    }
+
+                    .datatable-body-row {
+
+                        .datatable-body-cell {
+                            color: map-get($foreground, text);
+                        }
+                    }
+                }
+            }
+
+            .datatable-footer {
+                color: map-get($foreground, secondary-text);
+
+                .datatable-pager {
+
+                    a {
+                        color: map-get($foreground, secondary-text);
+                    }
+                }
+            }
+
+            &:not(.cell-selection) {
+
+                .datatable-body {
+
+                    .datatable-row-wrapper {
+
+                        .datatable-body-row {
+
+                            &:hover {
+                                background-color: map-get($background, hover);
+
+                                .datatable-row-group {
+                                    background-color: map-get($background, hover);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
 .ngx-datatable {
 
     &.material {
@@ -42,12 +115,11 @@
             }
 
             .datatable-row-wrapper {
-                border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+                border-bottom: 1px solid;
 
                 &:first-child {
-                    border-top: 1px solid rgba(0, 0, 0, 0.12);
+                    border-top: 1px solid;
                 }
-
                 .datatable-body-cell {
                     display: inline-flex;
                     align-items: center;
@@ -118,48 +190,63 @@
 .datatable-icon-filter:before {
     content: "filter_list";
 }
+
 .datatable-icon-collapse:before {
     content: "unfold_less";
 }
+
 .datatable-icon-expand:before {
     content: "unfold_more";
 }
+
 .datatable-icon-close:before {
     content: "close";
 }
+
 .datatable-icon-up:before {
     content: "keyboard_arrow_up";
 }
+
 .datatable-icon-down:before {
     content: "keyboard_arrow_down";
 }
+
 .datatable-icon-sort:before {
     content: "sort";
 }
+
 .datatable-icon-done:before {
     content: "done";
 }
+
 .datatable-icon-done-all:before {
     content: "done_all";
 }
+
 .datatable-icon-search:before {
     content: "search";
 }
+
 .datatable-icon-pin:before {
     content: "lock";
 }
+
 .datatable-icon-add:before {
     content: "add";
 }
+
 .datatable-icon-left:before {
     content: "chevron_left";
 }
+
 .datatable-icon-right:before {
     content: "chevron_right";
 }
+
 .datatable-icon-skip:before {
     content: "skip_next";
 }
+
 .datatable-icon-prev:before {
     content: "skip_previous";
 }

src/@fuse/scss/theme.scss

@@ -0,0 +1,30 @@
+@import "src/@fuse/components/countdown/countdown.theme";
+@import "src/@fuse/components/material-color-picker/material-color-picker.theme";
+@import "src/@fuse/components/search-bar/search-bar.theme";
+@import "src/@fuse/components/shortcuts/shortcuts.theme";
+@import "src/@fuse/components/sidebar/sidebar.theme";
+@import "src/@fuse/components/theme-options/theme-options.theme";
+@import "src/@fuse/components/widget/widget.theme";
+
+@mixin fuse-core-theme($theme) {
+
+    // Theming for Fuse core styles
+    @include colors-theme($theme);
+    @include cards-theme($theme);
+    @include material-theme($theme);
+    @include page-layouts-theme($theme);
+    @include typography-theme($theme);
+
+    // Theming for Fuse components
+    @include fuse-countdown-theme($theme);
+    @include fuse-search-bar-theme($theme);
+    @include fuse-shortcuts-theme($theme);
+    @include fuse-sidebar-theme($theme);
+    @include fuse-theme-options-theme($theme);
+    @include fuse-material-color-picker-theme($theme);
+    @include fuse-widget-theme($theme);
+
+    // Theming for 3rd party components
+    @include ngx-datatable-theme($theme);
+}
+

src/@fuse/scss/theming.scss

@@ -1,66 +0,0 @@
-@import '~@angular/material/theming';
-
-// Custom color maps
-$mat-white: (
-    500: white,
-    contrast: (
-        500: $black-87-opacity
-    )
-);
-
-$mat-black: (
-    500: black,
-    contrast: (
-        500: white,
-    )
-);
-
-$mat-fusedark: (
-    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: $black-87-opacity,
-        100: $black-87-opacity,
-        200: $black-87-opacity,
-        300: white,
-        400: white,
-        500: $white-87-opacity,
-        600: $white-87-opacity,
-        700: $white-87-opacity,
-        800: $white-87-opacity,
-        900: $white-87-opacity,
-        A100: $black-87-opacity,
-        A200: $white-87-opacity,
-        A400: $white-87-opacity,
-        A700: $white-87-opacity,
-    )
-);
-
-// Define the Material palettes
-$primary: mat-palette($mat-fusedark);
-$accent: mat-palette($mat-light-blue, 600, 400, 700);
-$warn: mat-palette($mat-red);
-
-// Create the Material theme object
-$theme: mat-light-theme($primary, $accent, $warn);
-
-// Store the background and foreground colors for easier access
-$background: map-get($theme, background);
-$foreground: map-get($theme, foreground);
-
-// Force the input field font sizes to 16px
-$typography: mat-typography-config(
-    $input: mat-typography-level(16px, 1.125, 400)
-)

src/@fuse/types/fuse-config.ts

@@ -1,21 +1,25 @@
 export interface FuseConfig
 {
+    colorTheme: string;
     layout: {
         style: string,
         width: 'fullwidth' | 'boxed',
         navbar: {
-            background: string,
+            primaryBackground: string,
+            secondaryBackground: string,
             hidden: boolean,
             folded: boolean,
             position: 'left' | 'right' | 'top',
             variant: string
         },
         toolbar: {
+            customBackgroundColor: boolean,
             background: string,
             hidden: boolean,
             position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
         }
         footer: {
+            customBackgroundColor: boolean,
             background: string,
             hidden: boolean,
             position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'

src/app/app.component.html

@@ -27,7 +27,7 @@
 <!-- / HORIZONTAL LAYOUT 1 -->
 
 <!-- THEME OPTIONS PANEL -->
-<button mat-icon-button class="mat-primary-bg mat-elevation-z2 theme-options-button"
+<button mat-icon-button class="warn mat-elevation-z2 theme-options-button"
         [ngClass]="{'right-side-panel': fuseConfig.layout.sidepanel.position === 'right',
                     'side-panel-hidden': fuseConfig.layout.sidepanel.hidden === true}"
         (click)="toggleSidebarOpen('themeOptionsPanel')">
@@ -37,4 +37,4 @@
 <fuse-sidebar name="themeOptionsPanel" class="theme-options-sidebar" position="right" [invisibleOverlay]="true">
     <fuse-theme-options></fuse-theme-options>
 </fuse-sidebar>
-<!-- / THEME OPTIONS PANEL -->
+<!-- / THEME OPTIONS PANEL -->

src/app/app.component.ts

@@ -125,8 +125,10 @@ export class AppComponent implements OnInit, OnDestroy
         this._fuseConfigService.config
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((config) => {
+
                 this.fuseConfig = config;
 
+                // Boxed
                 if ( this.fuseConfig.layout.width === 'boxed' )
                 {
                     this.document.body.classList.add('boxed');
@@ -135,6 +137,16 @@ export class AppComponent implements OnInit, OnDestroy
                 {
                     this.document.body.classList.remove('boxed');
                 }
+
+                // Color theme
+                this.document.body.classList.forEach(className => {
+                    if ( className.startsWith('theme-') )
+                    {
+                        this.document.body.classList.remove(className);
+                    }
+                });
+
+                this.document.body.classList.add(this.fuseConfig.colorTheme);
             });
     }
 

src/app/app.theme.scss

@@ -0,0 +1,264 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Custom color maps for Fuse
+// -----------------------------------------------------------------------------------------------------
+$fuse-white: (
+    500: white,
+    contrast: (
+        500: $dark-primary-text
+    )
+);
+
+$fuse-black: (
+    500: black,
+    contrast: (
+        500: $light-primary-text,
+    )
+);
+
+$fuse-navy: (
+    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: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $light-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text,
+    )
+);
+
+// Generate Fuse color classes for custom palettes
+$custom_palettes: (
+    fuse-white: $fuse-white,
+    fuse-black: $fuse-black,
+    fuse-navy: $fuse-navy
+);
+
+@include fuse-color-classes($custom_palettes);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Typography
+// -----------------------------------------------------------------------------------------------------
+
+// Force the input field font sizes to 16px
+$typography: mat-typography-config(
+    $input: mat-typography-level(16px, 1.125, 400)
+);
+
+// Setup the typography
+@include angular-material-typography($typography);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Component theming
+// -----------------------------------------------------------------------------------------------------
+
+// Import app and page component themes here to enable theming for them
+@import "src/app/layout/components/chat-panel/chat-panel.theme";
+@import "src/app/layout/components/toolbar/toolbar.theme";
+
+@import "src/app/main/apps/academy/academy.theme";
+@import "src/app/main/apps/calendar/calendar.theme";
+@import "src/app/main/apps/chat/chat.theme";
+@import "src/app/main/apps/contacts/contacts.theme";
+@import "src/app/main/apps/dashboards/project/project.theme";
+@import "src/app/main/apps/file-manager/file-manager.theme";
+@import "src/app/main/apps/mail/mail.theme";
+@import "src/app/main/apps/mail-ngrx/mail.theme";
+@import "src/app/main/apps/scrumboard/scrumboard.theme";
+@import "src/app/main/apps/todo/todo.theme";
+
+@import "src/app/main/pages/authentication/login/login.theme";
+@import "src/app/main/pages/authentication/login-2/login-2.theme";
+@import "src/app/main/pages/authentication/register/register.theme";
+@import "src/app/main/pages/authentication/register-2/register-2.theme";
+@import "src/app/main/pages/authentication/reset-password/reset-password.theme";
+@import "src/app/main/pages/authentication/reset-password-2/reset-password-2.theme";
+@import "src/app/main/pages/authentication/forgot-password/forgot-password.theme";
+@import "src/app/main/pages/authentication/forgot-password-2/forgot-password-2.theme";
+@import "src/app/main/pages/authentication/lock/lock.theme";
+@import "src/app/main/pages/authentication/mail-confirm/mail-confirm.theme";
+@import "src/app/main/pages/coming-soon/coming-soon.theme";
+@import "src/app/main/pages/errors/404/error-404.theme";
+@import "src/app/main/pages/errors/500/error-500.theme";
+@import "src/app/main/pages/maintenance/maintenance.theme";
+@import "src/app/main/pages/pricing/style-1/style-1.theme";
+@import "src/app/main/pages/pricing/style-2/style-2.theme";
+@import "src/app/main/pages/pricing/style-3/style-3.theme";
+@import "src/app/main/pages/profile/tabs/about/about.theme";
+@import "src/app/main/pages/profile/tabs/photos-videos/photos-videos.theme";
+@import "src/app/main/pages/profile/tabs/timeline/timeline.theme";
+@import "src/app/main/pages/faq/faq.theme";
+@import "src/app/main/pages/knowledge-base/knowledge-base.theme";
+
+@import "src/app/main/documentation/components/cards/cards.theme";
+
+// Define a mixin for easier access
+@mixin components-theme($theme) {
+
+    // Layout components
+    @include chat-panel-theme($theme);
+    @include toolbar-theme($theme);
+
+    // Apps
+    @include academy-theme($theme);
+    @include calendar-theme($theme);
+    @include chat-theme($theme);
+    @include contacts-theme($theme);
+    @include dashboards-project-theme($theme);
+    @include file-manager-theme($theme);
+    @include mail-theme($theme);
+    @include mail-ngrx-theme($theme);
+    @include scrumboard-theme($theme);
+    @include todo-theme($theme);
+
+    // Pages
+    @include login-theme($theme);
+    @include login-2-theme($theme);
+    @include register-theme($theme);
+    @include register-2-theme($theme);
+    @include reset-password-theme($theme);
+    @include reset-password-2-theme($theme);
+    @include forgot-password-theme($theme);
+    @include forgot-password-2-theme($theme);
+    @include lock-theme($theme);
+    @include mail-confirm-theme($theme);
+    @include coming-soon-theme($theme);
+    @include error-404-theme($theme);
+    @include error-500-theme($theme);
+    @include maintenance-theme($theme);
+    @include pricing-style-1-theme($theme);
+    @include pricing-style-2-theme($theme);
+    @include pricing-style-3-theme($theme);
+    @include profile-about-theme($theme);
+    @include profile-photos-videos-theme($theme);
+    @include profile-timeline-theme($theme);
+    @include faq-theme($theme);
+    @include knowledge-base-theme($theme);
+
+    // Docs
+    @include docs-components-cards-theme($theme);
+
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Define the default theme
+// -----------------------------------------------------------------------------------------------------
+
+// Define the primary, accent and warn palettes
+$default-primary-palette: mat-palette($fuse-navy);
+$default-accent-palette: mat-palette($mat-light-blue, 600, 400, 700);
+$default-warn-palette: mat-palette($mat-red);
+
+// Create the Material theme object
+$theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);
+
+// Add ".theme-default" class to the body to activate this theme
+body.theme-default {
+
+    // Create an Angular Material theme from the $theme map
+    @include angular-material-theme($theme);
+
+    // Apply the theme to the Fuse Core
+    @include fuse-core-theme($theme);
+
+    // Apply the theme to the user components
+    @include components-theme($theme);
+
+    // Generate Fuse color classes for primary, accent and warn colors
+    $custom-palettes: (
+        primary: $default-primary-palette,
+        accent: $default-accent-palette,
+        warn: $default-warn-palette
+    );
+
+    @include fuse-color-classes($custom-palettes);
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Define the default dark theme
+// -----------------------------------------------------------------------------------------------------
+
+// Define the primary, accent and warn palettes
+$default-dark-theme-primary-palette: mat-palette($mat-blue, 600, 400, 700);
+$default-dark-theme-accent-palette: mat-palette($mat-blue-gray);
+$default-dark-theme-warn-palette: mat-palette($mat-red);
+
+// Create the Material theme object
+$default-dark-theme: mat-dark-theme($default-dark-theme-primary-palette, $default-dark-theme-accent-palette, $default-dark-theme-warn-palette);
+
+// Add ".theme-default-dark" class to the body to activate this theme
+body.theme-default-dark {
+
+    // Generate the Angular Material theme
+    @include angular-material-theme($default-dark-theme);
+
+    // Apply the theme to the Fuse Core
+    @include fuse-core-theme($default-dark-theme);
+
+    // Apply the theme to the user components
+    @include components-theme($default-dark-theme);
+
+    // Generate Fuse color classes for primary, accent and warn colors
+    $custom-palettes: (
+        primary: $default-dark-theme-primary-palette,
+        accent: $default-dark-theme-accent-palette,
+        warn: $default-dark-theme-warn-palette
+    );
+
+    @include fuse-color-classes($custom-palettes);
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Define the yellow light theme
+// -----------------------------------------------------------------------------------------------------
+
+// Define the primary, accent and warn palettes
+$yellow-light-theme-primary-palette: mat-palette($fuse-navy, 600, 400, 700);
+$yellow-light-theme-accent-palette: mat-palette($mat-yellow, 600, 400, 700);
+$yellow-light-theme-warn-palette: mat-palette($mat-red);
+
+// Create the Material theme object
+$yellow-light-theme: mat-light-theme($yellow-light-theme-primary-palette, $yellow-light-theme-accent-palette, $yellow-light-theme-warn-palette);
+
+// Add ".theme-yellow-light" class to the body to activate this theme
+body.theme-yellow-light {
+
+    // Generate the Angular Material theme
+    @include angular-material-theme($yellow-light-theme);
+
+    // Apply the theme to the Fuse Core
+    @include fuse-core-theme($yellow-light-theme);
+
+    // Apply the theme to the user components
+    @include components-theme($yellow-light-theme);
+
+    // Generate Fuse color classes for primary, accent and warn colors
+    $custom-palettes: (
+        primary: $yellow-light-theme-primary-palette,
+        accent: $yellow-light-theme-accent-palette,
+        warn: $yellow-light-theme-warn-palette
+    );
+
+    @include fuse-color-classes($custom-palettes);
+}

src/app/fake-db/chat.ts

@@ -6,21 +6,21 @@ export class ChatFakeDb
             'name'  : 'Alice Freeman',
             'avatar': 'assets/images/avatars/alice.jpg',
             'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a680606588342058356d',
             'name'  : 'Arnold',
             'avatar': 'assets/images/avatars/Arnold.jpg',
             'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a68009e20d0a9e9acf2a',
             'name'  : 'Barrera',
             'avatar': 'assets/images/avatars/Barrera.jpg',
             'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
             'unread': null
         },
         {
@@ -28,7 +28,7 @@ export class ChatFakeDb
             'name'  : 'Blair',
             'avatar': 'assets/images/avatars/Blair.jpg',
             'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
             'unread': 3
         },
         {
@@ -36,112 +36,112 @@ export class ChatFakeDb
             'name'  : 'Boyle',
             'avatar': 'assets/images/avatars/Boyle.jpg',
             'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a68031fdbb1db2c1af47',
             'name'  : 'Christy',
             'avatar': 'assets/images/avatars/Christy.jpg',
             'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a680bc670af746c435e2',
             'name'  : 'Copeland',
             'avatar': 'assets/images/avatars/Copeland.jpg',
             'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a680e7eb988a58ddf303',
             'name'  : 'Estes',
             'avatar': 'assets/images/avatars/Estes.jpg',
             'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a680dcb077889f758961',
             'name'  : 'Harper',
             'avatar': 'assets/images/avatars/Harper.jpg',
             'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a6806acf030f9341e925',
             'name'  : 'Helen',
             'avatar': 'assets/images/avatars/Helen.jpg',
             'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a680ae1ae9a3c960d487',
             'name'  : 'Henderson',
             'avatar': 'assets/images/avatars/Henderson.jpg',
             'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a680b8d240c011dd224b',
             'name'  : 'Josefina',
             'avatar': 'assets/images/avatars/Josefina.jpg',
             'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a68034cb3968e1f79eac',
             'name'  : 'Katina',
             'avatar': 'assets/images/avatars/Katina.jpg',
             'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a6801146cce777df2a08',
             'name'  : 'Lily',
             'avatar': 'assets/images/avatars/Lily.jpg',
             'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a6808a178bfd034d6ecf',
             'name'  : 'Mai',
             'avatar': 'assets/images/avatars/Mai.jpg',
             'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a680653c265f5c79b5a9',
             'name'  : 'Nancy',
             'avatar': 'assets/images/avatars/Nancy.jpg',
             'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a680bbcec3cc32a8488a',
             'name'  : 'Nora',
             'avatar': 'assets/images/avatars/Nora.jpg',
             'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a6803d87f1b77e17b62b',
             'name'  : 'Odessa',
             'avatar': 'assets/images/avatars/Odessa.jpg',
             'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a680e87cb319bd9bd673',
             'name'  : 'Reyna',
             'avatar': 'assets/images/avatars/Reyna.jpg',
             'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a6802d10e277a0f35775',
             'name'  : 'Shauna',
             'avatar': 'assets/images/avatars/Shauna.jpg',
             'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
             'unread': null
         },
         {
@@ -149,7 +149,7 @@ export class ChatFakeDb
             'name'  : 'Shepard',
             'avatar': 'assets/images/avatars/Shepard.jpg',
             'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a680cd7efa56a45aea5d',
@@ -163,21 +163,21 @@ export class ChatFakeDb
             'name'  : 'Trevino',
             'avatar': 'assets/images/avatars/Trevino.jpg',
             'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a68018c663044be49cbf',
             'name'  : 'Tyson',
             'avatar': 'assets/images/avatars/Tyson.jpg',
             'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a6809413bf8a0a5272b1',
             'name'  : 'Velazquez',
             'avatar': 'assets/images/avatars/Velazquez.jpg',
             'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         }
     ];
 
@@ -302,6 +302,7 @@ export class ChatFakeDb
                     'contactId'      : '5725a680b3249760ea21de52',
                     'name'           : 'Alice Freeman',
                     'unread'         : 4,
+                    'lastMessage'    : 'You are the worst!',
                     'lastMessageTime': '2017-06-12T02:10:18.931Z'
                 },
                 {
@@ -309,6 +310,7 @@ export class ChatFakeDb
                     'contactId'      : '5725a680b8d240c011dd224b',
                     'name'           : 'Josefina',
                     'unread'         : null,
+                    'lastMessage'    : 'We are losing money! Quick!',
                     'lastMessageTime': '2017-02-18T10:30:18.931Z'
                 },
                 {
@@ -316,6 +318,7 @@ export class ChatFakeDb
                     'contactId'      : '5725a6809413bf8a0a5272b1',
                     'name'           : 'Velazquez',
                     'unread'         : 2,
+                    'lastMessage'    : 'Quickly come to the meeting room 1B, we have a big server issue',
                     'lastMessageTime': '2017-03-18T12:30:18.931Z'
                 }
             ]

src/app/fake-db/dashboard-project.ts

@@ -1654,7 +1654,7 @@ export class ProjectDashboardDb
                     [
                         {
                             'value'  : 'Design',
-                            'classes': 'mat-green-bg',
+                            'classes': 'green',
                             'icon'   : ''
                         },
                         {
@@ -1686,7 +1686,7 @@ export class ProjectDashboardDb
                     [
                         {
                             'value'  : 'Coding',
-                            'classes': 'mat-red-bg',
+                            'classes': 'red',
                             'icon'   : ''
                         },
                         {
@@ -1750,7 +1750,7 @@ export class ProjectDashboardDb
                     [
                         {
                             'value'  : 'Extra',
-                            'classes': 'mat-orange-bg',
+                            'classes': 'orange',
                             'icon'   : ''
                         },
                         {

src/app/fake-db/e-commerce.ts

@@ -1622,13 +1622,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 13,
                     'name' : 'On pre-order (not paid)',
-                    'color': 'mat-purple-300-bg',
+                    'color': 'purple-300',
                     'date' : '2016/04/03 10:06:18'
                 },
                 {
                     'id'   : 1,
                     'name' : 'Awaiting check payment',
-                    'color': 'mat-blue-500-bg',
+                    'color': 'blue-500',
                     'date' : '2015/03/17 18:28:37'
                 }
             ],
@@ -1706,13 +1706,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 2,
                     'name' : 'Payment accepted',
-                    'color': 'mat-green-500-bg',
+                    'color': 'green-500',
                     'date' : '2015/10/04 08:54:33'
                 },
                 {
                     'id'   : 1,
                     'name' : 'Awaiting check payment',
-                    'color': 'mat-blue-500-bg',
+                    'color': 'blue-500',
                     'date' : '2015/05/03 03:43:04'
                 }
             ],
@@ -1790,13 +1790,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 8,
                     'name' : 'Payment error',
-                    'color': 'mat-red-900-bg',
+                    'color': 'red-900',
                     'date' : '2015/07/02 20:44:34'
                 },
                 {
                     'id'   : 3,
                     'name' : 'Preparing the order',
-                    'color': 'mat-orange-500-bg',
+                    'color': 'orange-500',
                     'date' : '2015/03/23 04:59:45'
                 }
             ],
@@ -1874,13 +1874,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 5,
                     'name' : 'Delivered',
-                    'color': 'mat-green-800-bg',
+                    'color': 'green-800',
                     'date' : '2015/10/26 16:12:47'
                 },
                 {
                     'id'   : 4,
                     'name' : 'Shipped',
-                    'color': 'mat-purple-500-bg',
+                    'color': 'purple-500',
                     'date' : '2016/02/06 06:42:37'
                 }
             ],
@@ -1958,13 +1958,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 8,
                     'name' : 'Payment error',
-                    'color': 'mat-red-900-bg',
+                    'color': 'red-900',
                     'date' : '2015/02/01 09:21:46'
                 },
                 {
                     'id'   : 6,
                     'name' : 'Canceled',
-                    'color': 'mat-pink-500-bg',
+                    'color': 'pink-500',
                     'date' : '2015/11/16 04:48:32'
                 }
             ],
@@ -2042,13 +2042,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 3,
                     'name' : 'Preparing the order',
-                    'color': 'mat-orange-500-bg',
+                    'color': 'orange-500',
                     'date' : '2015/11/30 01:04:32'
                 },
                 {
                     'id'   : 2,
                     'name' : 'Payment accepted',
-                    'color': 'mat-green-500-bg',
+                    'color': 'green-500',
                     'date' : '2015/11/12 21:27:18'
                 }
             ],
@@ -2126,13 +2126,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 11,
                     'name' : 'Awaiting PayPal payment',
-                    'color': 'mat-blue-500-bg',
+                    'color': 'blue-500',
                     'date' : '2015/09/03 18:53:02'
                 },
                 {
                     'id'   : 13,
                     'name' : 'On pre-order (not paid)',
-                    'color': 'mat-purple-300-bg',
+                    'color': 'purple-300',
                     'date' : '2015/12/13 18:14:40'
                 }
             ],
@@ -2210,13 +2210,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 4,
                     'name' : 'Shipped',
-                    'color': 'mat-purple-500-bg',
+                    'color': 'purple-500',
                     'date' : '2015/04/29 07:57:43'
                 },
                 {
                     'id'   : 3,
                     'name' : 'Preparing the order',
-                    'color': 'mat-orange-500-bg',
+                    'color': 'orange-500',
                     'date' : '2015/04/23 11:14:38'
                 }
             ],
@@ -2294,13 +2294,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 12,
                     'name' : 'Remote payment accepted',
-                    'color': 'mat-green-500-bg',
+                    'color': 'green-500',
                     'date' : '2015/07/15 15:48:00'
                 },
                 {
                     'id'   : 14,
                     'name' : 'Awaiting Cash-on-delivery payment',
-                    'color': 'mat-blue-500-bg',
+                    'color': 'blue-500',
                     'date' : '2015/11/08 18:30:15'
                 }
             ],
@@ -2378,13 +2378,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 5,
                     'name' : 'Delivered',
-                    'color': 'mat-green-800-bg',
+                    'color': 'green-800',
                     'date' : '2016/05/02 09:53:55'
                 },
                 {
                     'id'   : 2,
                     'name' : 'Payment accepted',
-                    'color': 'mat-green-500-bg',
+                    'color': 'green-500',
                     'date' : '2015/07/11 05:33:31'
                 }
             ],
@@ -2462,13 +2462,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 9,
                     'name' : 'On pre-order (paid)',
-                    'color': 'mat-purple-300-bg',
+                    'color': 'purple-300',
                     'date' : '2016/02/26 14:15:38'
                 },
                 {
                     'id'   : 4,
                     'name' : 'Shipped',
-                    'color': 'mat-purple-500-bg',
+                    'color': 'purple-500',
                     'date' : '2015/10/17 03:32:39'
                 }
             ],
@@ -2546,13 +2546,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 10,
                     'name' : 'Awaiting bank wire payment',
-                    'color': 'mat-blue-500-bg',
+                    'color': 'blue-500',
                     'date' : '2015/09/01 20:50:07'
                 },
                 {
                     'id'   : 12,
                     'name' : 'Remote payment accepted',
-                    'color': 'mat-green-500-bg',
+                    'color': 'green-500',
                     'date' : '2016/02/13 21:19:04'
                 }
             ],
@@ -2630,13 +2630,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 6,
                     'name' : 'Canceled',
-                    'color': 'mat-pink-500-bg',
+                    'color': 'pink-500',
                     'date' : '2015/03/31 03:01:12'
                 },
                 {
                     'id'   : 8,
                     'name' : 'Payment error',
-                    'color': 'mat-red-900-bg',
+                    'color': 'red-900',
                     'date' : '2016/03/11 18:53:35'
                 }
             ],
@@ -2714,13 +2714,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 7,
                     'name' : 'Refunded',
-                    'color': 'mat-red-500-bg',
+                    'color': 'red-500',
                     'date' : '2015/12/29 15:34:46'
                 },
                 {
                     'id'   : 11,
                     'name' : 'Awaiting PayPal payment',
-                    'color': 'mat-blue-500-bg',
+                    'color': 'blue-500',
                     'date' : '2015/07/14 19:10:43'
                 }
             ],
@@ -2798,13 +2798,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 1,
                     'name' : 'Awaiting check payment',
-                    'color': 'mat-blue-500-bg',
+                    'color': 'blue-500',
                     'date' : '2015/12/21 10:42:21'
                 },
                 {
                     'id'   : 6,
                     'name' : 'Canceled',
-                    'color': 'mat-pink-500-bg',
+                    'color': 'pink-500',
                     'date' : '2016/02/11 05:58:55'
                 }
             ],
@@ -2882,13 +2882,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 9,
                     'name' : 'On pre-order (paid)',
-                    'color': 'mat-purple-300-bg',
+                    'color': 'purple-300',
                     'date' : '2015/06/20 08:37:46'
                 },
                 {
                     'id'   : 2,
                     'name' : 'Payment accepted',
-                    'color': 'mat-green-500-bg',
+                    'color': 'green-500',
                     'date' : '2015/01/01 01:42:21'
                 }
             ],
@@ -2966,13 +2966,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 5,
                     'name' : 'Delivered',
-                    'color': 'mat-green-800-bg',
+                    'color': 'green-800',
                     'date' : '2015/03/23 00:18:52'
                 },
                 {
                     'id'   : 3,
                     'name' : 'Preparing the order',
-                    'color': 'mat-orange-500-bg',
+                    'color': 'orange-500',
                     'date' : '2015/03/22 04:48:12'
                 }
             ],
@@ -3050,13 +3050,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 6,
                     'name' : 'Canceled',
-                    'color': 'mat-pink-500-bg',
+                    'color': 'pink-500',
                     'date' : '2016/03/24 22:56:35'
                 },
                 {
                     'id'   : 4,
                     'name' : 'Shipped',
-                    'color': 'mat-purple-500-bg',
+                    'color': 'purple-500',
                     'date' : '2016/04/09 13:33:26'
                 }
             ],
@@ -3134,13 +3134,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 7,
                     'name' : 'Refunded',
-                    'color': 'mat-red-500-bg',
+                    'color': 'red-500',
                     'date' : '2015/08/10 17:14:57'
                 },
                 {
                     'id'   : 5,
                     'name' : 'Delivered',
-                    'color': 'mat-green-800-bg',
+                    'color': 'green-800',
                     'date' : '2016/03/30 01:38:14'
                 }
             ],
@@ -3218,13 +3218,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 10,
                     'name' : 'Awaiting bank wire payment',
-                    'color': 'mat-blue-500-bg',
+                    'color': 'blue-500',
                     'date' : '2015/05/19 11:09:56'
                 },
                 {
                     'id'   : 12,
                     'name' : 'Remote payment accepted',
-                    'color': 'mat-green-500-bg',
+                    'color': 'green-500',
                     'date' : '2015/03/27 05:02:33'
                 }
             ],

src/app/fake-db/scrumboard.ts

@@ -274,7 +274,7 @@ export class ScrumboardFakeDb
                         }
                     ],
                     'activities'       : [],
-                    'due'              : '2018-09-07T12:00:00.000Z'
+                    'due'              : '2020-09-07T12:00:00.000Z'
                 },
                 {
                     'id'               : 'f6b9d7a9247e5d794a081927',
@@ -565,22 +565,22 @@ export class ScrumboardFakeDb
                 {
                     'id'   : '26022e4129ad3a5sc28b36cd',
                     'name' : 'High Priority',
-                    'color': 'mat-red-500-bg'
+                    'color': 'red-500'
                 },
                 {
                     'id'   : '56027e4119ad3a5dc28b36cd',
                     'name' : 'Design',
-                    'color': 'mat-orange-400-bg'
+                    'color': 'orange-400'
                 },
                 {
                     'id'   : '5640635e19ad3a5dc21416b2',
                     'name' : 'App',
-                    'color': 'mat-blue-600-bg'
+                    'color': 'blue-600'
                 },
                 {
                     'id'   : '6540635g19ad3s5dc31412b2',
                     'name' : 'Feature',
-                    'color': 'mat-green-400-bg'
+                    'color': 'green-400'
                 }
             ]
         },
@@ -769,17 +769,17 @@ export class ScrumboardFakeDb
                 {
                     'id'   : '56027e4119ad3a5dc28b36cd',
                     'name' : 'Design',
-                    'color': 'mat-red-500-bg'
+                    'color': 'red-500'
                 },
                 {
                     'id'   : '5640635e19ad3a5dc21416b2',
                     'name' : 'App',
-                    'color': 'mat-blue-500-bg'
+                    'color': 'blue-500'
                 },
                 {
                     'id'   : '6540635g19ad3s5dc31412b2',
                     'name' : 'Feature',
-                    'color': 'mat-green-400-bg'
+                    'color': 'green-400'
                 }
             ]
         }

src/app/fuse-config/index.ts

@@ -3,31 +3,36 @@ import { FuseConfig } from '@fuse/types';
 /**
  * Default Fuse Configuration
  *
- * You can edit these options to change the default options. All these options also can be changed per component
+ * You can edit these options to change the default options. All these options also can be
- * basis. See `app/main/pages/authentication/login/login.component.ts` constructor method to learn more
+ * changed per component basis. See `app/main/pages/authentication/login/login.component.ts`
- * about changing these options per component basis.
+ * constructor method to learn more about changing these options per component basis.
  */
 
 export const fuseConfig: FuseConfig = {
+    // Color themes can be defined in src/app/app.theme.scss
+    colorTheme      : 'theme-default',
     layout          : {
         style    : 'vertical-layout-1',
         width    : 'fullwidth',
         navbar   : {
-            background: 'mat-fuse-dark-700-bg',
+            primaryBackground  : 'fuse-navy-700',
-            folded    : false,
+            secondaryBackground: 'fuse-navy-900',
-            hidden    : false,
+            folded             : false,
-            position  : 'left',
+            hidden             : false,
-            variant   : 'vertical-style-1'
+            position           : 'left',
+            variant            : 'vertical-style-1'
         },
         toolbar  : {
-            background: 'mat-white-500-bg',
+            customBackgroundColor: false,
-            hidden    : false,
+            background           : 'fuse-white-500',
-            position  : 'below-static'
+            hidden               : false,
+            position             : 'below-static'
         },
         footer   : {
-            background: 'mat-fuse-dark-900-bg',
+            customBackgroundColor: true,
-            hidden    : false,
+            background           : 'fuse-navy-900',
-            position  : 'below-fixed'
+            hidden               : false,
+            position             : 'below-fixed'
         },
         sidepanel: {
             hidden  : false,

src/app/layout/components/chat-panel/chat-panel.component.html

@@ -1,4 +1,4 @@
-<div class="header mat-elevation-z4 mat-primary-bg" fxLayout="row" fxLayoutAlign="space-between center">
+<div class="header mat-elevation-z4 primary" fxLayout="row" fxLayoutAlign="space-between center">
 
     <ng-container *ngIf="selectedContact === null">
 
@@ -84,7 +84,7 @@
             <ng-container *ngIf="selectedContact && chat && chat.dialog && chat.dialog.length === 0">
 
                 <div class="no-messages-icon">
-                    <mat-icon class="s-128">chat</mat-icon>
+                    <mat-icon class="s-128 fade-text">chat</mat-icon>
                 </div>
 
                 <div class="no-messages secondary-text">
@@ -98,7 +98,7 @@
                 <div class="no-contact-selected">
 
                     <div class="no-contact-icon">
-                        <mat-icon class="s-128">chat</mat-icon>
+                        <mat-icon class="s-128 fade-text">chat</mat-icon>
                     </div>
 
                     <div class="no-contact secondary-text">
@@ -117,9 +117,7 @@
             <form #replyForm="ngForm"
                   (ngSubmit)="reply($event)"
                   (keydown.enter)="reply($event)"
-                  fxFlex
+                  fxFlex fxLayout="row" fxLayoutAlign="start center">
-                  fxLayout="row"
-                  fxLayoutAlign="start center">
 
                 <mat-form-field class="message-text" fxFlex floatLabel="never" appearance="standard">
                     <textarea matInput #replyInput ngModel name="message" placeholder="Type your message"

src/app/layout/components/chat-panel/chat-panel.component.scss

@@ -49,7 +49,6 @@ chat-panel {
         width: 72px;
         min-width: 72px;
         max-width: 72px;
-        background-color: #F9F9F9;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
 
@@ -73,11 +72,6 @@ chat-panel {
 
             &.active {
                 position: relative;
-                background-color: mat-color(mat-palette($mat-indigo, 50));
-
-                .status-icon {
-                    border-color: mat-color(mat-palette($mat-indigo, 50));
-                }
 
                 &:after {
                     position: absolute;
@@ -88,7 +82,6 @@ chat-panel {
                     width: 4px;
                     border-top-left-radius: 4px;
                     border-bottom-left-radius: 4px;
-                    background-color: mat-color(mat-palette($mat-indigo));
                 }
             }
 
@@ -116,6 +109,9 @@ chat-panel {
 
             .unread-count {
                 position: absolute;
+                display: flex;
+                align-items: center;
+                justify-content: center;
                 min-width: 18px;
                 height: 18px;
                 top: 8px;
@@ -124,11 +120,6 @@ chat-panel {
                 padding: 0 5px;
                 font-size: 11px;
                 text-align: center;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                background-color: mat-color(mat-palette($mat-indigo));
-                color: white;
                 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35);
             }
 
@@ -138,7 +129,7 @@ chat-panel {
                 height: 12px;
                 bottom: 10px;
                 left: 44px;
-                border: 2px solid #F9F9F9;
+                border: 2px solid;
                 border-radius: 50%;
 
                 &.online {
@@ -164,7 +155,6 @@ chat-panel {
         position: relative;
         z-index: 7;
         flex: 1 1 100%;
-        background-color: white;
         box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.25);
 
         .messages {
@@ -208,7 +198,6 @@ chat-panel {
                         margin-top: 8px;
                         top: 100%;
                         left: 0;
-                        color: $black-87-opacity;
                         white-space: nowrap;
                     }
                 }
@@ -216,9 +205,6 @@ chat-panel {
                 &.contact {
 
                     .bubble {
-                        background-color: mat-color(mat-palette($mat-indigo));
-                        color: white;
-
                         border-top-left-radius: 5px;
                         border-bottom-left-radius: 5px;
 
@@ -255,8 +241,6 @@ chat-panel {
 
                     .bubble {
                         margin-left: auto;
-                        background-color: #E0E0E0;
-                        color: $black-87-opacity;
 
                         border-top-left-radius: 20px;
                         border-bottom-left-radius: 20px;
@@ -321,10 +305,6 @@ chat-panel {
                 padding: 0 24px;
                 margin-top: -64px;
                 text-align: center;
-
-                mat-icon {
-                    color: rgba(0, 0, 0, 0.06);
-                }
             }
 
             .no-messages {
@@ -345,13 +325,6 @@ chat-panel {
                 padding: 0 24px;
                 text-align: center;
 
-                .no-contact-icon {
-
-                    mat-icon {
-                        color: rgba(0, 0, 0, 0.06);
-                    }
-                }
-
                 .no-contact {
                     margin-top: 24px;
                 }
@@ -362,8 +335,8 @@ chat-panel {
             position: relative;
 
             .message-text {
-                background-color: #E0E0E0;
                 padding: 16px 8px;
+                border-top: 1px solid;
 
                 .mat-form-field-wrapper {
                     padding: 0;
@@ -374,7 +347,6 @@ chat-panel {
                         .mat-form-field-infix {
                             padding: 0;
                             border: none;
-                            background: white;
                             border-radius: 20px;
                             @include mat-elevation(2);
 

src/app/layout/components/chat-panel/chat-panel.component.ts

@@ -120,9 +120,6 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
     {
         setTimeout(() => {
 
-            // Reset the reply form
-            this._replyForm.reset();
-
             // Focus to the reply input
             // this._replyInput.nativeElement.focus();
 
@@ -276,6 +273,9 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
         // Add the message to the chat
         this.chat.dialog.push(message);
 
+        // Reset the reply form
+        this._replyForm.reset();
+
         // Update the server
         this._chatPanelService.updateChat(this.chat.id, this.chat.dialog).then(response => {
 

src/app/layout/components/chat-panel/chat-panel.theme.scss

@@ -0,0 +1,82 @@
+@mixin chat-panel-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $is-dark: map-get($theme, is-dark);
+
+    chat-panel {
+
+        #contacts-list {
+            background-color: map-get($background, app-bar);
+
+            .contacts-list-item {
+
+                &.active {
+                    background: map-get($background, hover);
+
+                    &:after {
+                        background-color: map-get($accent, default);
+                    }
+                }
+
+                .unread-count {
+                    background-color: map-get($accent, default);
+                    color: map-get($accent, default-contrast);
+                }
+
+                .status-icon {
+                    border-color: map-get($background, app-bar);
+                }
+            }
+        }
+
+        #chat {
+
+            .messages {
+
+                .message-row {
+
+                    &.contact {
+
+                        .bubble {
+                            background-color: map-get($primary, default);
+                            color: map-get($primary, default-contrast);
+                        }
+                    }
+
+                    &.me {
+
+                        .bubble {
+                            color: rgba(0, 0, 0, 0.87);
+                            background-color: #E0E0E0;
+                        }
+                    }
+                }
+            }
+
+            .reply-form {
+
+                .message-text {
+                    background-color: map-get($background, app-bar);
+                    border-color: map-get($foreground, divider);
+
+                    .mat-form-field-wrapper {
+
+                        .mat-form-field-flex {
+
+                            .mat-form-field-infix {
+                                @if ($is-dark == true) {
+                                    background-color: map-get($background, hover);
+                                } @else {
+                                    background-color: white;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/app/layout/components/footer/footer.component.html

@@ -3,7 +3,7 @@
     <div fxLayout="row" fxLayoutAlign="center center" fxLayoutAlign.gt-xs="space-between center" fxFlex>
 
         <a href="https://1.envato.market/c/1257954/275988/4415?u=https%3A%2F%2Fthemeforest.net%2Fitem%2Ffuse-angularjs-material-design-admin-template%2F12931855"
-           target="_blank" mat-button class="mat-pink-bg" fxFlex="0 0 auto" fxLayout="row"
+           target="_blank" mat-button class="pink" fxFlex="0 0 auto" fxLayout="row"
            fxLayoutAlign="start center">
             <mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
             <span>Purchase FUSE (Angular 6+)</span>

src/app/layout/components/navbar/horizontal/style-1/style-1.component.html

@@ -1 +1,3 @@
-<fuse-navigation layout="horizontal"></fuse-navigation>
+<div [ngClass]="fuseConfig.layout.navbar.primaryBackground">
+    <fuse-navigation layout="horizontal"></fuse-navigation>
+</div>

src/app/layout/components/navbar/horizontal/style-1/style-1.component.ts

@@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
+import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 
@@ -13,6 +14,7 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 })
 export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
 {
+    fuseConfig: any;
     navigation: any;
 
     // Private
@@ -21,10 +23,12 @@ export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
     /**
      * Constructor
      *
+     * @param {FuseConfigService} _fuseConfigService
      * @param {FuseNavigationService} _fuseNavigationService
      * @param {FuseSidebarService} _fuseSidebarService
      */
     constructor(
+        private _fuseConfigService: FuseConfigService,
         private _fuseNavigationService: FuseNavigationService,
         private _fuseSidebarService: FuseSidebarService
     )
@@ -51,6 +55,13 @@ export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
             .subscribe(() => {
                 this.navigation = this._fuseNavigationService.getCurrentNavigation();
             });
+
+        // Subscribe to the config changes
+        this._fuseConfigService.config
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((config) => {
+                this.fuseConfig = config;
+            });
     }
 
     /**

src/app/layout/components/navbar/vertical/style-1/style-1.component.html

@@ -1,4 +1,4 @@
-<div class="navbar-top mat-indigo-700-bg">
+<div class="navbar-top" [ngClass]="fuseConfig.layout.navbar.secondaryBackground">
 
     <div class="logo">
         <img class="logo-icon" src="assets/images/logos/fuse.svg">
@@ -24,17 +24,17 @@
 
 <div class="navbar-scroll-container" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
 
-    <div class="user mat-indigo-700-bg" fxLayout="column">
+    <div class="user" fxLayout="column" [ngClass]="fuseConfig.layout.navbar.secondaryBackground">
 
         <div class="h3 username">Charlie Adams</div>
         <div class="h5 email hint-text mt-8">adams.charlie@mail.com</div>
-        <div class="avatar-container" [ngClass]="fuseConfig.layout.navbar.background">
+        <div class="avatar-container" [ngClass]="fuseConfig.layout.navbar.primaryBackground">
             <img class="avatar" src="assets/images/avatars/Velazquez.jpg">
         </div>
 
     </div>
 
-    <div class="navbar-content">
+    <div class="navbar-content" [ngClass]="fuseConfig.layout.navbar.primaryBackground">
         <fuse-navigation layout="vertical"></fuse-navigation>
     </div>
 

src/app/layout/components/navbar/vertical/style-1/style-1.component.scss

@@ -36,6 +36,9 @@ fuse-sidebar {
 
                         .user {
                             padding: 12px 0;
+                            height: 64px;
+                            min-height: 64px;
+                            max-height: 64px;
 
                             .avatar-container {
                                 position: relative;
@@ -57,7 +60,7 @@ fuse-sidebar {
                         }
 
                         .navbar-content {
-                            margin-top: 0;
+                            padding-top: 0;
                         }
                     }
                 }
@@ -134,6 +137,9 @@ navbar {
         }
 
         .navbar-scroll-container {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
             overflow-y: auto;
             -webkit-overflow-scrolling: touch;
 
@@ -150,6 +156,9 @@ navbar {
                 align-items: center;
                 justify-content: flex-start;
                 width: 100%;
+                height: 136px;
+                min-height: 136px;
+                max-height: 136px;
                 padding: 24px 0 64px 0;
 
                 .avatar-container {
@@ -170,7 +179,7 @@ navbar {
 
             .navbar-content {
                 flex: 1 1 auto;
-                margin-top: 32px;
+                padding-top: 32px;
             }
         }
     }

src/app/layout/components/navbar/vertical/style-2/style-2.component.html

@@ -1,4 +1,4 @@
-<div class="navbar-header">
+<div class="navbar-header" [ngClass]="fuseConfig.layout.navbar.secondaryBackground">
 
     <div class="logo">
         <img class="logo-icon" src="assets/images/logos/fuse.svg">
@@ -17,7 +17,7 @@
 
 </div>
 
-<div class="navbar-content" fusePerfectScrollbar
+<div class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}"
-     [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
+     [ngClass]="fuseConfig.layout.navbar.primaryBackground">
     <fuse-navigation layout="vertical"></fuse-navigation>
 </div>

src/app/layout/components/navbar/vertical/style-2/style-2.component.scss

@@ -62,7 +62,6 @@ navbar {
             min-height: 64px;
             padding: 0 16px 0 24px;
             transition: padding 200ms ease;
-            background-color: rgba(255, 255, 255, .05);
             @include mat-elevation(1);
 
             .logo {

src/app/layout/components/navbar/vertical/style-2/style-2.component.ts

@@ -3,6 +3,7 @@ import { NavigationEnd, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { filter, take, takeUntil } from 'rxjs/operators';
 
+import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@@ -15,6 +16,7 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 })
 export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
 {
+    fuseConfig: any;
     fusePerfectScrollbarUpdateTimeout: any;
     navigation: any;
 
@@ -25,11 +27,13 @@ export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
     /**
      * Constructor
      *
+     * @param {FuseConfigService} _fuseConfigService
      * @param {FuseNavigationService} _fuseNavigationService
      * @param {FuseSidebarService} _fuseSidebarService
      * @param {Router} _router
      */
     constructor(
+        private _fuseConfigService: FuseConfigService,
         private _fuseNavigationService: FuseNavigationService,
         private _fuseSidebarService: FuseSidebarService,
         private _router: Router
@@ -117,6 +121,13 @@ export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
             .subscribe(() => {
                 this.navigation = this._fuseNavigationService.getCurrentNavigation();
             });
+
+        // Subscribe to the config changes
+        this._fuseConfigService.config
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((config) => {
+                this.fuseConfig = config;
+            });
     }
 
     /**

src/app/layout/components/toolbar/toolbar.component.html

@@ -17,7 +17,7 @@
                 </div>
             </div>
 
-            <div class="px-8 px-mat-16">
+            <div class="px-8 px-md-16">
                 <fuse-shortcuts [navigation]="navigation"></fuse-shortcuts>
             </div>
 
@@ -91,7 +91,7 @@
                     class="chat-panel-toggle-button"
                     (click)="toggleSidebarOpen('chatPanel')"
                     aria-label="Toggle chat panel">
-                <mat-icon class="icon">chat</mat-icon>
+                <mat-icon class="secondary-text">chat</mat-icon>
             </button>
 
             <div class="toolbar-separator" fxHide.gt-md></div>
@@ -100,7 +100,7 @@
                     class="quick-panel-toggle-button"
                     (click)="toggleSidebarOpen('quickPanel')"
                     aria-label="Toggle quick panel">
-                <mat-icon class="icon">format_list_bulleted</mat-icon>
+                <mat-icon class="secondary-text">format_list_bulleted</mat-icon>
             </button>
 
             <div class="toolbar-separator" *ngIf="!hiddenNavbar && rightNavbar" fxHide fxShow.gt-xs></div>

src/app/layout/components/toolbar/toolbar.component.scss

@@ -1,6 +1,6 @@
 @import "src/@fuse/scss/fuse";
 
-:host {
+toolbar {
     position: relative;
     display: flex;
     flex: 0 0 auto;
@@ -46,7 +46,6 @@
     .toolbar-separator {
         height: 64px;
         width: 1px;
-        background: rgba(0, 0, 0, .12);
 
         @include media-breakpoint-down('xs') {
             height: 56px;

src/app/layout/components/toolbar/toolbar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
@@ -10,9 +10,10 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 import { navigation } from 'app/navigation/navigation';
 
 @Component({
-    selector   : 'toolbar',
+    selector     : 'toolbar',
-    templateUrl: './toolbar.component.html',
+    templateUrl  : './toolbar.component.html',
-    styleUrls  : ['./toolbar.component.scss']
+    styleUrls    : ['./toolbar.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 
 export class ToolbarComponent implements OnInit, OnDestroy

src/app/layout/components/toolbar/toolbar.theme.scss

@@ -0,0 +1,8 @@
+@mixin toolbar-theme($theme) {
+
+    $foreground: map-get($theme, foreground);
+
+    .toolbar-separator {
+        background: map-get($foreground, divider);
+    }
+}

src/app/layout/horizontal/layout-1/layout-1.component.html

@@ -96,22 +96,23 @@
 <!-- TOOLBAR -->
 <ng-template #toolbar>
     <toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
-             [ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar>
+             [ngClass]="fuseConfig.layout.toolbar.customBackgroundColor === true ? fuseConfig.layout.toolbar.position + ' ' + fuseConfig.layout.toolbar.background : fuseConfig.layout.toolbar.position">
+    </toolbar>
 </ng-template>
 <!-- / TOOLBAR -->
 
 <!-- FOOTER -->
 <ng-template #footer>
     <footer *ngIf="!fuseConfig.layout.footer.hidden"
-            [ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer>
+            [ngClass]="fuseConfig.layout.footer.customBackgroundColor === true ? fuseConfig.layout.footer.position + ' ' + fuseConfig.layout.footer.background : fuseConfig.layout.footer.position">
+    </footer>
 </ng-template>
 <!-- / FOOTER -->
 
 <!-- TOP NAVBAR -->
 <ng-template #topNavbar>
     <navbar variant="horizontal-style-1"
-            class="top-navbar" [ngClass]="fuseConfig.layout.navbar.background"
+            class="top-navbar" fxHide fxShow.gt-md
-            fxHide fxShow.gt-md
             *ngIf="!fuseConfig.layout.navbar.hidden">
     </navbar>
 </ng-template>
@@ -122,8 +123,7 @@
     <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar [variant]="fuseConfig.layout.navbar.variant"
+        <navbar [variant]="fuseConfig.layout.navbar.variant" class="left-navbar"></navbar>
-                class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / LEFT NAVBAR -->

src/app/layout/vertical/layout-1/layout-1.component.html

@@ -108,14 +108,16 @@
 <!-- TOOLBAR -->
 <ng-template #toolbar>
     <toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
-             [ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar>
+             [ngClass]="fuseConfig.layout.toolbar.customBackgroundColor === true ? fuseConfig.layout.toolbar.position + ' ' + fuseConfig.layout.toolbar.background : fuseConfig.layout.toolbar.position">
+    </toolbar>
 </ng-template>
 <!-- / TOOLBAR -->
 
 <!-- FOOTER -->
 <ng-template #footer>
     <footer *ngIf="!fuseConfig.layout.footer.hidden"
-            [ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer>
+            [ngClass]="fuseConfig.layout.footer.customBackgroundColor === true ? fuseConfig.layout.footer.position + ' ' + fuseConfig.layout.footer.background : fuseConfig.layout.footer.position">
+    </footer>
 </ng-template>
 <!-- / FOOTER -->
 
@@ -125,8 +127,7 @@
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar [variant]="fuseConfig.layout.navbar.variant"
+        <navbar [variant]="fuseConfig.layout.navbar.variant" class="left-navbar"></navbar>
-                class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / LEFT NAVBAR -->
@@ -137,8 +138,7 @@
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar [variant]="fuseConfig.layout.navbar.variant"
+        <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
-                class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / RIGHT NAVBAR -->

src/app/layout/vertical/layout-2/layout-2.component.html

@@ -108,14 +108,16 @@
 <!-- TOOLBAR -->
 <ng-template #toolbar>
     <toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
-             [ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar>
+             [ngClass]="fuseConfig.layout.toolbar.customBackgroundColor === true ? fuseConfig.layout.toolbar.position + ' ' + fuseConfig.layout.toolbar.background : fuseConfig.layout.toolbar.position">
+    </toolbar>
 </ng-template>
 <!-- / TOOLBAR -->
 
 <!-- FOOTER -->
 <ng-template #footer>
     <footer *ngIf="!fuseConfig.layout.footer.hidden"
-            [ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer>
+            [ngClass]="fuseConfig.layout.footer.customBackgroundColor === true ? fuseConfig.layout.footer.position + ' ' + fuseConfig.layout.footer.background : fuseConfig.layout.footer.position">
+    </footer>
 </ng-template>
 <!-- / FOOTER -->
 
@@ -125,8 +127,7 @@
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar [variant]="fuseConfig.layout.navbar.variant"
+        <navbar [variant]="fuseConfig.layout.navbar.variant" class="left-navbar"></navbar>
-                class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / LEFT NAVBAR -->
@@ -137,8 +138,7 @@
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar [variant]="fuseConfig.layout.navbar.variant"
+        <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
-                class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / RIGHT NAVBAR -->

src/app/layout/vertical/layout-3/layout-3.component.html

@@ -94,14 +94,16 @@
 <!-- TOOLBAR -->
 <ng-template #toolbar>
     <toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
-             [ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar>
+             [ngClass]="fuseConfig.layout.toolbar.customBackgroundColor === true ? fuseConfig.layout.toolbar.position + ' ' + fuseConfig.layout.toolbar.background : fuseConfig.layout.toolbar.position">
+    </toolbar>
 </ng-template>
 <!-- / TOOLBAR -->
 
 <!-- FOOTER -->
 <ng-template #footer>
     <footer *ngIf="!fuseConfig.layout.footer.hidden"
-            [ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer>
+            [ngClass]="fuseConfig.layout.footer.customBackgroundColor === true ? fuseConfig.layout.footer.position + ' ' + fuseConfig.layout.footer.background : fuseConfig.layout.footer.position">
+    </footer>
 </ng-template>
 <!-- / FOOTER -->
 
@@ -111,8 +113,7 @@
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar [variant]="fuseConfig.layout.navbar.variant"
+        <navbar [variant]="fuseConfig.layout.navbar.variant" class="left-navbar"></navbar>
-                class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / LEFT NAVBAR -->
@@ -123,8 +124,7 @@
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar [variant]="fuseConfig.layout.navbar.variant"
+        <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
-                class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / RIGHT NAVBAR -->

src/app/main/angular-material-elements/angular-material-elements.component.html

@@ -1,7 +1,7 @@
 <div class="page-layout simple fullwidth angular-material-elements">
 
     <!-- HEADER -->
-    <div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
+    <div class="header accent p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
          fxLayoutAlign.gt-xs="space-between center">
 
         <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
@@ -15,7 +15,7 @@
             <div class="h2 mt-16">{{title}}</div>
         </div>
 
-        <a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0" href="https://material.angular.io/"
+        <a mat-raised-button class="reference-button mt-16 mt-sm-0" href="https://material.angular.io/"
            target="_blank">
             <mat-icon class="mr-8">link</mat-icon>
             <span>Reference</span>

src/app/main/angular-material-elements/example-viewer/example-viewer.html

@@ -1,4 +1,4 @@
-<div class="example-viewer-wrapper mat-white-bg mat-elevation-z2">
+<div class="example-viewer-wrapper mat-card mat-elevation-z2">
 
     <div class="example-viewer-header">
 

src/app/main/angular-material-elements/example-viewer/example-viewer.scss

@@ -5,7 +5,7 @@ example-viewer {
     padding: 24px 0;
 
     .example-viewer-wrapper {
-        border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
+        //border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
         box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12);
         margin: 4px;
         h3 {
@@ -19,8 +19,8 @@ example-viewer {
         display: flex;
         justify-content: center;
         padding: 8px 20px;
-        color: mat-color($foreground, secondary-text);
+        //color: mat-color($foreground, secondary-text);
-        background: rgba(mat-color($foreground, secondary-text), .03);
+        //background: rgba(mat-color($foreground, secondary-text), .03);
         flex: 1 1 auto;
 
         .example-viewer-title {
@@ -58,7 +58,7 @@ example-viewer {
                     padding: 0;
                     margin: 0;
                     min-height: 150px;
-                    border-bottom: 1px solid mat-color($foreground, divider);
+                    //border-bottom: 1px solid mat-color($foreground, divider);
 
                     > pre {
                         width: 100%;

src/app/main/apps/academy/academy.theme.scss

@@ -0,0 +1,156 @@
+@mixin academy-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $accent: map-get($theme, accent);
+    $is-dark: map-get($theme, is-dark);
+
+    #academy-courses {
+
+        .header {
+            background: #1A237E;
+            background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);
+
+            .hero-text {
+
+                h1 {
+                    color: white;
+                }
+
+                h3 {
+                    color: rgba(255, 255, 255, 0.75);
+                }
+            }
+        }
+
+        .content {
+
+            .courses {
+
+                .course {
+
+                    .course-content {
+                        background: map-get($background, card);
+
+                        .header {
+
+                            .category {
+                                color: rgba(0, 0, 0, 0.54);
+                            }
+
+                            .length {
+
+                                .length-icon {
+                                    color: rgba(0, 0, 0, 0.54) !important;
+                                }
+
+                                .min {
+                                    color: rgba(0, 0, 0, 0.54);
+                                }
+                            }
+                        }
+
+                        .content {
+
+                            .updated {
+                                color: map-get($foreground, hint-text);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    #academy-course {
+
+        .sidebar {
+
+            .steps {
+
+                .step {
+                    color: map-get($foreground, secondary-text);
+
+                    &.current {
+                        @if ($is-dark) {
+                            background: map-get($background, app-bar);
+                            color: map-get($foreground, text);
+                        } @else {
+                            background: map-get($accent, 50);
+                            color: map-get($accent, '50-contrast');
+                        }
+
+                        .index {
+
+                            span {
+                                @if ($is-dark) {
+                                    background: map-get($background, app-bar);
+                                    border-color: map-get($accent, default);
+                                } @else {
+                                    background: map-get($background, background);
+                                    border-color: map-get($accent, default);
+                                }
+                            }
+                        }
+                    }
+
+                    &.completed {
+                        color: map-get($foreground, text);
+
+                        .index {
+
+                            span {
+                                border-color: map-get($accent, default);
+                            }
+
+                            &:after {
+                                border-left-color: map-get($accent, default);
+                            }
+                        }
+
+                        + .step {
+
+                            .index {
+
+                                &:before {
+                                    border-left-color: map-get($accent, default);
+                                }
+                            }
+                        }
+                    }
+
+                    .index {
+
+                        &:before,
+                        &:after {
+                            border-left-color: map-get($foreground, divider);
+                        }
+
+                        span {
+                            background: map-get($background, background);
+                            border-color: map-get($foreground, divider);
+                        }
+                    }
+                }
+            }
+        }
+
+        .center {
+
+            .content {
+                @if ($is-dark) {
+                    background: #353535;
+                } @else {
+                    background: mat-color($mat-grey, 200);
+                }
+
+                .course-step {
+
+                    .course-step-content {
+                        background: map-get($background, card);
+                    }
+                }
+            }
+        }
+    }
+}

src/app/main/apps/academy/course/course.component.html

@@ -30,7 +30,7 @@
     <div class="center">
 
         <!-- HEADER -->
-        <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
+        <div class="header accent p-24" fxLayout="row" fxLayoutAlign="start center">
 
             <button mat-icon-button class="sidebar-toggle mr-16" fxHide.gt-md
                     (click)="toggleSidebar('academy-course-left-sidebar-1')">
@@ -82,7 +82,7 @@
                 <mat-icon>chevron_right</mat-icon>
             </button>
 
-            <button mat-fab class="done mat-green-600-bg"
+            <button mat-fab class="done green-600"
                     routerLink="/apps/academy/courses"
                     [disabled]="currentStep !== course.totalSteps - 1"
                     [fxShow]="currentStep === course.totalSteps - 1">

src/app/main/apps/academy/course/course.component.scss

@@ -14,16 +14,13 @@
                 align-items: center;
                 padding: 16px;
                 cursor: pointer;
-                color: rgba(0, 0, 0, 0.54);
 
                 &.current {
-                    background: mat-color($mat-blue, 50);
-                    color: rgba(0, 0, 0, 0.87);
 
                     .index {
 
                         span {
-                            border: 2px solid mat-color($mat-blue, 500);
+                            border: 2px solid;
                         }
                     }
 
@@ -33,26 +30,11 @@
                 }
 
                 &.completed {
-                    color: rgba(0, 0, 0, 0.87);
 
                     .index {
 
                         span {
-                            border: 2px solid mat-color($mat-blue, 500);
+                            border: 2px solid;
-                        }
-
-                        &:after {
-                            border-left-color: mat-color($mat-blue, 500);
-                        }
-                    }
-
-                    + .step {
-
-                        .index {
-
-                            &:before {
-                                border-left-color: mat-color($mat-blue, 500);
-                            }
                         }
                     }
                 }
@@ -81,29 +63,12 @@
                     display: flex;
                     margin-right: 12px;
 
-                    span {
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        position: relative;
-                        width: 28px;
-                        min-width: 28px;
-                        max-width: 28px;
-                        height: 28px;
-                        background: white;
-                        border-radius: 100%;
-                        border: 2px solid mat-color($mat-grey, 500);
-                        font-weight: bold;
-                        font-size: 12px;
-                        z-index: 10;
-                    }
-
                     &:before,
                     &:after {
                         position: absolute;
                         display: block;
                         content: ' ';
-                        border-left: 1px solid mat-color($mat-grey, 300);
+                        border-left: 1px solid;
                         width: 1px;
                         height: 50%;
                         left: 29px;
@@ -117,6 +82,22 @@
                     &:after {
                         bottom: 0;
                     }
+
+                    span {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        position: relative;
+                        width: 28px;
+                        min-width: 28px;
+                        max-width: 28px;
+                        height: 28px;
+                        border-radius: 100%;
+                        border: 2px solid;
+                        font-weight: bold;
+                        font-size: 12px;
+                        z-index: 10;
+                    }
                 }
 
                 .title {
@@ -139,7 +120,6 @@
         .content {
             position: relative;
             display: flex;
-            background: mat-color($mat-grey, 200);
 
             .course-step {
                 position: absolute;
@@ -164,7 +144,6 @@
                     max-width: 720px;
                     margin: 0 auto;
                     width: 100%;
-                    background: white;
                     @include mat-elevation(4);
                 }
             }

src/app/main/apps/academy/courses/courses.component.html

@@ -1,7 +1,7 @@
 <div id="academy-courses" class="page-layout simple">
 
     <!-- HEADER -->
-    <div class="header mat-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="center center">
+    <div class="header accent p-16 p-sm-24" fxLayout="column" fxLayoutAlign="center center">
 
         <div class="hero-text">
             <mat-icon class="hero-icon">school</mat-icon>

src/app/main/apps/academy/courses/courses.component.scss

@@ -7,9 +7,8 @@
         flex: 1 0 auto;
         height: 280px;
         max-height: 280px;
-        background: #1A237E;
-        background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);
         text-align: center;
+        overflow: hidden;
 
         @include media-breakpoint('xs') {
             height: 240px;
@@ -29,7 +28,6 @@
             }
 
             h1 {
-                color: white;
                 font-size: 40px;
                 font-weight: 300;
                 letter-spacing: 0.01em;
@@ -43,7 +41,6 @@
             }
 
             h3 {
-                color: rgba(255, 255, 255, 0.75);
                 max-width: 480px;
                 text-align: center;
                 font-weight: 300;
@@ -108,14 +105,12 @@
                 }
 
                 .course-content {
-                    background: white;
                     min-height: 240px;
                     transition: box-shadow 150ms ease-in-out;
 
                     @include mat-elevation(3);
 
                     .header {
-                        color: white;
                         padding: 16px 24px;
                         height: 64px !important;
                         min-height: 64px !important;
@@ -141,19 +136,16 @@
                             text-transform: capitalize;
                             text-align: left;
                             font-weight: 500;
-                            color: rgba(0, 0, 0, 0.54);
                         }
 
                         .length {
 
                             .length-icon {
                                 margin-right: 8px;
-                                color: rgba(0, 0, 0, 0.54) !important;
                             }
 
                             .min {
                                 font-size: 16px;
-                                color: rgba(0, 0, 0, 0.54);
                             }
                         }
                     }
@@ -170,7 +162,6 @@
                             font-size: 13px;
                             font-weight: 500;
                             margin-top: 4px;
-                            color: rgba(0, 0, 0, 0.37);
                         }
                     }
 

src/app/main/apps/calendar/calendar.component.html

@@ -76,7 +76,7 @@
         </div>
 
         <!-- ADD EVENT BUTTON -->
-        <button mat-fab class="add-event-button mat-warn" (click)="addEvent()" aria-label="Add event"
+        <button mat-fab class="add-event-button mat-accent" (click)="addEvent()" aria-label="Add event"
                 [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">
             <mat-icon>add</mat-icon>
         </button>

src/app/main/apps/calendar/calendar.component.scss

@@ -26,7 +26,6 @@
     }
 
     .cal-open-day-events {
-        background: #455A64;
         box-shadow: inset 0 0 12px 0 rgba(0, 0, 0, 0.54);
         padding: 0;
         display: flex;
@@ -39,7 +38,6 @@
             flex-direction: row;
             align-items: center;
             justify-content: start;
-            background-color: white;
             @include mat-elevation(1);
             transition: box-shadow 300ms ease;
 
@@ -68,7 +66,6 @@
                     padding: 21px 24px;
                     line-height: 1;
                     text-decoration: none;
-                    color: black;
                 }
             }
 
@@ -112,10 +109,8 @@
 
             .cal-event-title {
                 display: block;
-                //padding: 21px 24px;
                 line-height: 1;
                 text-decoration: none;
-                color: black;
             }
         }
 
@@ -160,7 +155,6 @@
                 height: 26px;
                 line-height: 26px;
                 text-decoration: none;
-                color: black;
             }
         }
 
@@ -191,7 +185,6 @@
 }
 
 #calendar {
-    background: #FFFFFF;
 
     .header {
         height: 200px;
@@ -308,10 +301,6 @@
             bottom: -26px;
             z-index: 10;
         }
-
-        mat-icon {
-            color: #FFFFFF;
-        }
     }
 
     .content {

src/app/main/apps/calendar/calendar.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { MatButtonModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSlideToggleModule, MatToolbarModule } from '@angular/material';
+import { MatButtonModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSlideToggleModule, MatToolbarModule, MatTooltipModule } from '@angular/material';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { CalendarModule as AngularCalendarModule } from 'angular-calendar';
 
@@ -38,6 +38,7 @@ const routes: Routes = [
         MatInputModule,
         MatSlideToggleModule,
         MatToolbarModule,
+        MatTooltipModule,
 
         AngularCalendarModule.forRoot(),
         ColorPickerModule,

src/app/main/apps/calendar/calendar.theme.scss

@@ -0,0 +1,192 @@
+@mixin calendar-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $accent: map-get($theme, accent);
+    $is-dark: map-get($theme, is-dark);
+
+    // Month view
+    .cal-month-view {
+
+        .cal-day-badge {
+            background: map-get($accent, default);
+            color: map-get($accent, default-contrast);
+        }
+
+        .cal-cell-row {
+
+            &.cal-header {
+                background: none !important;
+
+                .cal-cell {
+                    background: none !important;
+                }
+            }
+        }
+
+        .cal-days {
+            border-color: map-get($foreground, divider);
+
+            .cal-cell-row {
+                border-color: map-get($foreground, divider);
+
+                &:hover {
+                    background: map-get($background, hover);
+                }
+
+                .cal-day-cell {
+
+                    &:not(:last-child) {
+                        border-color: map-get($foreground, divider);
+                    }
+
+                    &.cal-has-events {
+
+                        &.cal-open {
+                            background: map-get($background, hover);
+                        }
+                    }
+
+                    &.cal-weekend {
+
+                        .cal-day-number {
+                            color: map-get($accent, default);
+                        }
+                    }
+
+                    &:hover {
+                        background: map-get($background, hover);
+                    }
+                }
+            }
+        }
+
+        .cal-open-day-events {
+            @if ($is-dark) {
+                background: map-get($background, app-bar);
+            } @else {
+                background: map-get($accent, default);
+            }
+
+            > div {
+                background: map-get($background, card);
+
+                .cal-event-title {
+                    color: map-get($foreground, text);
+                }
+            }
+        }
+    }
+
+    // Week view
+    .cal-week-view {
+
+        .cal-event {
+
+            mwl-calendar-event-actions {
+
+                .cal-event-actions {
+
+                    .cal-event-action {
+
+                        i {
+                            color: rgba(0, 0, 0, 0.54);
+                        }
+                    }
+                }
+            }
+        }
+
+        .cal-day-headers {
+            border-color: map-get($foreground, divider);
+
+            .cal-drag-over {
+                background: map-get($background, hover);
+            }
+
+            .cal-header {
+
+                &.cal-weekend {
+
+                    span {
+                        color: map-get($accent, default);
+                    }
+                }
+
+                &.cal-today {
+                    background: map-get($background, hover);
+                }
+
+                &:hover {
+                    background: map-get($background, hover);
+                }
+
+                &:not(:last-child) {
+                    border-color: map-get($foreground, divider);
+                }
+            }
+        }
+    }
+
+    // Day view
+    .cal-day-view {
+
+        .cal-hour-rows {
+            border-color: map-get($foreground, divider);
+        }
+
+        .cal-drag-over {
+
+            .cal-hour-segment {
+                background: map-get($background, hover);
+            }
+        }
+
+        .cal-event {
+
+            mwl-calendar-event-actions {
+
+                .cal-event-actions {
+
+                    .cal-event-action {
+
+                        i {
+                            color: rgba(0, 0, 0, 0.54);
+                        }
+                    }
+                }
+            }
+        }
+
+        .cal-hour {
+
+            .cal-hour-segment {
+
+                &:hover {
+                    background: map-get($background, hover);
+                }
+            }
+
+            &:nth-child(odd) {
+                background: map-get($background, hover);
+            }
+
+            &:not(:last-child) {
+
+                .cal-hour-segment {
+                    border-color: map-get($foreground, divider);
+                }
+            }
+
+            &:last-child {
+
+                :not(:last-child) {
+
+                    .cal-hour-segment {
+                        border-color: map-get($foreground, divider);
+                    }
+                }
+            }
+        }
+    }
+}

src/app/main/apps/chat/chat-start/chat-start.component.html

@@ -1,20 +1,20 @@
 <div fxFlex fxLayout="column" fxLayoutAlign="center center">
 
-    <div class="big-circle mat-elevation-z1 app-logo" fxLayout="column" fxLayoutAlign="center center"
+    <div class="big-circle mat-elevation-z6 app-logo" fxLayout="column" fxLayoutAlign="center center"
          [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
 
-        <mat-icon class="s-64 s-mat-128 mat-accent">chat</mat-icon>
+        <mat-icon class="s-64 s-md-128 mat-accent">chat</mat-icon>
 
     </div>
 
-    <span class="app-title my-24" [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">Chat App</span>
+    <span class="app-title mt-48 mb-16" [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">Chat App</span>
 
     <span fxHide fxShow.gt-md class="app-message" [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">
-        Select contact to start the chat!..
+        Select a contact to start a chat!
     </span>
 
     <button mat-raised-button fxHide.gt-md fuseMatSidenavToggler="chat-left-sidenav">
-        Select contact to start the chat!..
+        Select a contact to start a chat!
     </button>
 
 </div>

src/app/main/apps/chat/chat-start/chat-start.component.scss

@@ -1,16 +1,14 @@
 @import "src/@fuse/scss/fuse";
 
-:host {
+chat-start {
     display: flex;
     flex: 1;
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.8));
 
     .big-circle {
-        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.8));
         border-radius: 50%;
-        width: 300px;
+        width: 240px;
-        height: 300px;
+        height: 240px;
-        line-height: 300px;
+        line-height: 240px;
         text-align: center;
 
         @include media-breakpoint-down('sm') {

src/app/main/apps/chat/chat-start/chat-start.component.ts

@@ -1,12 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 import { fuseAnimations } from '@fuse/animations';
 
 @Component({
-    selector   : 'chat-start',
+    selector     : 'chat-start',
-    templateUrl: './chat-start.component.html',
+    templateUrl  : './chat-start.component.html',
-    styleUrls  : ['./chat-start.component.scss'],
+    styleUrls    : ['./chat-start.component.scss'],
-    animations : fuseAnimations
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
 export class ChatStartComponent
 {

src/app/main/apps/chat/chat-view/chat-view.component.html

@@ -56,25 +56,27 @@
     <!-- / CHAT TOOLBAR -->
 
     <!-- CHAT CONTENT -->
-    <div id="chat-content" fxFlex fusePerfectScrollbar>
+    <div id="chat-content" fxFlex="1 1 auto"  fusePerfectScrollbar>
 
         <!-- CHAT MESSAGES -->
         <div class="chat-messages">
 
             <!-- MESSAGE -->
-            <div fxLayout="row" *ngFor="let message of dialog" class="message-row"
+            <div *ngFor="let message of dialog; let i = index" class="message-row"
-                 [ngClass]="{'user' :message.who === user.id}">
+                 [ngClass]="{
+                            'me': message.who === user.id,
+                            'contact': message.who !== user.id,
+                            'first-of-group': isFirstMessageOfGroup(message, i),
+                            'last-of-group': isLastMessageOfGroup(message, i)
+                            }">
 
-                <img *ngIf="message.who === contact.id"
+                <img *ngIf="shouldShowContactAvatar(message, i)"
                      src="{{contact.avatar}}"
-                     class="avatar"
+                     class="avatar">
-                     alt="{{contact.name}}"/>
-
-                <img *ngIf="message.who ===user.id" class="avatar" src="{{user.avatar}}">
 
                 <div class="bubble">
                     <div class="message">{{message.message}}</div>
-                    <div class="time secondary-text">{{message.time | date:'medium'}}</div>
+                    <div class="time secondary-text">{{message.time | date:'short'}}</div>
                 </div>
 
             </div>
@@ -87,26 +89,28 @@
     <!-- / CHAT CONTENT -->
 
     <!-- CHAT FOOTER -->
-    <div class="chat-footer" fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="center center">
+    <div class="chat-footer" fxFlex="0 0 auto" fxLayout="column">
 
         <!-- REPLY FORM -->
-        <form #replyForm="ngForm"
+        <div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center">
-              (ngSubmit)="reply()"
-              (keyup.enter)="reply()"
-              fxFlex class="reply-form"
-              fxLayout="row"
-              fxLayoutAlign="start center">
 
-            <mat-form-field fxFlex floatLabel="never">
+            <form #replyForm="ngForm"
-                <textarea matInput #replyInput placeholder="Type and hit enter to send message"
+                  (ngSubmit)="reply($event)"
-                          ngModel name="message"></textarea>
+                  (keydown.enter)="reply($event)"
-            </mat-form-field>
+                  fxFlex fxLayout="row" fxLayoutAlign="start center">
 
-            <button mat-fab type="submit" aria-label="Send message">
+                <mat-form-field class="message-text" fxFlex floatLabel="never" appearance="standard">
-                <mat-icon>send</mat-icon>
+                    <textarea matInput #replyInput placeholder="Type your message"
-            </button>
+                              ngModel name="message" [rows]="1" [matTextareaAutosize]="true"></textarea>
+                </mat-form-field>
 
-        </form>
+                <button class="send-message-button" mat-icon-button type="submit" aria-label="Send message">
+                    <mat-icon class="secondary-text">send</mat-icon>
+                </button>
+
+            </form>
+
+        </div>
         <!-- / REPLY FORM -->
 
     </div>

src/app/main/apps/chat/chat-view/chat-view.component.scss

@@ -1,7 +1,8 @@
-:host {
+@import "src/@fuse/scss/fuse";
+
+chat-view {
     display: flex;
     flex: 1 0 auto;
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.8));
     overflow: hidden;
     max-width: 100%;
 
@@ -9,9 +10,7 @@
 
         .chat-toolbar {
             min-height: 64px;
-            background-color: #F3F4F5;
+            border-bottom: 1px solid;
-            color: rgba(0, 0, 0, 0.87);
-            border-bottom: 1px solid rgba(0, 0, 0, .08);
 
             .responsive-chats-button {
                 padding: 0;
@@ -23,10 +22,6 @@
                 .avatar {
                     margin-right: 16px;
                 }
-
-                .chat-contact-name {
-
-                }
             }
         }
 
@@ -35,64 +30,140 @@
             overflow: auto;
             -webkit-overflow-scrolling: touch;
 
-            .message-row {
+            .chat-messages {
-                padding: 16px;
+                position: relative;
+                padding: 16px 0 40px 40px;
 
-                .bubble {
+                .message-row {
                     position: relative;
-                    padding: 6px 7px 8px 9px;
+                    display: flex;
-                    background-color: #FFF;
+                    flex-direction: column;
-                    box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
+                    align-items: flex-start;
-                    border-radius: 6px;
+                    justify-content: flex-end;
+                    padding: 0 16px 4px 16px;
 
-                    &:before {
+                    .avatar {
-                        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADGUExURQAAAP////b29vn5+f///wAAAP///wAAAAAAAP///9ra2v////j4+PHx8fv7++Hh4fHx8f////////////////39/QAAAP////////z8/P////39/f39/fz8/P////////////z8/P////////////z8/P////////////v7+/Hx8f///9bW1vz8/K2trf////39/f39/WJiYgAAAExMTFtbWwAAAN3d3cjIyPr6+vX19QAAAO7u7vz8/NTU1Ofn5zMzM////zGPlXsAAABBdFJOUwAcm/kREh4CCDWL1SneR6TfAQffhMYK/A5nRrLWfRc5DW2ih5f+19Kn+9v4g/1LCJuXHwQUKgahcXS6DNnlDMMKKzPoTgAAAKBJREFUKM+V08USwmAQA+C/0NIWd3d3d8/7vxTMcIPkQK7f7CG7s8bQAOY/SCuwFYQU1P+eiCqIK2gpWCmoCrAgoKQgJ8CHgIqAMjg0MxxSQ3DogEMWFBZtUPAHYGB1CyDQWE6AH7BrfXzlAxGAQhECTGAmwN1Okz0Gb/LW4fEItIfrOfNELMh3tck7u+PhcT2zQ7l77/K8iY8yJwV3BeYFqpc/uSyPGdAAAAAASUVORK5CYII=);
-                        content: '';
                         position: absolute;
-                        left: -11px;
+                        left: -32px;
-                        bottom: 3px;
+                        margin: 0;
-                        width: 12px;
-                        height: 19px;
-                        background-position: 50% 50%;
-                        background-repeat: no-repeat;
-                        background-size: contain;
-                    }
-
-                    .message {
-                        white-space: pre-wrap;
-                    }
-
-                    .time {
-                        font-size: 11px;
-                        margin-top: 8px;
-                        text-align: right;
-                    }
-                }
-
-                &.contact {
-
-                    .avatar {
-                        margin: 0 16px 0 0;
-                    }
-                }
-
-                &.user {
-                    align-items: flex-end;
-
-                    .avatar {
-                        order: 2;
-                        margin: 0 0 0 16px;
                     }
 
                     .bubble {
-                        margin-left: auto;
+                        position: relative;
-                        background-color: #E8F5E9;
+                        display: flex;
-                        border: 1px solid #DFEBE0;
+                        align-items: center;
-                        order: 1;
+                        justify-content: center;
-                        &:before {
+                        padding: 12px;
-                            right: -11px;
+                        max-width: 100%;
-                            left: auto;
+
-                            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD2UExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGRsXAAAANzwzNPmxNrtyau5oIWRedDkwNntyczgwdfpyJ+/n97wzsLWtNjsytvwzczfvtPmxau6nNjqxtrtyio1KtzwzNjryAAAANzwzgAAANzwzK7Aor/Us9Lnw8vevAAAAMzevtbpxrvMrX+IdwAAAEROOi45Lr3MrZGjf9LoxX+MctnqydLkwhgYGMzfv9vuyQAAANzwzNvuy9zxy7vMu7XGqNvtzKKykwAAANruzKq6nLnMriQkGMXXuL3PsNjsySgzKAAAANLkw83fvd3vy9z4xtzwzRpFmIEAAABQdFJOUwAXChEGBAMBAgwhDvJ7k0YqMc0Zmwj6apf2kjU0+dkw/swh/CP9j2Wr2gndvaYeBRoxQg6gUPt/FaHJGdTj9A9k7XQLeE6iFcN12xkSt9r4NKizowAAAMFJREFUKM+V0sdywlAMBVDbMX7PQCihQ+iQ0HsJvfem/P/PwBIzugu0PXNnNNJVyPmhsIPhhoB2COwIGuLdhAcl3AhCBoBoHUC6BCBbA0C/EkBFB5D/FjxQwQYg1RI8UKINgDoSAPUlAPqUAMgfAEBfXsEDBV0+Hogi4Zhg4THj9YwHoqEBYOrgYTI3GVgMNn8r+Qq94k9yZNosW/3Hy9VuTjWfHkOX6367bGZUU7de66ieHZrO1OGg8Z1WTgYAFLgD5S1PCkzo1B0AAAAASUVORK5CYII=);
+                        .message {
+                            white-space: pre-wrap;
+                            line-height: 1.2;
+                        }
+
+                        .time {
+                            position: absolute;
+                            display: none;
+                            width: 100%;
+                            font-size: 11px;
+                            margin-top: 8px;
+                            top: 100%;
+                            left: 0;
+                            white-space: nowrap;
+                        }
+                    }
+
+                    &.contact {
+
+                        .bubble {
+                            border-top-left-radius: 5px;
+                            border-bottom-left-radius: 5px;
+
+                            border-top-right-radius: 20px;
+                            border-bottom-right-radius: 20px;
+
+                            .time {
+                                margin-left: 12px;
+                            }
+                        }
+
+                        &.first-of-group {
+
+                            .bubble {
+                                border-top-left-radius: 20px;
+                            }
+                        }
+
+                        &.last-of-group {
+
+                            .bubble {
+                                border-bottom-left-radius: 20px;
+                            }
+                        }
+                    }
+
+                    &.me {
+                        padding-left: 40px;
+
+                        .avatar {
+                            order: 2;
+                            margin: 0 0 0 16px;
+                        }
+
+                        .bubble {
+                            margin-left: auto;
+
+                            border-top-left-radius: 20px;
+                            border-bottom-left-radius: 20px;
+
+                            border-top-right-radius: 5px;
+                            border-bottom-right-radius: 5px;
+
+                            .time {
+                                justify-content: flex-end;
+                                right: 0;
+                                margin-right: 12px;
+                            }
+                        }
+
+                        &.first-of-group {
+
+                            .bubble {
+                                border-top-right-radius: 20px;
+                            }
+                        }
+
+                        &.last-of-group {
+
+                            .bubble {
+                                border-bottom-right-radius: 20px;
+                            }
+                        }
+                    }
+
+                    &.contact + .me,
+                    &.me + .contact {
+                        padding-top: 20px;
+                        margin-top: 20px;
+                    }
+
+                    &.first-of-group {
+
+                        .bubble {
+                            border-top-left-radius: 20px;
+                            padding-top: 13px;
+                        }
+                    }
+
+                    &.last-of-group {
+
+                        .bubble {
+                            border-bottom-left-radius: 20px;
+                            padding-bottom: 13px;
+
+                            .time {
+                                display: flex;
+                            }
                         }
                     }
                 }
@@ -100,37 +171,46 @@
         }
 
         .chat-footer {
-            min-height: 72px;
+            border-top: 1px solid;
-            max-height: 96px;
-            background-color: #F3F4F5;
-            color: rgba(0, 0, 0, 0.87);
-            border-top: 1px solid rgba(0, 0, 0, .08);
             padding: 8px 8px 8px 16px;
 
             .reply-form {
+                position: relative;
 
-                mat-form-field {
+                .message-text {
-                    margin: 0;
+                    padding: 16px 8px;
-                    padding-right: 16px;
 
-                    textarea {
+                    .mat-form-field-wrapper {
-                        max-height: 80px;
+                        padding: 0;
-                        transition: height 200ms ease;
-                        overflow: auto;
-                        -webkit-overflow-scrolling: touch;
 
-                        &.grow {
+                        .mat-form-field-flex {
-                            height: 80px;
+                            padding: 0;
+
+                            .mat-form-field-infix {
+                                padding: 0;
+                                border: none;
+                                border-radius: 20px;
+                                @include mat-elevation(2);
+
+                                textarea {
+                                    overflow: hidden;
+                                    margin: 16px 48px 16px 16px;
+                                    width: calc(100% - 64px);
+                                    padding: 0;
+                                }
+                            }
                         }
-                    }
 
-                    .mat-errors-spacer {
+                        .mat-form-field-underline {
-                        display: none;
+                            display: none !important;
+                        }
                     }
                 }
 
-                .mat-button {
+                .send-message-button {
-                    margin: 0;
+                    position: absolute;
+                    right: 16px;
+                    bottom: 21px;
                 }
             }
         }

src/app/main/apps/chat/chat-view/chat-view.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewChildren } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -8,9 +8,10 @@ import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scr
 import { ChatService } from 'app/main/apps/chat/chat.service';
 
 @Component({
-    selector   : 'chat-view',
+    selector     : 'chat-view',
-    templateUrl: './chat-view.component.html',
+    templateUrl  : './chat-view.component.html',
-    styleUrls  : ['./chat-view.component.scss']
+    styleUrls    : ['./chat-view.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit
 {
@@ -92,6 +93,45 @@ export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * Decide whether to show or not the contact's avatar in the message row
+     *
+     * @param message
+     * @param i
+     * @returns {boolean}
+     */
+    shouldShowContactAvatar(message, i): boolean
+    {
+        return (
+            message.who === this.contact.id &&
+            ((this.dialog[i + 1] && this.dialog[i + 1].who !== this.contact.id) || !this.dialog[i + 1])
+        );
+    }
+
+    /**
+     * Check if the given message is the first message of a group
+     *
+     * @param message
+     * @param i
+     * @returns {boolean}
+     */
+    isFirstMessageOfGroup(message, i): boolean
+    {
+        return (i === 0 || this.dialog[i - 1] && this.dialog[i - 1].who !== message.who);
+    }
+
+    /**
+     * Check if the given message is the last message of a group
+     *
+     * @param message
+     * @param i
+     * @returns {boolean}
+     */
+    isLastMessageOfGroup(message, i): boolean
+    {
+        return (i === this.dialog.length - 1 || this.dialog[i + 1] && this.dialog[i + 1].who !== message.who);
+    }
+
     /**
      * Select contact
      */
@@ -106,11 +146,9 @@ export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit
     readyToReply(): void
     {
         setTimeout(() => {
-            this.replyForm.reset();
             this.focusReplyInput();
             this.scrollToBottom();
         });
-
     }
 
     /**
@@ -144,8 +182,15 @@ export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit
     /**
      * Reply
      */
-    reply(): void
+    reply(event): void
     {
+        event.preventDefault();
+
+        if ( !this.replyForm.form.value.message )
+        {
+            return;
+        }
+
         // Message
         const message = {
             who    : this.user.id,
@@ -156,6 +201,9 @@ export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit
         // Add the message to the chat
         this.dialog.push(message);
 
+        // Reset the reply form
+        this.replyForm.reset();
+
         // Update the server
         this._chatService.updateDialog(this.selectedChat.chatId, this.dialog).then(response => {
             this.readyToReply();

src/app/main/apps/chat/chat.component.html

@@ -1,7 +1,7 @@
-<div id="chat" class="page-layout carded fullwidth">
+<div id="chat" class="page-layout carded fullwidth inner-scroll">
 
     <!-- TOP BACKGROUND -->
-    <div class="top-bg mat-accent-bg"></div>
+    <div class="top-bg accent"></div>
     <!-- / TOP BACKGROUND -->
 
     <!-- CENTER -->

src/app/main/apps/chat/chat.component.scss

@@ -1,8 +1,6 @@
 @import "src/@fuse/scss/fuse";
 
 #chat {
-    display: flex;
-    flex: 1;
 
     .center {
         padding: 32px !important;
@@ -17,13 +15,11 @@
             display: flex;
             flex: 1;
             position: relative;
-            background: url('/assets/images/patterns/rain-grey.png') repeat;
 
             .mat-sidenav-container {
                 display: flex;
                 flex: 1;
                 width: 100%;
-                background: transparent;
 
                 > .mat-sidenav-content,
                 > .mat-drawer-content {
@@ -42,7 +38,7 @@
                     flex-direction: column;
                     width: 400px;
                     max-width: 90%;
-                    box-shadow: 0 0 1px rgba(0, 0, 0, .37);
+                    box-shadow: 0 0 1px rgba(0, 0, 0, 0.37);
                     overflow: hidden;
                 }
             }

src/app/main/apps/chat/chat.theme.scss

@@ -0,0 +1,119 @@
+@mixin chat-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $is-dark: map-get($theme, is-dark);
+
+    // Chat start
+    chat-start {
+
+        .big-circle {
+            background: map-get($background, card);
+        }
+    }
+
+    // Chat view
+    chat-view {
+
+        .chat {
+
+            .chat-toolbar {
+                border-bottom-color: map-get($foreground, divider);
+            }
+
+            #chat-content {
+
+                .message-row {
+
+                    &.contact {
+
+                        .bubble {
+                            background-color: map-get($primary, default);
+                            color: map-get($primary, default-contrast);
+                        }
+                    }
+
+                    &.me {
+
+                        .bubble {
+                            color: rgba(0, 0, 0, 0.87);
+                            background-color: #E0E0E0;
+                        }
+                    }
+                }
+            }
+
+            .chat-footer {
+                background: map-get($background, app-bar);
+                border-top-color: map-get($foreground, divider);
+
+                .reply-form {
+
+                    .message-text {
+                        background-color: map-get($background, app-bar);
+                        border-color: map-get($foreground, divider);
+
+                        .mat-form-field-wrapper {
+
+                            .mat-form-field-flex {
+
+                                .mat-form-field-infix {
+                                    @if ($is-dark == true) {
+                                        background-color: map-get($background, hover);
+                                    } @else {
+                                        background-color: white;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // Chats sidenav
+    chat-chats-sidenav {
+
+        .sidenav-header {
+
+            mat-toolbar {
+                border-bottom-color: map-get($foreground, divider);
+
+                .search {
+                    background: map-get($background, background);
+
+                    input {
+                        background: map-get($background, background);
+                        color: map-get($foreground, text);
+                    }
+                }
+            }
+        }
+
+        .sidenav-content {
+
+            .contact-list,
+            .chat-list {
+
+                .mat-subheader {
+                    color: map-get($accent, default);
+                }
+
+                .contact {
+                    border-bottom-color: map-get($foreground, divider);
+
+                    .contact-last-message {
+                        color: map-get($foreground, secondary-text);
+                    }
+
+                    .contact-mood {
+                        color: map-get($foreground, secondary-text);
+                    }
+                }
+            }
+        }
+    }
+}

src/app/main/apps/chat/sidenavs/left/chats/chats.component.html

@@ -120,23 +120,24 @@
                 <div fxLayout="row" fxLayoutAlign="start center">
 
                     <div class="avatar-wrapper" fxFlex="0 1 auto" fxLayoutAlign="center center">
-                        <img [src]="contacts |getById:chat.contactId:'avatar'"
+                        <img [src]="contacts | getById:chat.contactId:'avatar'"
                              class="avatar"
-                             alt="{{contacts |getById:chat.contactId:'name'}}"/>
+                             alt="{{contacts | getById:chat.contactId:'name'}}"/>
-                        <mat-icon class="s-16 status" [ngClass]="contacts |getById:chat.contactId:'status'"></mat-icon>
+                        <mat-icon class="s-16 status" [ngClass]="contacts | getById:chat.contactId:'status'"></mat-icon>
                     </div>
 
                     <div fxLayout="row" fxFlex>
 
                         <div class="" fxFlex fxLayout="column" fxLayoutAlign="center start">
-                            <div class="contact-name">{{contacts |getById:chat.contactId:'name'}}</div>
+                            <div class="contact-name">{{contacts | getById:chat.contactId:'name'}}</div>
+                            <div class="contact-last-message">{{chat.lastMessage}}</div>
                         </div>
 
                         <div fxLayout="column" fxLayoutAlign="center end">
                             <div class="contact-last-message-time">
                                 {{chat.lastMessageTime | date}}
                             </div>
-                            <div *ngIf="chat.unread" class="unread-message-count mat-accent-bg">{{chat.unread}}</div>
+                            <div *ngIf="chat.unread" class="unread-message-count accent">{{chat.unread}}</div>
                         </div>
                     </div>
                 </div>
@@ -148,7 +149,7 @@
         <!-- CONTACTS LIST-->
         <div class="contact-list" fxLayout="column">
 
-            <div matSubheader *ngIf="(contacts| filter: searchText).length > 0">
+            <div matSubheader *ngIf="(contacts | filter: searchText).length > 0">
                 Contacts
             </div>
 
@@ -173,7 +174,7 @@
         <!-- / CONTACTS LIST-->
 
         <!-- NO RESULTS MESSAGE -->
-        <div *ngIf="(contacts| filter: searchText).length === 0" class="no-results-message">
+        <div *ngIf="(contacts | filter: searchText).length === 0" class="no-results-message">
             No results..
         </div>
         <!-- NO RESULTS MESSAGE-->

src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss

@@ -1,6 +1,6 @@
 @import "src/@fuse/scss/fuse";
 
-:host {
+chat-chats-sidenav {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -8,11 +8,12 @@
     .sidenav-header {
 
         mat-toolbar {
-            border-bottom: 1px solid rgba(0, 0, 0, .08);
+            border-bottom: 1px solid;
 
             .avatar-wrapper {
 
-                .avatar, .status {
+                .avatar,
+                .status {
                     cursor: pointer;
                 }
             }
@@ -21,19 +22,16 @@
                 height: 36px;
                 line-height: 36px;
                 padding: 8px;
-                background: #FFFFFF;
                 font-size: 13px;
                 @include mat-elevation(1);
 
                 .icon {
                     margin: 0;
-                    color: rgba(0, 0, 0, 0.54);
                 }
 
                 input {
                     padding-left: 12px;
                     height: 36px;
-                    color: rgba(0, 0, 0, 0.54);
                     border: none;
                 }
             }
@@ -44,7 +42,8 @@
         overflow: auto;
         -webkit-overflow-scrolling: touch;
 
-        .contact-list, .chat-list {
+        .contact-list,
+        .chat-list {
 
             .mat-subheader {
                 padding-left: 16px;
@@ -52,7 +51,6 @@
                 font-weight: 300;
                 height: 88px;
                 line-height: 88px;
-                color: mat-color($accent);
             }
 
             .contact {
@@ -60,7 +58,7 @@
                 text-align: left;
                 letter-spacing: .010em;
                 min-height: 88px;
-                border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+                border-bottom: 1px solid;
                 padding: 16px;
                 font-weight: 400;
 
@@ -78,10 +76,8 @@
                 }
 
                 .contact-last-message {
-                    line-height: 1.6em;
+                    line-height: normal;
-                    margin: 0;
+                    margin-top: 0;
-                    font-weight: 500;
-                    color: rgba(0, 0, 0, 0.54);
                 }
 
                 .contact-mood {
@@ -104,7 +100,6 @@
             width: 100%;
             height: 88px;
             padding: 16px;
-            background: #FFFFFF;
             font-size: 15px;
             font-weight: 400;
         }

src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { ObservableMedia } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -9,10 +9,11 @@ import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/f
 import { ChatService } from 'app/main/apps/chat/chat.service';
 
 @Component({
-    selector   : 'chat-chats-sidenav',
+    selector     : 'chat-chats-sidenav',
-    templateUrl: './chats.component.html',
+    templateUrl  : './chats.component.html',
-    styleUrls  : ['./chats.component.scss'],
+    styleUrls    : ['./chats.component.scss'],
-    animations : fuseAnimations
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
 export class ChatChatsSidenavComponent implements OnInit, OnDestroy
 {

src/app/main/apps/chat/sidenavs/left/left.component.scss

@@ -1,4 +1,4 @@
-:host {
+chat-left-sidenav {
     display: flex;
     flex-direction: column;
     height: 100%;

src/app/main/apps/chat/sidenavs/left/left.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -7,10 +7,11 @@ import { fuseAnimations } from '@fuse/animations';
 import { ChatService } from 'app/main/apps/chat/chat.service';
 
 @Component({
-    selector   : 'chat-left-sidenav',
+    selector     : 'chat-left-sidenav',
-    templateUrl: './left.component.html',
+    templateUrl  : './left.component.html',
-    styleUrls  : ['./left.component.scss'],
+    styleUrls    : ['./left.component.scss'],
-    animations : fuseAnimations
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
 export class ChatLeftSidenavComponent implements OnInit, OnDestroy
 {

src/app/main/apps/chat/sidenavs/left/user/user.component.html

@@ -2,7 +2,7 @@
 <div class="sidenav-header">
 
     <!-- USER TOOLBAR -->
-    <mat-toolbar class="mat-accent-bg">
+    <mat-toolbar class="accent">
 
         <!-- TOOLBAR TOP -->
         <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
@@ -28,50 +28,48 @@
 </div>
 
 <!-- SIDENAV CONTENT -->
-<div class="sidenav-content p-16" fxFlex>
+<div class="sidenav-content py-32 px-24" fxFlex>
 
     <!-- USER MOOD -->
-    <mat-card>
+    <form [formGroup]="userForm" fxLayout="column">
 
-        <form [formGroup]="userForm" fxLayout="column">
+        <mat-form-field class="mb-24" fxFlex="0 1 auto">
+            <textarea matInput placeholder="Mood" name="mood"
+                      formControlName="mood" rows="3"></textarea>
+        </mat-form-field>
 
-            <mat-form-field class="mb-24" fxFlex="0 1 auto">
+        <mat-radio-group formControlName="status" fxLayout="column">
-                <textarea matInput placeholder="Mood" name="mood"
-                          formControlName="mood" rows="3"></textarea>
-            </mat-form-field>
 
-            <mat-radio-group formControlName="status" fxLayout="column">
+            <mat-radio-button value="online" class="py-8">
+                <div fxLayout="row" fxLayoutAlign="start center">
+                    <mat-icon class="status online mr-8"></mat-icon>
+                    <span class="mat-h4 m-0">Online</span>
+                </div>
+            </mat-radio-button>
 
-                <mat-radio-button value="online" class="py-8">
+            <mat-radio-button value="away" class="py-8">
-                    <div fxLayout="row" fxLayoutAlign="start center">
+                <div fxLayout="row" fxLayoutAlign="start center">
-                        <mat-icon class="status online mr-8"></mat-icon>
+                    <mat-icon class="status away mr-8"></mat-icon>
-                        <span class="mat-h4 m-0">Online</span>
+                    <span class="mat-h4 m-0">Away</span>
-                    </div>
+                </div>
-                </mat-radio-button>
+            </mat-radio-button>
 
-                <mat-radio-button value="away" class="py-8">
+            <mat-radio-button value="do-not-disturb" class="py-8">
-                    <div fxLayout="row" fxLayoutAlign="start center">
+                <div fxLayout="row" fxLayoutAlign="start center">
-                        <mat-icon class="status away mr-8"></mat-icon>
+                    <mat-icon class="status do-not-disturb mr-8"></mat-icon>
-                        <span class="mat-h4 m-0">Away</span>
+                    <span class="mat-h4 m-0">Do not disturb</span>
-                    </div>
+                </div>
-                </mat-radio-button>
+            </mat-radio-button>
 
-                <mat-radio-button value="do-not-disturb" class="py-8">
+            <mat-radio-button value="offline" class="py-8">
-                    <div fxLayout="row" fxLayoutAlign="start center">
+                <div fxLayout="row" fxLayoutAlign="start center">
-                        <mat-icon class="status do-not-disturb mr-8"></mat-icon>
+                    <mat-icon class="status offline mr-8"></mat-icon>
-                        <span class="mat-h4 m-0">Do not disturb</span>
+                    <span class="mat-h4 m-0">Offline</span>
-                    </div>
+                </div>
-                </mat-radio-button>
+            </mat-radio-button>
+        </mat-radio-group>
 
-                <mat-radio-button value="offline" class="py-8">
+    </form>
-                    <div fxLayout="row" fxLayoutAlign="start center">
-                        <mat-icon class="status offline mr-8"></mat-icon>
-                        <span class="mat-h4 m-0">Offline</span>
-                    </div>
-                </mat-radio-button>
-            </mat-radio-group>
-
-        </form>
-    </mat-card>
     <!-- / USER MOOD -->
+
 </div>

src/app/main/apps/chat/sidenavs/left/user/user.component.scss

@@ -1,6 +1,6 @@
 @import "src/@fuse/scss/fuse";
 
-:host {
+chat-user-sidenav {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -10,15 +10,7 @@
     mat-toolbar {
 
         .toolbar-bottom {
-            height: 240px;
+            height: 180px;
-
-            @include media-breakpoint-down(md) {
-                height: 180px;
-            }
         }
     }
-
-    .sidenav-content {
-        background: whitesmoke;
-    }
 }

src/app/main/apps/chat/sidenavs/left/user/user.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
@@ -6,9 +6,10 @@ import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 import { ChatService } from 'app/main/apps/chat/chat.service';
 
 @Component({
-    selector   : 'chat-user-sidenav',
+    selector     : 'chat-user-sidenav',
-    templateUrl: './user.component.html',
+    templateUrl  : './user.component.html',
-    styleUrls  : ['./user.component.scss']
+    styleUrls    : ['./user.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class ChatUserSidenavComponent implements OnInit, OnDestroy
 {

src/app/main/apps/chat/sidenavs/right/contact/contact.component.html

@@ -2,7 +2,7 @@
 <div class="sidenav-header" *ngIf="contact">
 
     <!-- CONTACT TOOLBAR -->
-    <mat-toolbar class="mat-accent-bg">
+    <mat-toolbar class="accent">
 
         <!-- TOOLBAR TOP -->
         <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
@@ -28,17 +28,11 @@
 </div>
 
 <!-- SIDENAV CONTENT -->
-<div class="sidenav-content p-16" fxFlex *ngIf="contact">
+<div class="sidenav-content py-32 px-24" fxFlex fxLayout="column" *ngIf="contact">
 
     <!-- CONTACT MOOD -->
-    <mat-card>
+    <div class="secondary-text mb-8">Mood</div>
-
+    <div>{{contact.mood}}</div>
-        <mat-form-field class="w-100-p">
-            <textarea matInput placeholder="Mood" name="mood"
-                      [value]="contact.mood" rows="3" disabled>
-            </textarea>
-        </mat-form-field>
-
-    </mat-card>
     <!-- / CONTACT MOOD -->
+
 </div>

src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss

@@ -1,6 +1,6 @@
 @import "src/@fuse/scss/fuse";
 
-:host {
+chat-contact-sidenav {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -10,15 +10,7 @@
     mat-toolbar {
 
         .toolbar-bottom {
-            height: 240px;
+            height: 180px;
-
-            @include media-breakpoint-down(md) {
-                height: 180px;
-            }
         }
     }
-
-    .sidenav-content {
-        background: whitesmoke;
-    }
 }

src/app/main/apps/chat/sidenavs/right/contact/contact.component.ts

@@ -1,13 +1,14 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { ChatService } from 'app/main/apps/chat/chat.service';
 
 @Component({
-    selector   : 'chat-contact-sidenav',
+    selector     : 'chat-contact-sidenav',
-    templateUrl: './contact.component.html',
+    templateUrl  : './contact.component.html',
-    styleUrls  : ['./contact.component.scss']
+    styleUrls    : ['./contact.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class ChatContactSidenavComponent implements OnInit, OnDestroy
 {
@@ -41,8 +42,8 @@ export class ChatContactSidenavComponent implements OnInit, OnDestroy
         this._chatService.onContactSelected
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(contact => {
-            this.contact = contact;
+                this.contact = contact;
-        });
+            });
     }
 
     /**