From 46c4bc1d78e671cd09d4d5b04adfe971d58e6337 Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Wed, 17 Feb 2021 04:03:02 +0100
Subject: [PATCH 1/4] Fix for theming

---
 angular.json                      |  11 +--
 src/app/app.module.ts             |   4 +-
 src/app/services/theme.service.ts |  47 ++++++-----
 src/theme-light.scss              |  70 ----------------
 src/theme.scss                    | 135 ++++++++++++++++++++++--------
 5 files changed, 128 insertions(+), 139 deletions(-)
 delete mode 100644 src/theme-light.scss

diff --git a/angular.json b/angular.json
index 6eebf3ab..3be730c1 100644
--- a/angular.json
+++ b/angular.json
@@ -47,16 +47,7 @@
 							"node_modules/bootstrap/dist/css/bootstrap.min.css",
 							"node_modules/notosans-fontface/css/notosans-fontface.min.css",
 							"src/styles.scss",
-							{
-								"inject": true,
-								"input": "src/theme.scss",
-								"bundleName": "theme-default-dark"
-							},
-							{
-								"inject": true,
-								"input": "src/theme-light.scss",
-								"bundleName": "theme-default"
-							}
+							"src/theme.scss"
 						],
 						"scripts": []
 					},
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index af8366e4..8aafeb5e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -284,6 +284,7 @@ import { UpdatesService } from './services/updates.service';
 import { ReportIssueComponent } from './components/help/report-issue/report-issue.component';
 import { AngularReactBrowserModule } from '@angular-react/core';
 import { FabDialogModule, FabButtonModule } from '@angular-react/fabric';
+import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
 
 @NgModule({
   declarations: [
@@ -492,7 +493,8 @@ import { FabDialogModule, FabButtonModule } from '@angular-react/fabric';
     DragDropModule,
     NgxChildProcessModule,
     MATERIAL_IMPORTS,
-    NgCircleProgressModule.forRoot()
+    NgCircleProgressModule.forRoot(),
+    OverlayModule
   ],
   providers: [
     SettingsService,
diff --git a/src/app/services/theme.service.ts b/src/app/services/theme.service.ts
index e7869ba2..c2cb934a 100644
--- a/src/app/services/theme.service.ts
+++ b/src/app/services/theme.service.ts
@@ -1,6 +1,7 @@
 import { Injectable, RendererFactory2, Renderer2, Inject, EventEmitter } from '@angular/core';
 import { Observable, BehaviorSubject, combineLatest } from 'rxjs';
 import { DOCUMENT } from '@angular/common';
+import { OverlayContainer} from '@angular/cdk/overlay';
 
 @Injectable({ providedIn: 'root' })
 export class ThemeService {
@@ -17,18 +18,19 @@ export class ThemeService {
 
   constructor(
     rendererFactory: RendererFactory2,
+    private overlayContainer: OverlayContainer,
     @Inject(DOCUMENT) document: Document
   ) {
-    this.head = document.head;
-    this._renderer = rendererFactory.createRenderer(null, null);
-    this.theme$ = combineLatest(this._mainTheme$, this._darkMode$);
-    this.theme$.subscribe(async ([mainTheme, darkMode]) => {
-      const cssExt = '.css';
-      const cssFilename = darkMode ? mainTheme + '-dark' + cssExt : mainTheme + cssExt;
-      await this.loadCss(cssFilename);
-      if (this.themeLinks.length == 2)
-        this._renderer.removeChild(this.head, this.themeLinks.shift());
-    })
+    // this.head = document.head;
+    // this._renderer = rendererFactory.createRenderer(null, null);
+    // this.theme$ = combineLatest(this._mainTheme$, this._darkMode$);
+    // this.theme$.subscribe(async ([mainTheme, darkMode]) => {
+    //   const cssExt = '.css';
+    //   const cssFilename = darkMode ? mainTheme + '-dark' + cssExt : mainTheme + cssExt;
+    //   await this.loadCss(cssFilename);
+    //   if (this.themeLinks.length == 2)
+    //     this._renderer.removeChild(this.head, this.themeLinks.shift());
+    // })
   }
 
   getActualTheme() {
@@ -40,17 +42,20 @@ export class ThemeService {
   }
 
   setDarkMode(value: boolean) {
-    this._darkMode$.next(value);
-    localStorage.removeItem('theme');
-    if (value) {
-      this.savedTheme = 'dark';
-      this.themeChanged.emit(this.savedTheme);
-      localStorage.setItem('theme', 'dark');
-    } else {
-      this.savedTheme = 'light';
-      this.themeChanged.emit(this.savedTheme);
-      localStorage.setItem('theme', 'light');
-    }
+    if (value) this.overlayContainer.getContainerElement().classList.add('dark-theme');
+    if (!value) this.overlayContainer.getContainerElement().classList.add('light-theme');
+
+    // this._darkMode$.next(value);
+    // localStorage.removeItem('theme');
+    // if (value) {
+    //   this.savedTheme = 'dark';
+    //   this.themeChanged.emit(this.savedTheme);
+    //   localStorage.setItem('theme', 'dark');
+    // } else {
+    //   this.savedTheme = 'light';
+    //   this.themeChanged.emit(this.savedTheme);
+    //   localStorage.setItem('theme', 'light');
+    // }
   }
 
   private async loadCss(filename: string) {
diff --git a/src/theme-light.scss b/src/theme-light.scss
deleted file mode 100644
index 29585d89..00000000
--- a/src/theme-light.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@import '~@angular/material/theming';
-@import '~material-design-icons/iconfont/material-icons.css';
-@import '~typeface-roboto/index.css';
-
-// Include non-theme styles for core.
-@include mat-core();
-
-// Define a theme.
-$primary: mat-palette($mat-cyan, 700, 500, 900);
-$accent: mat-palette($mat-blue, A200, A100, A700);
-
-$theme: mat-light-theme($primary, $accent);
-
-$light-palette: mat-palette($mat-blue, 900, A100, A400);
-$light-background: mat-light-theme($light-palette, $primary);
-
-$mat-light-theme-background: (
-  status-bar: black,
-  app-bar: map_get($mat-blue, 900),
-  background: white,
-  hover: rgba(white, 0.04),
-  card: white,
-  dialog: white,
-  disabled-button: $white-12-opacity,
-  raised-button: white,
-  focused-button: $white-6-opacity,
-  selected-button: map_get($mat-blue, 900),
-  selected-disabled-button: map_get($mat-blue, 800),
-  disabled-button-toggle: black,
-  unselected-chip: map_get($mat-blue, 700),
-  disabled-list-option: black
-);
-
-$theme: map-merge(
-  $theme,
-  (
-    background: $mat-light-theme-background
-  )
-);
-
-@include mat-core-theme($theme);
-@include mat-autocomplete-theme($theme);
-@include mat-button-theme($theme);
-@include mat-button-toggle-theme($theme);
-@include mat-card-theme($theme);
-@include mat-checkbox-theme($theme);
-@include mat-chips-theme($theme);
-@include mat-table-theme($theme);
-@include mat-datepicker-theme($theme);
-@include mat-dialog-theme($theme);
-@include mat-expansion-panel-theme($theme);
-@include mat-form-field-theme($theme);
-@include mat-grid-list-theme($theme);
-@include mat-icon-theme($theme);
-@include mat-input-theme($theme);
-@include mat-list-theme($theme);
-@include mat-menu-theme($theme);
-@include mat-paginator-theme($theme);
-@include mat-progress-bar-theme($theme);
-@include mat-progress-spinner-theme($theme);
-@include mat-radio-theme($theme);
-@include mat-select-theme($theme);
-@include mat-sidenav-theme($theme);
-@include mat-slide-toggle-theme($theme);
-@include mat-slider-theme($theme);
-@include mat-stepper-theme($theme);
-@include mat-tabs-theme($theme);
-@include mat-toolbar-theme($light-background);
-@include mat-tooltip-theme($theme);
-@include mat-snack-bar-theme($theme);
diff --git a/src/theme.scss b/src/theme.scss
index fcd9f957..9ff7e407 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -1,16 +1,13 @@
 @import '~@angular/material/theming';
 @import '~material-design-icons/iconfont/material-icons.css';
 @import '~typeface-roboto/index.css';
-
-// Include non-theme styles for core.
 @include mat-core();
 
-// Define a theme.
 $primary: mat-palette($mat-cyan, 700, 500, 900);
 $accent: mat-palette($mat-blue-grey, A200, A100, A700);
 
-$theme: mat-dark-theme($primary, $accent);
-
+// Dark theme
+$dark-theme: mat-dark-theme($primary, $accent);
 $dark-palette: mat-palette($mat-blue-grey, 900, A100, A400);
 $dark-background: mat-dark-theme($dark-palette, $primary);
 
@@ -31,40 +28,104 @@ $mat-dark-theme-background: (
   disabled-list-option: black
 );
 
-$theme: map-merge(
-  $theme,
+$dark-theme: map-merge(
+  $dark-theme,
   (
     background: $mat-dark-theme-background
   )
 );
 
-@include mat-core-theme($theme);
-@include mat-autocomplete-theme($theme);
-@include mat-button-theme($theme);
-@include mat-button-toggle-theme($theme);
-@include mat-card-theme($theme);
-@include mat-checkbox-theme($theme);
-@include mat-chips-theme($theme);
-@include mat-table-theme($theme);
-@include mat-datepicker-theme($theme);
-@include mat-dialog-theme($theme);
-@include mat-expansion-panel-theme($theme);
-@include mat-form-field-theme($theme);
-@include mat-grid-list-theme($theme);
-@include mat-icon-theme($theme);
-@include mat-input-theme($theme);
-@include mat-list-theme($theme);
-@include mat-menu-theme($theme);
-@include mat-paginator-theme($theme);
-@include mat-progress-bar-theme($theme);
-@include mat-progress-spinner-theme($theme);
-@include mat-radio-theme($theme);
-@include mat-select-theme($theme);
-@include mat-sidenav-theme($theme);
-@include mat-slide-toggle-theme($theme);
-@include mat-slider-theme($theme);
-@include mat-stepper-theme($theme);
-@include mat-tabs-theme($theme);
-@include mat-toolbar-theme($dark-background);
-@include mat-tooltip-theme($theme);
-@include mat-snack-bar-theme($theme);
+.dark-theme {
+  @include mat-core-theme($dark-theme);
+  @include mat-autocomplete-theme($dark-theme);
+  @include mat-button-theme($dark-theme);
+  @include mat-button-toggle-theme($dark-theme);
+  @include mat-card-theme($dark-theme);
+  @include mat-checkbox-theme($dark-theme);
+  @include mat-chips-theme($dark-theme);
+  @include mat-table-theme($dark-theme);
+  @include mat-datepicker-theme($dark-theme);
+  @include mat-dialog-theme($dark-theme);
+  @include mat-expansion-panel-theme($dark-theme);
+  @include mat-form-field-theme($dark-theme);
+  @include mat-grid-list-theme($dark-theme);
+  @include mat-icon-theme($dark-theme);
+  @include mat-input-theme($dark-theme);
+  @include mat-list-theme($dark-theme);
+  @include mat-menu-theme($dark-theme);
+  @include mat-paginator-theme($dark-theme);
+  @include mat-progress-bar-theme($dark-theme);
+  @include mat-progress-spinner-theme($dark-theme);
+  @include mat-radio-theme($dark-theme);
+  @include mat-select-theme($dark-theme);
+  @include mat-sidenav-theme($dark-theme);
+  @include mat-slide-toggle-theme($dark-theme);
+  @include mat-slider-theme($dark-theme);
+  @include mat-stepper-theme($dark-theme);
+  @include mat-tabs-theme($dark-theme);
+  @include mat-toolbar-theme($dark-background);
+  @include mat-tooltip-theme($dark-theme);
+  @include mat-snack-bar-theme($dark-theme);
+}
+
+// Light theme
+$light-theme: mat-light-theme($primary, $accent);
+$light-palette: mat-palette($mat-blue, 900, A100, A400);
+$light-background: mat-light-theme($light-palette, $primary);
+
+$mat-light-theme-background: (
+  status-bar: black,
+  app-bar: map_get($mat-blue, 900),
+  background: white,
+  hover: rgba(white, 0.04),
+  card: white,
+  dialog: white,
+  disabled-button: $white-12-opacity,
+  raised-button: white,
+  focused-button: $white-6-opacity,
+  selected-button: map_get($mat-blue, 900),
+  selected-disabled-button: map_get($mat-blue, 800),
+  disabled-button-toggle: black,
+  unselected-chip: map_get($mat-blue, 700),
+  disabled-list-option: black
+);
+
+$light-theme: map-merge(
+  $light-theme,
+  (
+    background: $mat-light-theme-background
+  )
+);
+
+.light-theme {
+  @include mat-core-theme($light-theme);
+  @include mat-autocomplete-theme($light-theme);
+  @include mat-button-theme($light-theme);
+  @include mat-button-toggle-theme($light-theme);
+  @include mat-card-theme($light-theme);
+  @include mat-checkbox-theme($light-theme);
+  @include mat-chips-theme($light-theme);
+  @include mat-table-theme($light-theme);
+  @include mat-datepicker-theme($light-theme);
+  @include mat-dialog-theme($light-theme);
+  @include mat-expansion-panel-theme($light-theme);
+  @include mat-form-field-theme($light-theme);
+  @include mat-grid-list-theme($light-theme);
+  @include mat-icon-theme($light-theme);
+  @include mat-input-theme($light-theme);
+  @include mat-list-theme($light-theme);
+  @include mat-menu-theme($light-theme);
+  @include mat-paginator-theme($light-theme);
+  @include mat-progress-bar-theme($light-theme);
+  @include mat-progress-spinner-theme($light-theme);
+  @include mat-radio-theme($light-theme);
+  @include mat-select-theme($light-theme);
+  @include mat-sidenav-theme($light-theme);
+  @include mat-slide-toggle-theme($light-theme);
+  @include mat-slider-theme($light-theme);
+  @include mat-stepper-theme($light-theme);
+  @include mat-tabs-theme($light-theme);
+  @include mat-toolbar-theme($light-background);
+  @include mat-tooltip-theme($light-theme);
+  @include mat-snack-bar-theme($light-theme);
+}

From 91844ee7702d2c02cda3091643e1a093362b8dc4 Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Wed, 17 Feb 2021 16:28:00 +0100
Subject: [PATCH 2/4] Rewriting theme-service

---
 src/app/app.component.ts                      | 22 ++++--
 .../notification-box.component.ts             |  6 +-
 .../project-map/project-map.component.html    |  2 +-
 .../project-map/project-map.component.scss    |  4 ++
 .../project-map/project-map.component.ts      | 13 +++-
 src/app/services/theme.service.ts             | 67 ++++---------------
 6 files changed, 49 insertions(+), 65 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 401e4efa..ae1eba45 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostBinding, OnInit } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ElectronService } from 'ngx-electron';
@@ -6,6 +6,7 @@ import { SettingsService } from './services/settings.service';
 import { ThemeService } from './services/theme.service';
 import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
 import { ProgressService } from './common/progress/progress.service';
+import { OverlayContainer} from '@angular/cdk/overlay';
 
 @Component({
   selector: 'app-root',
@@ -14,6 +15,7 @@ import { ProgressService } from './common/progress/progress.service';
 })
 export class AppComponent implements OnInit {
   constructor(
+    private overlayContainer: OverlayContainer,
     iconReg: MatIconRegistry,
     sanitizer: DomSanitizer,
     private settingsService: SettingsService,
@@ -30,18 +32,24 @@ export class AppComponent implements OnInit {
     });
   }
 
+  @HostBinding('class') componentCssClass;
+
   ngOnInit(): void {
     if (this.electronService.isElectronApp) {
       this.settingsService.subscribe(settings => {
         this.electronService.ipcRenderer.send('settings.changed', settings);
       });
     }
-    let theme = localStorage.getItem('theme');
-    if (theme === 'light') {
-      this.themeService.setDarkMode(false);
-    } else {
-      this.themeService.setDarkMode(true);
-    }
+
+    this.applyTheme(this.themeService.savedTheme + '-theme');
+    this.themeService.themeChanged.subscribe((event: string) => {
+      this.applyTheme(event);
+    });
+  }
+
+  applyTheme(theme: string) {
+    this.overlayContainer.getContainerElement().classList.add(theme);
+    this.componentCssClass = theme;
   }
 
   checkEvent(routerEvent) : void {
diff --git a/src/app/components/notification-box/notification-box.component.ts b/src/app/components/notification-box/notification-box.component.ts
index e2768f54..6814cf5c 100644
--- a/src/app/components/notification-box/notification-box.component.ts
+++ b/src/app/components/notification-box/notification-box.component.ts
@@ -46,7 +46,11 @@ export class NotificationBoxComponent implements OnInit, OnDestroy {
         // if (!this.location.path().includes('nodes') && !(adbutler == today)) this.startTimer();
 
         if (!this.location.path().includes('nodes')) this.startTimer();
-        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
+        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
+
+        this.themeService.themeChanged.subscribe((value: string) => {
+            this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
+        });
     }
 
     ngAfterViewInit() {
diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html
index 44d2b469..60a8942b 100644
--- a/src/app/components/project-map/project-map.component.html
+++ b/src/app/components/project-map/project-map.component.html
@@ -172,7 +172,7 @@
   </div>
 
   <div *ngIf="toolbarVisibility" id="show-menu-wrapper" [ngClass]="{lightTheme: isLightThemeEnabled, shadowed: !isProjectMapMenuVisible }">
-    <button [ngClass]="{lightTheme: isLightThemeEnabled}" class="arrow-button" mat-icon-button (click)="showMenu()"><mat-icon class="unmarked">keyboard_arrow_right</mat-icon></button>
+    <button [ngClass]="{lightTheme: isLightThemeEnabled, darkTheme: !isLightThemeEnabled}" class="arrow-button" mat-icon-button (click)="showMenu()"><mat-icon class="unmarked">keyboard_arrow_right</mat-icon></button>
   </div>
 
   <div *ngIf="toolbarVisibility" id="menu-wrapper" [ngClass]="{lightTheme: isLightThemeEnabled, extended: isProjectMapMenuVisible }">
diff --git a/src/app/components/project-map/project-map.component.scss b/src/app/components/project-map/project-map.component.scss
index 8b74cc8d..a68421e6 100644
--- a/src/app/components/project-map/project-map.component.scss
+++ b/src/app/components/project-map/project-map.component.scss
@@ -35,6 +35,10 @@ img {
   color: black!important;
 }
 
+.darkTheme {
+  color: white!important;
+}
+
 #show-menu-wrapper {
   position: fixed;
   background: transparent;
diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts
index d1632be3..12c9e5a7 100644
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, ElementRef } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, ElementRef, ChangeDetectorRef } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 
 import { Observable, Subject, Subscription, from } from 'rxjs';
@@ -164,7 +164,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private notificationService: NotificationService,
     private themeService: ThemeService,
     private title: Title,
-    private nodeConsoleService: NodeConsoleService
+    private nodeConsoleService: NodeConsoleService,
+    private cd: ChangeDetectorRef
   ) {}
 
   ngOnInit() {
@@ -183,10 +184,16 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
     this.addSubscriptions();
     this.addKeyboardListeners();
+
+    this.themeService.themeChanged.subscribe((value: string) => {
+      this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
+    });
   }
 
   getSettings() {
-    this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
+    this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
+    this.cd.detectChanges();
+
     this.settings = this.settingsService.getAll();
     this.isTopologySummaryVisible = this.mapSettingsService.isTopologySummaryVisible;
     this.isConsoleVisible = this.mapSettingsService.isLogConsoleVisible;
diff --git a/src/app/services/theme.service.ts b/src/app/services/theme.service.ts
index c2cb934a..d1b19da5 100644
--- a/src/app/services/theme.service.ts
+++ b/src/app/services/theme.service.ts
@@ -1,72 +1,33 @@
-import { Injectable, RendererFactory2, Renderer2, Inject, EventEmitter } from '@angular/core';
-import { Observable, BehaviorSubject, combineLatest } from 'rxjs';
-import { DOCUMENT } from '@angular/common';
-import { OverlayContainer} from '@angular/cdk/overlay';
+import { Injectable, EventEmitter } from '@angular/core';
+import { Observable, BehaviorSubject} from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class ThemeService {
-  private _mainTheme$: BehaviorSubject<string> = new BehaviorSubject('theme-default');
   private _darkMode$: BehaviorSubject<boolean> = new BehaviorSubject(false);
-  private _renderer: Renderer2;
-  private head: HTMLElement;
-  private themeLinks: HTMLElement[] = [];
   darkMode$: Observable<boolean> = this._darkMode$.asObservable();
   theme$: Observable<[string, boolean]>;
 
   public themeChanged = new EventEmitter<string>();
   public savedTheme: string = 'dark';
 
-  constructor(
-    rendererFactory: RendererFactory2,
-    private overlayContainer: OverlayContainer,
-    @Inject(DOCUMENT) document: Document
-  ) {
-    // this.head = document.head;
-    // this._renderer = rendererFactory.createRenderer(null, null);
-    // this.theme$ = combineLatest(this._mainTheme$, this._darkMode$);
-    // this.theme$.subscribe(async ([mainTheme, darkMode]) => {
-    //   const cssExt = '.css';
-    //   const cssFilename = darkMode ? mainTheme + '-dark' + cssExt : mainTheme + cssExt;
-    //   await this.loadCss(cssFilename);
-    //   if (this.themeLinks.length == 2)
-    //     this._renderer.removeChild(this.head, this.themeLinks.shift());
-    // })
+  constructor() {
+    if (!localStorage.getItem('theme')) localStorage.setItem('theme', 'dark');
+    this.savedTheme = localStorage.getItem('theme');
   }
 
   getActualTheme() {
     return this.savedTheme;
   }
 
-  setMainTheme(name: string) {
-    this._mainTheme$.next(name);
-  }
-
   setDarkMode(value: boolean) {
-    if (value) this.overlayContainer.getContainerElement().classList.add('dark-theme');
-    if (!value) this.overlayContainer.getContainerElement().classList.add('light-theme');
-
-    // this._darkMode$.next(value);
-    // localStorage.removeItem('theme');
-    // if (value) {
-    //   this.savedTheme = 'dark';
-    //   this.themeChanged.emit(this.savedTheme);
-    //   localStorage.setItem('theme', 'dark');
-    // } else {
-    //   this.savedTheme = 'light';
-    //   this.themeChanged.emit(this.savedTheme);
-    //   localStorage.setItem('theme', 'light');
-    // }
-  }
-
-  private async loadCss(filename: string) {
-    return new Promise(resolve => {
-      const linkEl: HTMLElement = this._renderer.createElement('link');
-      this._renderer.setAttribute(linkEl, 'rel', 'stylesheet');
-      this._renderer.setAttribute(linkEl, 'type', 'text/css');
-      this._renderer.setAttribute(linkEl, 'href', filename);
-      this._renderer.setProperty(linkEl, 'onload', resolve);
-      this._renderer.appendChild(this.head, linkEl);
-      this.themeLinks = [...this.themeLinks, linkEl];
-    })
+    if (value) {
+      this.savedTheme = 'dark';
+      this.themeChanged.emit('dark-theme');
+      localStorage.setItem('theme', 'dark');
+    } else {
+      this.savedTheme = 'light';
+      this.themeChanged.emit('light-theme');
+      localStorage.setItem('theme', 'light');
+    }
   }
 }

From 6c4cdb06b26ae16c296ffa49af72f7ea1bcc52a9 Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Wed, 17 Feb 2021 18:46:16 +0100
Subject: [PATCH 3/4] Fix for icon colors

---
 src/app/app.component.html | 6 ++++--
 src/app/app.component.scss | 4 ++++
 src/theme.scss             | 2 ++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index cc3b2bf2..88014b37 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,2 +1,4 @@
-<router-outlet></router-outlet>
-<app-notification-box></app-notification-box>
+<div class="dark">
+    <router-outlet class="dark"></router-outlet>
+    <app-notification-box></app-notification-box>    
+</div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 1bc4310f..71a08bd4 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,3 +1,7 @@
 mat-menu-panel {
     min-height: 0px;
 }
+
+.dark {
+    background: #263238!important;
+}
diff --git a/src/theme.scss b/src/theme.scss
index 9ff7e407..97735557 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -36,6 +36,7 @@ $dark-theme: map-merge(
 );
 
 .dark-theme {
+  @include angular-material-theme($dark-theme);
   @include mat-core-theme($dark-theme);
   @include mat-autocomplete-theme($dark-theme);
   @include mat-button-theme($dark-theme);
@@ -66,6 +67,7 @@ $dark-theme: map-merge(
   @include mat-toolbar-theme($dark-background);
   @include mat-tooltip-theme($dark-theme);
   @include mat-snack-bar-theme($dark-theme);
+  color: white!important;
 }
 
 // Light theme

From 767dc0c9638ec00ee26f62faff85359a75067823 Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Wed, 17 Feb 2021 19:09:22 +0100
Subject: [PATCH 4/4] fix for styling dafult layout

---
 src/app/app.component.html | 4 ++--
 src/app/app.component.scss | 4 ++++
 src/app/app.component.ts   | 7 +++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 88014b37..44e53824 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="dark">
-    <router-outlet class="dark"></router-outlet>
+<div [ngClass]="{dark: darkThemeEnabled, light: !darkThemeEnabled}">
+    <router-outlet></router-outlet>
     <app-notification-box></app-notification-box>    
 </div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 71a08bd4..bad2bc18 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -5,3 +5,7 @@ mat-menu-panel {
 .dark {
     background: #263238!important;
 }
+
+.light {
+    background: white!important;
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ae1eba45..cd6c901f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -14,6 +14,8 @@ import { OverlayContainer} from '@angular/cdk/overlay';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
+  public darkThemeEnabled: boolean = false;
+
   constructor(
     private overlayContainer: OverlayContainer,
     iconReg: MatIconRegistry,
@@ -48,6 +50,11 @@ export class AppComponent implements OnInit {
   }
 
   applyTheme(theme: string) {
+    if (theme === 'dark-theme') {
+      this.darkThemeEnabled = true;
+    } else {
+      this.darkThemeEnabled = false;
+    }
     this.overlayContainer.getContainerElement().classList.add(theme);
     this.componentCssClass = theme;
   }