Rewriting theme-service

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.applyTheme(this.themeService.savedTheme + '-theme');
-      this.themeService.setDarkMode(false);
+    this.themeService.themeChanged.subscribe((event: string) => {
-    } else {
+      this.applyTheme(event);
-      this.themeService.setDarkMode(true);
+    });
   }
+
+  applyTheme(theme: string) {
+    this.overlayContainer.getContainerElement().classList.add(theme);
+    this.componentCssClass = theme;
   }
 
   checkEvent(routerEvent) : void {

src/app/components/notification-box/notification-box.component.ts

@@ -47,6 +47,10 @@ export class NotificationBoxComponent implements OnInit, OnDestroy {
 
         if (!this.location.path().includes('nodes')) this.startTimer();
         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() {

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 }">

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;

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.cd.detectChanges();
+
     this.settings = this.settingsService.getAll();
     this.isTopologySummaryVisible = this.mapSettingsService.isTopologySummaryVisible;
     this.isConsoleVisible = this.mapSettingsService.isLogConsoleVisible;

src/app/services/theme.service.ts

@@ -1,72 +1,33 @@
-import { Injectable, RendererFactory2, Renderer2, Inject, EventEmitter } from '@angular/core';
+import { Injectable, EventEmitter } from '@angular/core';
-import { Observable, BehaviorSubject, combineLatest } from 'rxjs';
+import { Observable, BehaviorSubject} from 'rxjs';
-import { DOCUMENT } from '@angular/common';
-import { OverlayContainer} from '@angular/cdk/overlay';
 
 @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(
+  constructor() {
-    rendererFactory: RendererFactory2,
+    if (!localStorage.getItem('theme')) localStorage.setItem('theme', 'dark');
-    private overlayContainer: OverlayContainer,
+    this.savedTheme = localStorage.getItem('theme');
-    @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());
-    // })
   }
 
   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) {
-    if (!value) this.overlayContainer.getContainerElement().classList.add('light-theme');
+      this.savedTheme = 'dark';
-
+      this.themeChanged.emit('dark-theme');
-    // this._darkMode$.next(value);
+      localStorage.setItem('theme', 'dark');
-    // localStorage.removeItem('theme');
+    } else {
-    // if (value) {
+      this.savedTheme = 'light';
-    //   this.savedTheme = 'dark';
+      this.themeChanged.emit('light-theme');
-    //   this.themeChanged.emit(this.savedTheme);
+      localStorage.setItem('theme', 'light');
-    //   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];
-    })
   }
 }