simple theming

+ modified the native webkit scrollbar styles a bit
+ todo & mail app sidenav header colors
+ added a way to disable perfect-scrollbars

src/app/app.module.ts

@@ -19,10 +19,6 @@ import { UIModule } from './main/content/ui/ui.module';
 import { ComponentsModule } from './main/content/components/components.module';
 import { FuseSplashScreenService } from './core/services/splash-screen.service';
 
-const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
-    suppressScrollX: true
-};
-
 const appRoutes: Routes = [
     {
         path        : 'apps/mail',
@@ -68,7 +64,7 @@ const appRoutes: Routes = [
 
         InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 125}),
 
-        PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG),
+        PerfectScrollbarModule.forRoot(),
 
         FuseMainModule,
 

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

@@ -105,6 +105,50 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     }
 }
 
+@mixin generateMaterialElementColors($contrastColor) {
+
+    // If the contrast color is white...
+    $foreground: $mat-dark-theme-foreground;
+
+    // If the contrast color is black...
+    @if (rgba(black, 1) == rgba($contrastColor, 1)) {
+        $foreground: $mat-light-theme-foreground;
+    }
+
+    // Input
+    .mat-input-placeholder {
+        color: mat-color($foreground, hint-text);
+    }
+
+    .mat-input-underline {
+        background-color: mat-color($foreground, divider);
+    }
+
+    // Select
+    .mat-select-trigger,
+    .mat-select-arrow {
+        color: mat-color($foreground, hint-text);
+    }
+
+    .mat-select-underline {
+        background-color: mat-color($foreground, divider);
+    }
+
+    .mat-select-disabled .mat-select-value,
+    .mat-select-arrow,
+    .mat-select-trigger {
+        color: mat-color($foreground, hint-text);
+    }
+
+    .mat-select-content, .mat-select-panel-done-animating {
+        background: mat-color($background, card);
+    }
+
+    .mat-select-value {
+        color: mat-color($foreground, text);
+    }
+}
+
 // Color classes generator mixin
 @mixin generateColorClasses($colorName, $color, $contrastColor, $hue) {
 
@@ -119,6 +163,10 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         // Generate text color levels
         // based on current contrast color
         @include generateTextColorLevels($contrastColor);
+
+        // Generate material element colors
+        // based on current contrast color
+        @include generateMaterialElementColors($contrastColor);
     }
 
     .#{$colorName}#{$hue}-fg {
@@ -127,6 +175,10 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         // Generate text color levels
         // based on current contrast color
         @include generateTextColorLevels($color);
+
+        // Generate material element colors
+        // based on current contrast color
+        @include generateMaterialElementColors($color);
     }
 
     .#{$colorName}#{$hue}-border {

src/app/core/scss/partials/_scrollbars.scss

@@ -1,19 +1,20 @@
 ::-webkit-scrollbar {
-    width: 8px;
+    width: 12px;
-    height: 8px;
+    height: 12px;
     background-color: rgba(0, 0, 0, 0);
-    opacity: 0;
+}
-    border-radius: 100px;
+
-    &:hover {
+::-webkit-scrollbar:hover {
-        background-color: #EEE;
+    background-color: rgba(0, 0, 0, 0.12);
-        opacity: 0.9;
-    }
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: #AAA;
+    border: 2px solid transparent;
-    border-radius: 100px;
+    box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
-    &:active {
+    border-radius: 24px;
-        background: #999;
+}
-    }
+
+::-webkit-scrollbar-thumb:active {
+    box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
+    border-radius: 24px;
 }

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

@@ -1,7 +1,8 @@
 <!-- SIDENAV HEADER -->
-<div class="header white-fg p-24" fxLayout="column" fxLayoutAlign="space-between start">
+<div fxLayout="column" fxLayoutAlign="space-between start"
+     class="header p-24 md-accent-bg" class.gt-md="header p-24 white-fg">
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
-        <md-icon class="logo-icon s-32 white-fg">mail</md-icon>
+        <md-icon class="logo-icon s-32">mail</md-icon>
         <span class="logo-text">Mailbox</span>
     </div>
 

src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.scss

@@ -14,6 +14,7 @@
 
             .logo-text {
                 font-size: 24px;
+                line-height: 24px;
             }
         }
 

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

@@ -1,7 +1,8 @@
 <!-- SIDENAV HEADER -->
-<div class="header white-fg p-24" fxLayout="column" fxLayoutAlign="space-between start">
+<div fxLayout="column" fxLayoutAlign="space-between start"
+     class="header p-24 md-accent-bg" class.gt-md="header p-24 white-fg">
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
-        <md-icon class="logo-icon s-32 white-fg">check_box</md-icon>
+        <md-icon class="logo-icon s-32">check_box</md-icon>
         <span class="logo-text">To-do</span>
     </div>
 

src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.scss

@@ -14,6 +14,7 @@
 
             .logo-text {
                 font-size: 24px;
+                line-height: 24px;
             }
         }
 

src/app/main/main.component.scss

@@ -1,9 +1,24 @@
+@import "src/app/core/scss/fuse";
+
 fuse-main {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
 
+    &.disable-perfect-scrollbar {
+
+        .ps {
+            -webkit-overflow-scrolling: touch !important;
+            overflow: auto !important;
+        }
+
+        .ps__scrollbar-x-rail,
+        .ps__scrollbar-y-rail {
+            display: none !important;
+        }
+    }
+
     > .mat-sidenav-container {
         display: flex;
         flex: 1;
@@ -14,6 +29,10 @@ fuse-main {
             overflow: hidden;
             height: 100vh;
 
+            @include media-breakpoint-down('sm') {
+                height: auto !important;
+            }
+
             #fuse-main-content {
                 display: flex;
                 flex: 1;