[AAE-14030] Custom header text color is not working on apa (#8592)

* [AAE-14030] Custom header text color is not working on apa

* CR

* Fix for demo app

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -138,7 +138,7 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
         this.headerService.headerTextColor
             .pipe(takeUntil(this.onDestroy$))
             .subscribe(headerTextColor => {
-                document.documentElement.style.setProperty('--theme-primary-color-default-contrast', headerTextColor);
+                document.documentElement.style.setProperty('--theme-header-text-color', headerTextColor);
             });
 
         this.headerService.logo

lib/core/src/lib/app-config/app-config.service.ts

@@ -18,7 +18,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ObjectUtils } from '../common/utils/object-utils';
-import { Observable, Subject } from 'rxjs';
+import { Observable, ReplaySubject } from 'rxjs';
 import { map, distinctUntilChanged, take } from 'rxjs/operators';
 import { ExtensionConfig, ExtensionService, mergeObjects } from '@alfresco/adf-extensions';
 import { OpenidConfiguration } from '../auth/interfaces/openid-configuration.interface';
@@ -70,11 +70,11 @@ export class AppConfigService {
     };
 
     status: Status = Status.INIT;
-    protected onLoadSubject: Subject<any>;
+    protected onLoadSubject: ReplaySubject<any>;
     onLoad: Observable<any>;
 
     constructor(protected http: HttpClient, protected extensionService: ExtensionService) {
-        this.onLoadSubject = new Subject();
+        this.onLoadSubject = new ReplaySubject();
         this.onLoad = this.onLoadSubject.asObservable();
 
         extensionService.setup$.subscribe((config) => {

lib/core/src/lib/layout/components/header/header.component.html

@@ -32,6 +32,7 @@
         >
         {{ title }}
     </h1>
+
     <ng-content></ng-content>
 
     <button

lib/core/src/lib/layout/components/header/header.component.scss

@@ -1,5 +1,5 @@
 adf-layout-header .mat-toolbar-single-row {
-    color: var(--theme-primary-color-default-contrast) !important;
+    color: var(--theme-header-text-color) !important;
     background-color: var(--theme-primary-color);
     position: relative;
     padding: 0 24px;

lib/core/src/lib/layout/components/header/header.component.ts

@@ -17,6 +17,8 @@
 
 import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
+import { AppConfigService } from '../../../app-config/app-config.service';
+import { filter, take } from 'rxjs/operators';
 
 @Component({
     selector: 'adf-layout-header',
@@ -59,6 +61,19 @@ export class HeaderLayoutComponent implements OnInit {
     /** The side of the page that the drawer is attached to (can be 'start' or 'end') */
     @Input() position = 'start';
 
+    constructor(
+        private appConfigService: AppConfigService
+    ) {
+        this.appConfigService.select('headerTextColor')
+            .pipe(
+                filter((textColor) => !!textColor),
+                take(1)
+            )
+            .subscribe((textColor) => {
+                document.documentElement.style.setProperty('--theme-header-text-color', textColor);
+            });
+    }
+
     toggleMenu() {
         this.clicked.emit(true);
         this.expandedSidenav = !this.expandedSidenav;

lib/core/src/lib/styles/_index.scss

@@ -29,6 +29,7 @@
         // theme colors
         --theme-primary-color: mat.get-color-from-palette($primary),
         --theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast),
+        --theme-header-text-color: mat.get-color-from-palette($primary, default-contrast),
         --adf-theme-primary-50:mat.get-color-from-palette($primary, 50),
         --adf-theme-primary-100:mat.get-color-from-palette($primary, 100),
         --adf-theme-primary-300:mat.get-color-from-palette($primary, 300),