Fixed: Toolbar background color issues

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

@@ -1,6 +1,6 @@
 <div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}">
 
-    <div class="fuse-search-bar-content" [ngClass]="toolbarColor">
+    <div class="fuse-search-bar-content" [ngClass]="fuseConfig.layout.toolbar.background">
 
         <label for="fuse-search-bar-input">
             <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"

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

@@ -13,10 +13,9 @@ export class FuseSearchBarComponent implements OnInit, OnDestroy
 {
     collapsed: boolean;
     fuseConfig: any;
-    toolbarColor: string;
 
     @Output()
-    onInput: EventEmitter<any>;
+    input: EventEmitter<any>;
 
     // Private
     private _unsubscribeAll: Subject<any>;
@@ -31,7 +30,7 @@ export class FuseSearchBarComponent implements OnInit, OnDestroy
     )
     {
         // Set the defaults
-        this.onInput = new EventEmitter();
+        this.input = new EventEmitter();
         this.collapsed = true;
 
         // Set the private defaults
@@ -52,7 +51,7 @@ export class FuseSearchBarComponent implements OnInit, OnDestroy
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(
                 (config) => {
-                    this.toolbarColor = config.layout.toolbar.background;
+                    this.fuseConfig = config;
                 }
             );
     }
@@ -94,9 +93,7 @@ export class FuseSearchBarComponent implements OnInit, OnDestroy
      */
     search(event): void
     {
-        const value = event.target.value;
+        this.input.emit(event.target.value);
-
-        this.onInput.emit(value);
     }
 
 }

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

@@ -7,7 +7,7 @@
         </button>
     </div>
 
-    <div class="shortcuts" fxHide fxShow.gt-sm [ngClass]="toolbarColor">
+    <div class="shortcuts" fxHide fxShow.gt-sm>
 
         <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="0 1 auto">
 

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

@@ -6,7 +6,6 @@ import { takeUntil } from 'rxjs/operators';
 
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
-import { FuseConfigService } from '@fuse/services/config.service';
 
 @Component({
     selector   : 'fuse-shortcuts',
@@ -20,7 +19,6 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     filteredNavigationItems: any[];
     searching: boolean;
     mobileShortcutsPanelActive: boolean;
-    toolbarColor: string;
 
     @Input()
     navigation: any;
@@ -41,12 +39,10 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
      * @param {CookieService} _cookieService
      * @param {FuseMatchMediaService} _fuseMatchMediaService
      * @param {FuseNavigationService} _fuseNavigationService
-     * @param {FuseConfigService} _fuseConfigService
      * @param {ObservableMedia} _observableMedia
      */
     constructor(
         private _cookieService: CookieService,
-        private _fuseConfigService: FuseConfigService,
         private _fuseMatchMediaService: FuseMatchMediaService,
         private _fuseNavigationService: FuseNavigationService,
         private _observableMedia: ObservableMedia,
@@ -71,15 +67,6 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to config changes
-        this._fuseConfigService.config
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(
-                (config) => {
-                    this.toolbarColor = config.layout.toolbar.background;
-                }
-            );
-
         // Get the navigation items and flatten them
         this.filteredNavigationItems = this.navigationItems = this._fuseNavigationService.getFlatNavigation(this.navigation);
 

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

@@ -58,7 +58,7 @@
 
             <div class="toolbar-separator"></div>
 
-            <fuse-search-bar (onInput)="search($event)"></fuse-search-bar>
+            <fuse-search-bar (input)="search($event)"></fuse-search-bar>
 
             <div class="toolbar-separator"></div>
 

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

@@ -26,7 +26,7 @@
             <p class="py-8">
                 <fuse-highlight lang="html">
                     <textarea #source>
-                        <fuse-search-bar (onInput)="search($event)"></fuse-search-bar>
+                        <fuse-search-bar (input)="search($event)"></fuse-search-bar>
                     </textarea>
                 </fuse-highlight>
             </p>
@@ -35,7 +35,7 @@
         <div class="my-48">
             <h2>Outputs</h2>
             <p class="py-8" fxLayout="row" fxLayoutAlign="start center">
-                <code class="mr-8">onInput</code>
+                <code class="mr-8">input</code>
                 <span>Triggers every time an input occurs within the search bar. Can be used to trigger the actual
                     search mechanism. The $event is the value from the search input.
                 </span>