Added an extra Material theme as an example to the "styles.scss" file

Fixed bunch of color related stuff in order to apply the selected theme color correctly

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

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

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

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

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

@@ -227,6 +227,35 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     }
 }
 
+@mixin generateFuseColorClasses($primary, $accent, $warn) {
+
+    $colorMap: (
+        primary: $primary,
+        accent: $accent,
+        warn: $warn
+    );
+
+    // Generate the color classes...
+    @each $name, $map in $colorMap {
+
+        @each $hue in $matColorHues {
+
+            $color: map-get($map, $hue);
+            $contrastColor: map-get(map-get($map, 'contrast'), $hue);
+
+            @if ($color != null and $contrastColor != null) {
+
+                @include generateColorClasses($name, $color, $contrastColor, '-#{$hue}');
+
+                // Run the generator one more time for default values (500)
+                @if ($hue == 500) {
+                    @include generateColorClasses($name, $color, $contrastColor, '');
+                }
+            }
+        }
+    }
+}
+
 // Generate the color classes...
 @each $colorName, $colorMap in $matColorsMap {
 

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

@@ -72,14 +72,14 @@
             }
 
             &.active {
-                background-color: mat-color($accent);
+                //background-color: mat-color($accent);
 
                 .mat-ripple-element {
-                    background-color: mat-color($accent, default-contrast, 0.1);
+                    //background-color: mat-color($accent, default-contrast, 0.1);
                 }
 
                 &, .nav-link-icon {
-                    color: mat-color($accent, default-contrast);
+                    //color: mat-color($accent, default-contrast);
                 }
 
                 .nav-link-badge {

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

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

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

@@ -18,10 +18,6 @@
             height: 160px;
             line-height: 160px;
         }
-
-        mat-icon {
-            color: mat-color($accent);
-        }
     }
 
     .app-title {

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

@@ -136,7 +136,7 @@
                             <div class="contact-last-message-time">
                                 {{chat.lastMessageTime | date}}
                             </div>
-                            <div *ngIf="chat.unread" class="unread-message-count">{{chat.unread}}</div>
+                            <div *ngIf="chat.unread" class="unread-message-count mat-accent-bg">{{chat.unread}}</div>
                         </div>
                     </div>
                 </div>

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

@@ -94,8 +94,6 @@
                     width: 24px;
                     height: 24px;
                     line-height: 24px;
-                    background-color: mat-color($accent);
-                    color: map-get($accent, default-contrast);
                 }
             }
         }

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

@@ -2,7 +2,7 @@
 <div class="sidenav-header">
 
     <!-- USER TOOLBAR -->
-    <mat-toolbar>
+    <mat-toolbar class="mat-accent-bg">
 
         <!-- TOOLBAR TOP -->
         <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">

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

@@ -6,8 +6,6 @@
     flex-direction: column;
 
     mat-toolbar {
-        background-color: mat-color($accent);
-        color: map-get($accent, default-contrast);
 
         .toolbar-bottom {
             height: 240px;
@@ -16,7 +14,6 @@
                 height: 180px;
             }
         }
-
     }
 
     .sidenav-content {

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>
+    <mat-toolbar class="mat-accent-bg">
 
         <!-- TOOLBAR TOP -->
         <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">

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

@@ -6,8 +6,6 @@
     flex-direction: column;
 
     mat-toolbar {
-        background-color: mat-color($accent);
-        color: map-get($accent, default-contrast);
 
         .toolbar-bottom {
             height: 240px;
@@ -16,7 +14,6 @@
                 height: 180px;
             }
         }
-
     }
 
     .sidenav-content {

src/app/main/apps/contacts/contact-list/contact-list.component.html

@@ -97,7 +97,7 @@
     <mat-row *cdkRowDef="let contact; columns: displayedColumns;"
              class="contact"
              (click)="editContact(contact)"
-             [ngClass]="{'mat-light-blue-50-bg':checkboxes[contact.id]}"
+             [ngClass]="{'mat-accent-50-bg':checkboxes[contact.id]}"
              matRipple
              [@animate]="{value:'*',params:{y:'100%'}}">
     </mat-row>

src/app/main/apps/contacts/sidenavs/main/main.component.html

@@ -18,19 +18,20 @@
             <div class="nav">
 
                 <div class="nav-item" aria-label="inbox">
-                    <a class="nav-link" matRipple (click)="changeFilter('all')" [ngClass]="{'active':filterBy ==='all'}">
+                    <a class="nav-link" matRipple (click)="changeFilter('all')"
+                       [ngClass]="{'active mat-accent-bg':filterBy ==='all'}">
                         <span class="title">All Contacts</span>
                     </a>
                 </div>
 
                 <div class="nav-item" aria-label="frequently contacted" (click)="changeFilter('frequent')">
-                    <a class="nav-link" matRipple [ngClass]="{'active':filterBy ==='frequent'}">
+                    <a class="nav-link" matRipple [ngClass]="{'active mat-accent-bg':filterBy ==='frequent'}">
                         <div class="title">Freequently contacted</div>
                     </a>
                 </div>
 
                 <div class="nav-item" aria-label="starred" (click)="changeFilter('starred')">
-                    <a class="nav-link" matRipple [ngClass]="{'active':filterBy ==='starred'}">
+                    <a class="nav-link" matRipple [ngClass]="{'active mat-accent-bg':filterBy ==='starred'}">
                         <div class="title">Starred Contacts</div>
                     </a>
                 </div>

src/app/main/apps/e-commerce/order/order.component.html

@@ -8,7 +8,7 @@
     <div class="center">
 
         <!-- HEADER -->
-        <div class="header white-fg"
+        <div class="header mat-accent-bg"
              fxLayout="row" fxLayoutAlign="space-between center">
 
             <!-- APP TITLE -->

src/app/main/apps/e-commerce/orders/orders.component.html

@@ -8,7 +8,7 @@
     <div class="center">
 
         <!-- HEADER -->
-        <div class="header white-fg"
+        <div class="header mat-accent-bg"
              fxLayout="column" fxLayoutAlign="center center"
              fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
 

src/app/main/apps/e-commerce/product/product.component.html

@@ -8,7 +8,7 @@
     <div class="center">
 
         <!-- HEADER -->
-        <div class="header white-fg" fxLayout="row" fxLayoutAlign="space-between center">
+        <div class="header mat-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
 
             <!-- APP TITLE -->
             <div fxLayout="row" fxLayoutAlign="start center">

src/app/main/apps/e-commerce/products/products.component.html

@@ -8,7 +8,7 @@
     <div class="center">
 
         <!-- HEADER -->
-        <div class="header white-fg"
+        <div class="header mat-accent-bg"
              fxLayout="column" fxLayoutAlign="center center"
              fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
 

src/app/main/apps/file-manager/file-list/file-list.component.html

@@ -52,9 +52,8 @@
     <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
     <mat-row *cdkRowDef="let row; columns: displayedColumns;"
              (click)="onSelect(row)"
-             [ngClass]="{'mat-light-blue-50-bg':row == selected}"
+             [ngClass]="{'mat-accent-50-bg':row == selected}"
-             matRipple
+             matRipple [@animate]="{value:'*',params:{y:'100%'}}"
-             [@animate]="{value:'*',params:{y:'100%'}}"
     >
     </mat-row>
 </mat-table>

src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.html

@@ -10,7 +10,7 @@
 
             <div class="name" fxLayout="row" fxLayoutAlign="start center" fxFlex>
                 <img class="avatar" *ngIf="mail.from?.avatar" alt="{{mail.from?.name}}" src="{{mail.from?.avatar}}"/>
-                <div class="avatar" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
+                <div class="avatar mat-accent-bg" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
                 <span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span>
                 <mat-icon *ngIf="mail.hasAttachments">attachment</mat-icon>
             </div>

src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss

@@ -44,20 +44,6 @@
         }
     }
 
-    &.current-mail {
-        background: #E3F2FD;
-
-        .info {
-
-            .row-2 {
-
-                .labels {
-                    background: #E3F2FD;
-                }
-            }
-        }
-    }
-
     .info {
         overflow: hidden;
         width: 0;
@@ -76,7 +62,6 @@
                     width: 32px;
                     height: 32px;
                     line-height: 32px;
-                    background-color: mat-color($accent);
                 }
             }
 
@@ -104,11 +89,7 @@
             }
 
             .labels {
-                position: absolute;
+                margin-top: 8px;
-                background: #FFFFFF;
-                bottom: 0;
-                right: 0;
-                padding-left: 6px;
 
                 .label {
                     font-size: 11px;

src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html

@@ -4,6 +4,6 @@
 
 <div class="mail-list">
     <mail-list-item matRipple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
-                    [ngClass]="{'current-mail':mail?.id == currentMail?.id}">
+                    [ngClass]="{'current-mail mat-accent-50-bg':mail?.id == currentMail?.id}">
     </mail-list-item>
 </div>

src/app/main/apps/mail-ngrx/mail.component.html

@@ -65,11 +65,11 @@
                         <div class="toolbar-separator" *ngIf="hasSelectedMails"></div>
 
                         <button mat-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails">
-                            <mat-icon>delete</mat-icon>
+                            <mat-icon class="secondary-text">delete</mat-icon>
                         </button>
 
                         <button mat-icon-button [matMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails">
-                            <mat-icon>folder</mat-icon>
+                            <mat-icon class="secondary-text">folder</mat-icon>
                         </button>
                         <mat-menu #folderMenu="matMenu">
                             <button mat-menu-item *ngFor="let folder of folders$ | async"
@@ -78,7 +78,7 @@
                         </mat-menu>
 
                         <button mat-icon-button [matMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
-                            <mat-icon>label</mat-icon>
+                            <mat-icon class="secondary-text">label</mat-icon>
                         </button>
                         <mat-menu #labelMenu="matMenu">
                             <button mat-menu-item *ngFor="let label of labels$ | async"
@@ -89,7 +89,7 @@
 
                     <div *ngIf="currentMail$ | async" fxHide.gt-xs>
                         <button mat-icon-button (click)="deselectCurrentMail()">
-                            <mat-icon>arrow_back</mat-icon>
+                            <mat-icon class="secondary-text">arrow_back</mat-icon>
                         </button>
                     </div>
                 </div>

src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html

@@ -1,6 +1,6 @@
 <!-- SIDENAV HEADER -->
 <div fxLayout="column" fxLayoutAlign="space-between start"
-     class="header p-24 pb-4" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
+     class="header mat-accent-bg p-24 pb-4">
 
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
         <mat-icon class="logo-icon s-32">mail</mat-icon>
@@ -39,8 +39,9 @@
         <div class="nav-subheader">{{ 'MAIL.FOLDERS' | translate }}</div>
 
         <div class="nav-item" *ngFor="let folder of (folders$ | async)">
-            <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/' + folder.handle" routerLinkActive="active">
+            <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/' + folder.handle"
-                <mat-icon class="nav-link-icon" *ngIf="folder.icon">{{folder.icon}}</mat-icon>
+               [routerLinkActive]="['active', 'mat-accent-bg']">
+                <mat-icon class="nav-link-icon secondary-text" *ngIf="folder.icon">{{folder.icon}}</mat-icon>
                 <span>{{folder.title}}</span>
             </a>
         </div>
@@ -49,7 +50,7 @@
 
         <div class="nav-item" *ngFor="let filter of (filters$ | async)">
             <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/filter/' + filter.handle"
-               routerLinkActive="active">
+               [routerLinkActive]="['active', 'mat-accent-bg']">
                 <mat-icon class="nav-link-icon" [ngClass]="filter.color" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
                 <span>{{filter.title}}</span>
             </a>
@@ -59,7 +60,7 @@
 
         <div class="nav-item" *ngFor="let label of (labels$ | async)">
             <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/label/' + label.handle"
-               routerLinkActive="active">
+               [routerLinkActive]="['active', 'mat-accent-bg']">
                 <mat-icon class="nav-link-icon" [ngStyle]="{'color':label.color}">label</mat-icon>
                 <span>{{label.title}}</span>
             </a>

src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html

@@ -9,7 +9,7 @@
 
             <div class="name" fxLayout="row" fxLayoutAlign="start center" fxFlex>
                 <img class="avatar" *ngIf="mail.from?.avatar" alt="{{mail.from?.name}}" src="{{mail.from?.avatar}}"/>
-                <div class="avatar" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
+                <div class="avatar mat-accent-bg" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
                 <span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span>
                 <mat-icon *ngIf="mail.hasAttachments">attachment</mat-icon>
             </div>

src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss

@@ -43,20 +43,6 @@
         }
     }
 
-    &.current-mail {
-        background: #E3F2FD;
-
-        .info {
-
-            .row-2 {
-
-                .labels {
-                    background: #E3F2FD;
-                }
-            }
-        }
-    }
-
     .info {
         overflow: hidden;
         width: 0;
@@ -75,7 +61,6 @@
                     width: 32px;
                     height: 32px;
                     line-height: 32px;
-                    background-color: mat-color($accent);
                 }
             }
 
@@ -103,11 +88,7 @@
             }
 
             .labels {
-                position: absolute;
+                margin-top: 8px;
-                background: #FFFFFF;
-                bottom: 0;
-                right: 0;
-                padding-left: 6px;
 
                 .label {
                     font-size: 11px;

src/app/main/apps/mail/mail-list/mail-list.component.html

@@ -4,7 +4,7 @@
 
 <div class="mail-list" *fuseIfOnDom [@animateStagger]="{value:'50'}">
     <mail-list-item matRipple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
-                    [ngClass]="{'current-mail':mail?.id == currentMail?.id}"
+                    [ngClass]="{'current-mail mat-accent-50-bg':mail?.id == currentMail?.id}"
                     [@animate]="{value:'*',params:{y:'100%'}}">
     </mail-list-item>
 </div>

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

@@ -63,11 +63,11 @@
                         <div class="toolbar-separator" *ngIf="hasSelectedMails"></div>
 
                         <button mat-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails">
-                            <mat-icon>delete</mat-icon>
+                            <mat-icon class="secondary-text">delete</mat-icon>
                         </button>
 
                         <button mat-icon-button [matMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails">
-                            <mat-icon>folder</mat-icon>
+                            <mat-icon class="secondary-text">folder</mat-icon>
                         </button>
                         <mat-menu #folderMenu="matMenu">
                             <button mat-menu-item *ngFor="let folder of folders"
@@ -76,7 +76,7 @@
                         </mat-menu>
 
                         <button mat-icon-button [matMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
-                            <mat-icon>label</mat-icon>
+                            <mat-icon class="secondary-text">label</mat-icon>
                         </button>
                         <mat-menu #labelMenu="matMenu">
                             <button mat-menu-item *ngFor="let label of labels"
@@ -87,7 +87,7 @@
 
                     <div *ngIf="currentMail" fxHide.gt-xs>
                         <button mat-icon-button (click)="deselectCurrentMail()">
-                            <mat-icon>arrow_back</mat-icon>
+                            <mat-icon class="secondary-text">arrow_back</mat-icon>
                         </button>
                     </div>
                 </div>

src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html

@@ -1,9 +1,10 @@
 <!-- SIDENAV HEADER -->
 <div fxLayout="column" fxLayoutAlign="space-between start"
-     class="header p-24 pb-4" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
+     class="header mat-accent-bg p-24 pb-4">
 
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
-        <mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</mat-icon>
+        <mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail
+        </mat-icon>
         <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>
     </div>
 
@@ -39,8 +40,9 @@
         <div class="nav-subheader">{{ 'MAIL.FOLDERS' | translate }}</div>
 
         <div class="nav-item" *ngFor="let folder of folders">
-            <a class="nav-link" matRipple [routerLink]="'/apps/mail/' + folder.handle" routerLinkActive="active">
+            <a class="nav-link" matRipple [routerLink]="'/apps/mail/' + folder.handle"
-                <mat-icon class="nav-link-icon" *ngIf="folder.icon">{{folder.icon}}</mat-icon>
+               [routerLinkActive]="['active', 'mat-accent-bg']">
+                <mat-icon class="nav-link-icon secondary-text" *ngIf="folder.icon">{{folder.icon}}</mat-icon>
                 <span>{{folder.title}}</span>
             </a>
         </div>
@@ -48,7 +50,8 @@
         <div class="nav-subheader">{{ 'MAIL.FILTERS' | translate }}</div>
 
         <div class="nav-item" *ngFor="let filter of filters">
-            <a class="nav-link" matRipple [routerLink]="'/apps/mail/filter/' + filter.handle" routerLinkActive="active">
+            <a class="nav-link" matRipple [routerLink]="'/apps/mail/filter/' + filter.handle"
+               [routerLinkActive]="['active', 'mat-accent-bg']">
                 <mat-icon class="nav-link-icon" [ngClass]="filter.color" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
                 <span>{{filter.title}}</span>
             </a>
@@ -57,7 +60,8 @@
         <div class="nav-subheader">{{ 'MAIL.LABELS' | translate }}</div>
 
         <div class="nav-item" *ngFor="let label of labels">
-            <a class="nav-link" matRipple [routerLink]="'/apps/mail/label/' + label.handle" routerLinkActive="active">
+            <a class="nav-link" matRipple [routerLink]="'/apps/mail/label/' + label.handle"
+               [routerLinkActive]="['active', 'mat-accent-bg']">
                 <mat-icon class="nav-link-icon" [ngStyle]="{'color':label.color}">label</mat-icon>
                 <span>{{label.title}}</span>
             </a>

src/app/main/apps/todo/sidenavs/main/main-sidenav.component.html

@@ -1,8 +1,10 @@
 <!-- SIDENAV HEADER -->
 <div fxLayout="column" fxLayoutAlign="space-between start"
-     class="header p-24 pb-4" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
+     class="header mat-accent-bg p-24 pb-4">
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
-        <mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">check_box</mat-icon>
+        <mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
+            check_box
+        </mat-icon>
         <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-Do</span>
     </div>
 
@@ -36,8 +38,9 @@
     <div class="nav">
 
         <div class="nav-item">
-            <a class="nav-link" matRipple [routerLink]="'/apps/todo/all'" routerLinkActive="active">
+            <a class="nav-link" matRipple [routerLink]="'/apps/todo/all'"
-                <mat-icon class="nav-link-icon">view_headline</mat-icon>
+               [routerLinkActive]="['active', 'mat-accent-bg']">
+                <mat-icon class="nav-link-icon secondary-text">view_headline</mat-icon>
                 <span>All</span>
             </a>
         </div>
@@ -45,8 +48,9 @@
         <div class="nav-subheader">FILTERS</div>
 
         <div class="nav-item" *ngFor="let filter of filters">
-            <a class="nav-link" matRipple [routerLink]="'/apps/todo/filter/' + filter.handle" routerLinkActive="active">
+            <a class="nav-link" matRipple [routerLink]="'/apps/todo/filter/' + filter.handle"
-                <mat-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
+               [routerLinkActive]="['active', 'mat-accent-bg']">
+                <mat-icon class="nav-link-icon secondary-text" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
                 <span>{{filter.title}}</span>
             </a>
         </div>
@@ -54,7 +58,8 @@
         <div class="nav-subheader">TAGS</div>
 
         <div class="nav-item" *ngFor="let tag of tags">
-            <a class="nav-link" matRipple [routerLink]="'/apps/todo/tag/' + tag.handle" routerLinkActive="active">
+            <a class="nav-link" matRipple [routerLink]="'/apps/todo/tag/' + tag.handle"
+               [routerLinkActive]="['active', 'mat-accent-bg']">
                 <mat-icon class="nav-link-icon" [ngStyle]="{'color':tag.color}">label</mat-icon>
                 <span>{{tag.title}}</span>
             </a>

src/app/main/apps/todo/todo-list/todo-list.component.html

@@ -7,7 +7,7 @@
                     ngxDraggable
                     [model]="todo"
                     (click)="readTodo(todo.id)"
-                    [ngClass]="{'current-todo':todo?.id == currentTodo?.id}"
+                    [ngClass]="{'current-todo mat-accent-50-bg':todo?.id == currentTodo?.id}"
                     matRipple
                     [@animate]="{value:'*',params:{y:'100%'}}">
     </todo-list-item>

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

@@ -63,7 +63,7 @@
                         <div class="toolbar-separator" *ngIf="hasSelectedTodos"></div>
 
                         <button mat-icon-button [matMenuTriggerFor]="labelMenu" *ngIf="hasSelectedTodos">
-                            <mat-icon>label</mat-icon>
+                            <mat-icon class="secondary-text">label</mat-icon>
                         </button>
                         <mat-menu #labelMenu="matMenu">
                             <button mat-menu-item *ngFor="let tag of tags" (click)="toggleTagOnSelectedTodos(tag.id)">
@@ -74,7 +74,7 @@
 
                     <div *ngIf="currentTodo" fxHide.gt-lg>
                         <button mat-icon-button (click)="deselectCurrentTodo()">
-                            <mat-icon>arrow_back</mat-icon>
+                            <mat-icon class="secondary-text">arrow_back</mat-icon>
                         </button>
                     </div>
 

src/app/main/pages/authentication/mail-confirm/mail-confirm.component.html

@@ -5,7 +5,7 @@
         <div id="mail-confirm-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
             <div class="logo">
-                <mat-icon class="blue-fg s-96">email</mat-icon>
+                <mat-icon class="mat-accent s-96">email</mat-icon>
             </div>
 
             <div class="title">Confirm your email address!</div>

src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.html

@@ -8,7 +8,7 @@
     <div class="center">
 
         <!-- CONTENT HEADER -->
-        <div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
+        <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
             <h2>Full width with content scroll</h2>
         </div>
         <!-- / CONTENT HEADER -->

src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.html

@@ -8,7 +8,7 @@
     <div class="center">
 
         <!-- CONTENT HEADER -->
-        <div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
+        <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
             <h2>Full width with inner scroll</h2>
         </div>
         <!-- / CONTENT HEADER -->

src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.html

@@ -8,7 +8,7 @@
     <div class="center">
 
         <!-- CONTENT HEADER -->
-        <div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
+        <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
             <h2>Full width with tabs and content scroll</h2>
         </div>
         <!-- / CONTENT HEADER -->

src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.html

@@ -8,7 +8,7 @@
     <div class="center">
 
         <!-- CONTENT HEADER -->
-        <div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
+        <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
             <h2>Full width with tabs and inner scroll</h2>
         </div>
         <!-- / CONTENT HEADER -->

src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.html

@@ -11,7 +11,7 @@
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
+            <div class="header p-24 mat-accent-bg">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->
@@ -31,7 +31,7 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header white-fg p-24">
+            <div class="header mat-accent-bg p-24">
                 <h2>Left sidenav with content scroll</h2>
             </div>
             <!-- / CONTENT HEADER -->

src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html

@@ -11,7 +11,7 @@
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
+            <div class="header mat-accent-bg p-24">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->
@@ -31,7 +31,7 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header white-fg p-24">
+            <div class="header mat-accent-bg p-24">
                 <h2>Left sidenav with inner scroll</h2>
             </div>
             <!-- / CONTENT HEADER -->

src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.html

@@ -11,7 +11,7 @@
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
+            <div class="header mat-accent-bg p-24">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->
@@ -31,7 +31,7 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header white-fg p-24">
+            <div class="header mat-accent-bg p-24">
 
                 <div fxLayout="row" fxLayoutAlign="start center">
 

src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.html

@@ -11,7 +11,7 @@
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
+            <div class="header mat-accent-bg p-24">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->
@@ -31,7 +31,7 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header white-fg p-24">
+            <div class="header mat-accent-bg p-24">
 
                 <div fxLayout="row" fxLayoutAlign="start center">
 

src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.html

@@ -10,7 +10,7 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header white-fg p-24">
+            <div class="header mat-accent-bg p-24">
                 <h2>Right sidenav with content scroll</h2>
             </div>
             <!-- / CONTENT HEADER -->
@@ -49,7 +49,7 @@
                      fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
+            <div class="header mat-accent-bg p-24">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->

src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html

@@ -10,7 +10,7 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header white-fg p-24">
+            <div class="header mat-accent-bg p-24">
                 <h2>Right sidenav with inner scroll</h2>
             </div>
             <!-- / CONTENT HEADER -->
@@ -49,7 +49,7 @@
                      fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
+            <div class="header mat-accent-bg p-24">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->

src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.html

@@ -10,7 +10,7 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header white-fg p-24">
+            <div class="header mat-accent-bg p-24">
 
                 <div fxLayout="row" fxLayoutAlign="start center">
 
@@ -130,7 +130,7 @@
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
+            <div class="header mat-accent-bg p-24">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->

src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.html

@@ -10,7 +10,7 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header white-fg p-24">
+            <div class="header mat-accent-bg p-24">
 
                 <div fxLayout="row" fxLayoutAlign="start center">
 
@@ -130,7 +130,7 @@
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
+            <div class="header mat-accent-bg p-24">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->

src/styles.scss

@@ -1,2 +1,24 @@
 // Import Fuse core library
 @import "@fuse/scss/core";
+
+// -----------------------------------------------------------------------------------------------------
+// @ Multiple material themes example
+// -----------------------------------------------------------------------------------------------------
+
+// Define the Material palettes
+$yellow-theme-primary: mat-palette($mat-fusedark);
+$yellow-theme-accent: mat-palette($mat-yellow, 600, 400, 700);
+$yellow-theme-warn: mat-palette($mat-red);
+
+// Create the Material theme object
+$yellow-theme: mat-light-theme($yellow-theme-primary, $yellow-theme-accent, $yellow-theme-warn);
+
+// Add ".yellow-theme" class to the body to activate this theme
+.yellow-theme {
+
+    // Generate the Angular Material theme
+    @include angular-material-theme($yellow-theme);
+
+    // Generate the fuse color classes with the new colors...
+    @include generateFuseColorClasses($yellow-theme-primary, $yellow-theme-accent, $yellow-theme-warn);
+}