Add custom h1 color to slides

Uses css-variabled and dom manipulation to change
the projectors h1 color on the fly.
Will have issues with multiple projectors nested in the same view

client/src/app/shared/components/projector/projector.component.scss

@@ -1,3 +1,9 @@
+// should be better using @host binding, but does not work
+// https://github.com/angular/angular/issues/9343
+:host-context(.os-slide-container) {
+    --header-h1-color: #000;
+}
+
 #container {
     background-color: lightgoldenrodyellow;
     position: relative;
@@ -11,6 +17,11 @@
         font-size: 22px !important;
         line-height: 24px !important;
 
+        // shadow pierce all children of projector to overwrite the h1 color
+        ::ng-deep h1 {
+            color: var(--header-h1-color);
+        }
+
         #header {
             position: absolute;
             top: 0;

client/src/app/shared/components/projector/projector.component.ts

@@ -55,6 +55,9 @@ export class ProjectorComponent extends BaseComponent implements OnDestroy {
             this.projectorStyle['background-color'] = projector.background_color;
             this.headerFooterStyle.color = projector.header_font_color;
             this.headerFooterStyle['background-color'] = projector.header_background_color;
+
+            // alter the local scope css variable with the header_h1_color
+            document.documentElement.style.setProperty('--header-h1-color', this.projector.header_h1_color);
         }
     }
 

client/src/assets/styles/projector.scss

@@ -6,10 +6,10 @@
         font-family: 'Material Icons';
     }
 
-
     h2 {
         line-height: 40px;
     }
+
     h3 {
         color: #222;
         margin-bottom: 10px;
@@ -25,6 +25,7 @@
             margin-bottom: 0;
             padding-bottom: 0;
         }
+
         h2 {
             color: #9a9898;
             margin-top: 10px;