Light theme added for non-material components

src/app/app.component.ts

@@ -27,6 +27,6 @@ export class AppComponent implements OnInit {
         this.electronService.ipcRenderer.send('settings.changed', settings);
       });
     }
-    this.themeService.setDarkMode(false);
+    // this.themeService.setDarkMode(false);
   }
 }

src/app/components/adbutler/adbutler.component.scss

@@ -1,5 +1,5 @@
 .ad {
-  background-color: #263238;
+  background-color: transparent;
   width: 400px;
   padding-top: 10px;
   padding-bottom: 10px;

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

@@ -1,7 +1,7 @@
 <div class="notification-box" [ngClass]="{hidden: !isVisible}">
     <mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
     <div style="display: flex; height: 102px;">
-        <div class="content">
+        <div class="content" [ngClass]="{lightTheme: isLightThemeEnabled}">
             <app-adbutler (onLoad)="onLoadingAdbutler($event)" theme="dark"></app-adbutler>
             <mat-icon (click)="closeNotification()" class="close-button">close</mat-icon>
         </div>

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

@@ -14,6 +14,10 @@
     border-bottom: 2px solid #0097a7;
 }
 
+.lightTheme {
+    background-color: white;
+}
+
 .close-button {
     position: fixed;
     bottom: 90px;

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

@@ -1,5 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { timer, Observable, Subscription } from 'rxjs';
+import { ThemeService } from '../../services/theme.service';
 
 @Component({
     selector: 'app-notification-box',
@@ -22,11 +23,15 @@ export class NotificationBoxComponent implements OnInit, OnDestroy {
     breakTime: number = 20;
     isEndless: boolean = false;
     numberOfViews: number = 1;
+    isLightThemeEnabled: boolean = false;
 
-    constructor(){}
+    constructor(
+        private themeService: ThemeService
+    ){}
 
     ngOnInit() {
         this.startTimer();
+        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
     }
 
     startTimer() {

src/app/components/project-map/log-console/log-console.component.html

@@ -5,6 +5,7 @@
 </div>
 <div 
     class="consoleWrapper"
+    [ngClass]="{lightTheme: isLightThemeEnabled}"
     (mousedown)="toggleDragging(true)"
     [ngStyle]="style" 
     mwlResizable

src/app/components/project-map/log-console/log-console.component.scss

@@ -11,8 +11,12 @@
     font-size: 12px;
 }
 
+.lightTheme {
+    background: #0d47a1;
+}
+
 .filterButton {
-    background: #263238;
+    background: transparent;
     color: white;
     border: none;
     margin-top: 0px;
@@ -54,7 +58,7 @@
 }
 
 .commandLine {
-    background-color: #263238;
+    background-color: transparent;
     color: white;
     border: none;
 }

src/app/components/project-map/log-console/log-console.component.ts

@@ -13,6 +13,7 @@ import { LogEventsDataSource } from './log-events-datasource';
 import { HttpServer } from '../../../services/http-server.service';
 import { LogEvent } from '../../../models/logEvent';
 import { ResizeEvent } from 'angular-resizable-element';
+import { ThemeService } from '../../../services/theme.service';
 
 
 @Component({
@@ -49,16 +50,19 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
     public styleInside: object = { height: `120px` };
 
     isDraggingEnabled: boolean = false;
+    public isLightThemeEnabled: boolean = false;
 
     constructor(
         private projectWebServiceHandler: ProjectWebServiceHandler,
         private nodeService: NodeService,
         private nodesDataSource: NodesDataSource,
         private logEventsDataSource: LogEventsDataSource,
-        private httpService: HttpServer
+        private httpService: HttpServer,
+        private themeService: ThemeService
     ) {}
     
     ngOnInit() {
+        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
         this.nodeSubscription = this.projectWebServiceHandler.nodeNotificationEmitter.subscribe((event) => {
             let node: Node = event.event as Node;
             let message: string = '';

src/app/components/project-map/nodes-menu/nodes-menu.component.scss

@@ -5,7 +5,7 @@
     width: 40px;
     margin-right: 12px !important;
     margin-left: 12px !important;
-    background: #263238;
+    background: transparent;
     padding: 0;
     border: none;
     background-color: transparent;

src/app/components/project-map/project-map-menu/project-map-menu.component.scss

@@ -5,7 +5,7 @@
     width: 40px;
     margin-right: 12px !important;
     margin-left: 12px !important;
-    background: #263238;
+    background: transparent;
     padding: 0;
     border: none;
     background-color: transparent;

src/app/components/project-map/project-map.component.html

@@ -145,11 +145,11 @@
     </mat-toolbar>
   </div>
 
-  <div id="show-menu-wrapper" [ngClass]="{ shadowed: !isProjectMapMenuVisible }" *ngIf="!readonly">
+  <div id="show-menu-wrapper" [ngClass]="{lightTheme: isLightThemeEnabled, shadowed: !isProjectMapMenuVisible }" *ngIf="!readonly">
     <button class="arrow-button" mat-icon-button (click)="showMenu()"><mat-icon class="unmarked">keyboard_arrow_right</mat-icon></button>
   </div>
 
-  <div id="menu-wrapper" [ngClass]="{ extended: isProjectMapMenuVisible }">
+  <div id="menu-wrapper" [ngClass]="{lightTheme: isLightThemeEnabled, extended: isProjectMapMenuVisible }">
     <app-nodes-menu [server]="server" [project]="project"></app-nodes-menu>
     <mat-divider class="divider" [vertical]="true"></mat-divider>
     <app-project-map-menu [server]="server" [project]="project"></app-project-map-menu>
@@ -159,7 +159,7 @@
   <app-context-menu [project]="project" [server]="server"></app-context-menu>
 </div>
 
-<div id="zoom-buttons">
+<div [ngClass]="{lightTheme: isLightThemeEnabled}" class="zoom-buttons">
   <button class="zoom-button" (click)="zoomIn()"><mat-icon>zoom_in</mat-icon></button>
   <button class="zoom-button" (click)="resetZoom()"><mat-icon>adjust</mat-icon></button>
   <button class="zoom-button" (click)="zoomOut()"><mat-icon>zoom_out</mat-icon></button>

src/app/components/project-map/project-map.component.scss

@@ -21,6 +21,10 @@ g.node:hover {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
+.lightTheme {
+  background: #0d47a1!important;
+}
+
 #show-menu-wrapper {
   position: fixed;
   background: transparent;
@@ -66,7 +70,7 @@ g.node:hover {
     width: 40px;
     margin-right: 12px !important;
     margin-left: 12px !important;
-    background: #263238;
+    background: transparent;
     padding: 0;
     border: none;
     background-color: transparent;
@@ -101,7 +105,7 @@ mat-divider.divider {
   color: #0097a7!important;
 }
 
-#zoom-buttons {
+.zoom-buttons {
   position: fixed;
   background: #263238;
   bottom: 20px;
@@ -112,7 +116,7 @@ mat-divider.divider {
     outline: none;
     height: 40px;
     width: 40px;
-    background: #263238;
+    background: transparent;
     border: none;
     color: white;
     font-size: 1.25rem;
@@ -122,21 +126,6 @@ mat-divider.divider {
       margin-left: -6px;
     }
   }
-
-  .zoom-button-white {
-    outline: none;
-    height: 40px;
-    width: 40px;
-    color: #263238;
-    border: none;
-    background: white;
-    font-size: 1.25rem;
-    font-weight: bold;
-
-    mat-icon {
-      margin-left: -6px;
-    }
-  } 
 }
 
 @-moz-document url-prefix() {

src/app/components/project-map/project-map.component.ts

@@ -65,6 +65,7 @@ import { NavigationDialogComponent } from '../projects/navigation-dialog/navigat
 import { ConfirmationBottomSheetComponent } from '../projects/confirmation-bottomsheet/confirmation-bottomsheet.component';
 import { NodeAddedEvent } from '../template/template-list-dialog/template-list-dialog.component';
 import { NotificationService } from '../../services/notification.service';
+import { ThemeService } from '../../services/theme.service';
 
 
 @Component({
@@ -102,6 +103,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   private scrollX: number = 0;
   private scrollY: number = 0;
   private scrollEnabled: boolean = false;
+  public isLightThemeEnabled: boolean = false;
 
   @ViewChild(ContextMenuComponent, {static: false}) contextMenu: ContextMenuComponent;
   @ViewChild(D3MapComponent, {static: false}) mapChild: D3MapComponent;
@@ -150,10 +152,12 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private ethernetLinkWidget: EthernetLinkWidget,
     private serialLinkWidget: SerialLinkWidget,
     private bottomSheet: MatBottomSheet,
-    private notificationService: NotificationService
+    private notificationService: NotificationService,
+    private themeService: ThemeService
   ) {}
 
   ngOnInit() {
+    this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
     this.settings = this.settingsService.getAll();
     this.isTopologySummaryVisible = this.mapSettingsService.isTopologySummaryVisible;
     this.isConsoleVisible = this.mapSettingsService.isLogConsoleVisible;

src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.html

@@ -1,4 +1,4 @@
-<div class="dialogWrapper">
+<div class="dialogWrapper" [ngClass]="{lightTheme: isLightThemeEnabled}">
     <div class="title">{{message}}</div>
     <div>
         <button mat-button (click)="onNoClick()">No</button>

src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.scss

@@ -7,8 +7,8 @@
     align-items: center;
 }
 
-mat-bottom-sheet-container {
+.lightTheme {
-    background: #263238;
+    background-color: white;
 }
 
 .title {

src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA, MatBottomSheetRef } from '@angular/material';
+import { ThemeService } from '../../../services/theme.service';
 
 @Component({
   selector: 'app-confirmation-bottomsheet',
@@ -8,10 +9,16 @@ import { MatDialogRef, MAT_DIALOG_DATA, MatBottomSheetRef } from '@angular/mater
 })
 export class ConfirmationBottomSheetComponent implements OnInit {
     message: string = '';
+    isLightThemeEnabled: boolean = false;
 
-    constructor(private bottomSheetRef: MatBottomSheetRef<ConfirmationBottomSheetComponent>) {}
+    constructor(
+        private bottomSheetRef: MatBottomSheetRef<ConfirmationBottomSheetComponent>,
+        private themeService: ThemeService
+    ) {}
 
-    ngOnInit() {}
+    ngOnInit() {
+        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
+    }
 
     onNoClick(): void {
         this.bottomSheetRef.dismiss(false);

src/app/components/projects/navigation-dialog/navigation-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="dialogWrapper">
+<div class="dialogWrapper" [ngClass]="{lightTheme: isLightThemeEnabled}">
     <div class="title"> Do you want to navigate to {{projectMessage}}?</div>
     <div>
         <button mat-button (click)="onNoClick()">No</button>

src/app/components/projects/navigation-dialog/navigation-dialog.component.scss

@@ -7,8 +7,8 @@
     align-items: center;
 }
 
-mat-bottom-sheet-container {
+.lightTheme {
-    background: #263238;
+    background-color: white;
 }
 
 .title {

src/app/components/projects/navigation-dialog/navigation-dialog.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA, MatBottomSheetRef } from '@angular/material';
+import { ThemeService } from '../../../services/theme.service';
 
 @Component({
   selector: 'app-navigation-dialog',
@@ -8,10 +9,16 @@ import { MatDialogRef, MAT_DIALOG_DATA, MatBottomSheetRef } from '@angular/mater
 })
 export class NavigationDialogComponent implements OnInit {
     projectMessage: string = '';
+    isLightThemeEnabled: boolean = false;
 
-    constructor(private bottomSheetRef: MatBottomSheetRef<NavigationDialogComponent>) {}
+    constructor(
+        private bottomSheetRef: MatBottomSheetRef<NavigationDialogComponent>,
+        private themeService: ThemeService
+    ) {}
 
-    ngOnInit() {}
+    ngOnInit() {
+        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
+    }
 
     onNoClick(): void {
         this.bottomSheetRef.dismiss(false);

src/app/components/topology-summary/topology-summary.component.html

@@ -8,6 +8,7 @@
     (mousedown)="toggleDragging(true)"
     *ngIf="projectsStatistics" 
     [ngStyle]="style" 
+    [ngClass]="{lightTheme: isLightThemeEnabled}"
     mwlResizable
     [validateResize]="validate"
     [resizeEdges]="{ right: true, left: true, bottom: true, top: true }"

src/app/components/topology-summary/topology-summary.component.scss

@@ -11,6 +11,10 @@
     font-size: 12px;
 }
 
+.lightTheme {
+    background: #0d47a1;
+}
+
 .summaryHeaderMenu {
     height: 24px;
 }

src/app/components/topology-summary/topology-summary.component.ts

@@ -10,6 +10,7 @@ import { Compute } from '../../models/compute';
 import { ComputeService } from '../../services/compute.service';
 import { LinksDataSource } from '../../cartography/datasources/links-datasource';
 import { ResizeEvent } from 'angular-resizable-element';
+import { ThemeService } from '../../services/theme.service';
 
 
 @Component({
@@ -36,18 +37,21 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
     captureFilterEnabled: boolean = false;
     packetFilterEnabled: boolean = false;
     computes: Compute[] = [];
-    isTopologyVisible: boolean = true;
     
+    isTopologyVisible: boolean = true;
     isDraggingEnabled: boolean = false;
+    isLightThemeEnabled: boolean = false;
 
     constructor(
         private nodesDataSource: NodesDataSource,
         private projectService: ProjectService,
         private computeService: ComputeService,
-        private linksDataSource: LinksDataSource
+        private linksDataSource: LinksDataSource,
+        private themeService: ThemeService
     ) {}
 
     ngOnInit() {
+        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
         this.subscriptions.push(
             this.nodesDataSource.changes.subscribe((nodes: Node[]) => {
                 this.nodes = nodes;

src/app/services/theme.service.ts

@@ -1,23 +1,21 @@
-import { Injectable, RendererFactory2, Renderer2, Inject } from '@angular/core';
+import { Injectable, RendererFactory2, Renderer2, Inject, EventEmitter } from '@angular/core';
 import { Observable, BehaviorSubject, combineLatest } from 'rxjs';
 import { DOCUMENT } from '@angular/common';
 
-@Injectable({
+@Injectable({ providedIn: 'root' })
-  providedIn: 'root'
-})
 export class ThemeService {
-
   private _mainTheme$: BehaviorSubject<string> = new BehaviorSubject('theme-default');
   private _darkMode$: BehaviorSubject<boolean> = new BehaviorSubject(false);
-
-  darkMode$: Observable<boolean> = this._darkMode$.asObservable();
-
   private _renderer: Renderer2;
   private head: HTMLElement;
   private themeLinks: HTMLElement[] = [];
-
+  darkMode$: Observable<boolean> = this._darkMode$.asObservable();
   theme$: Observable<[string, boolean]>;
 
+  public themeChanged = new EventEmitter<string>();
+  //this should taken from memory
+  public savedTheme: string = 'light';
+
   constructor(
     rendererFactory: RendererFactory2,
     @Inject(DOCUMENT) document: Document
@@ -34,12 +32,23 @@ export class ThemeService {
     })
   }
 
+  getActualTheme() {
+    return this.savedTheme;
+  }
+
   setMainTheme(name: string) {
     this._mainTheme$.next(name);
   }
 
   setDarkMode(value: boolean) {
     this._darkMode$.next(value);
+    if (value) {
+      this.savedTheme = 'dark';
+      this.themeChanged.emit(this.savedTheme);
+    } else {
+      this.savedTheme = 'light';
+      this.themeChanged.emit(this.savedTheme);
+    }
   }
 
   private async loadCss(filename: string) {