White theme for web UI

src/app/app.component.ts

@@ -19,6 +19,7 @@ export class AppComponent implements OnInit {
     private themeService: ThemeService
   ) {
     iconReg.addSvgIcon('gns3', sanitizer.bypassSecurityTrustResourceUrl('./assets/gns3_icon.svg'));
+    iconReg.addSvgIcon('gns3black', sanitizer.bypassSecurityTrustResourceUrl('./assets/gns3_icon_black.svg'));
   }
 
   ngOnInit(): void {

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

@@ -16,7 +16,7 @@
     (resizeEnd)="onResizeEnd($event)">
     <div class="consoleHeader">
         <div class="consoleFiltering">
-            <button class="filterButton" [matMenuTriggerFor]="filterMenu">
+            <button [ngClass]="{lightTheme: isLightThemeEnabled}" class="filterButton" [matMenuTriggerFor]="filterMenu">
                 Apply filter
             </button>
             <mat-menu #filterMenu="matMenu" xPosition="after">
@@ -34,15 +34,16 @@
         </div>
     </div>
 
-    <div #console class="console" [ngStyle]="styleInside">
+    <div [ngClass]="{lightTheme: isLightThemeEnabled}" #console class="console" [ngStyle]="styleInside">
         <span class="console-item" *ngFor="let event of filteredEvents">
             {{event.message}} <br/>
         </span>
     </div>
 
-    <div class="consoleInput">
+    <div [ngClass]="{lightTheme: isLightThemeEnabled}" class="consoleInput">
         <mat-icon class="inputIcon">keyboard_arrow_right</mat-icon>
         <input
+            [ngClass]="{lightTheme: isLightThemeEnabled}"
             class="commandLine"
             autofocus
             (keydown)="onKeyDown($event)"

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

@@ -12,7 +12,8 @@
 }
 
 .lightTheme {
-    background: #0d47a1;
+    background: white!important;
+    color: black;
 }
 
 .filterButton {

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

@@ -4,7 +4,7 @@
     (click)="startConsoleForAllNodes()"
     class="menu-button"
     >
-    <mat-icon class="unmarked">web_asset</mat-icon>
+    <mat-icon>web_asset</mat-icon>
 </button>
 <button
     matTooltip="Start/Resume all nodes"
@@ -12,7 +12,7 @@
     (click)="startNodes()"
     class="menu-button"
     >
-    <mat-icon class="unmarked">play_arrow</mat-icon>
+    <mat-icon>play_arrow</mat-icon>
 </button>
 <button
     matTooltip="Suspend all nodes"
@@ -20,7 +20,7 @@
     (click)="suspendNodes()"
     class="menu-button"
     >
-    <mat-icon class="unmarked">pause</mat-icon>
+    <mat-icon>pause</mat-icon>
 </button>
 <button
     matTooltip="Stop all nodes"
@@ -28,7 +28,7 @@
     (click)="stopNodes()"
     class="menu-button"
     >
-    <mat-icon class="unmarked">stop</mat-icon>
+    <mat-icon>stop</mat-icon>
 </button>
 <button
     matTooltip="Reload all nodes"
@@ -36,5 +36,5 @@
     (click)="reloadNodes()"
     class="menu-button"
     >
-    <mat-icon class="unmarked">replay</mat-icon>
+    <mat-icon>replay</mat-icon>
 </button>

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

@@ -11,10 +11,6 @@
     background-color: transparent;
 }
 
-.unmarked {
-    color: white!important;
-}
-
 .marked {
     color: #0097a7!important;
 }

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

@@ -3,7 +3,7 @@
     mat-icon-button
     class="menu-button"
     (click)="addDrawing('text')">
-    <mat-icon [ngClass]="{unmarked: !drawTools.isTextChosen, marked: drawTools.isTextChosen}">create</mat-icon>
+    <mat-icon [ngClass]="{unmarkedLight: !drawTools.isTextChosen && isLightThemeEnabled, marked: drawTools.isTextChosen}">create</mat-icon>
 </button>
 <input
     type="file"
@@ -16,23 +16,23 @@
     mat-icon-button
     class="menu-button"
     (click)="file.click()">
-    <mat-icon class="unmarked">image</mat-icon>
+    <mat-icon>image</mat-icon>
 </button>
 <button
     matTooltip="Draw a rectangle"
     mat-icon-button
     class="menu-button"
     (click)="addDrawing('rectangle')">
-    <mat-icon [ngClass]="{unmarked: !drawTools.isRectangleChosen, marked: drawTools.isRectangleChosen}">crop_3_2</mat-icon>
+    <mat-icon [ngClass]="{unmarkedLight: !drawTools.isRectangleChosen && isLightThemeEnabled, marked: drawTools.isRectangleChosen}">crop_3_2</mat-icon>
 </button>
 <button
     matTooltip="Draw an ellipse"
     mat-icon-button
     class="menu-button"
     (click)="addDrawing('ellipse')">
-    <mat-icon [ngClass]="{unmarked: !drawTools.isEllipseChosen, marked: drawTools.isEllipseChosen}">panorama_fish_eye</mat-icon>
+    <mat-icon [ngClass]="{unmarkedLight: !drawTools.isEllipseChosen && isLightThemeEnabled, marked: drawTools.isEllipseChosen}">panorama_fish_eye</mat-icon>
 </button>
-<button 
+<button *ngIf="!isLightThemeEnabled"
     matTooltip="Draw a line" 
     mat-icon-button class="menu-button" 
     (click)="addDrawing('line')">
@@ -46,12 +46,26 @@
         style="stroke:white;stroke-width:2"/>
     </svg>
 </button>
+<button *ngIf="isLightThemeEnabled"
+    matTooltip="Draw a line" 
+    mat-icon-button class="menu-button" 
+    (click)="addDrawing('line')">
+    <svg height="40" width="40">
+    <line
+        [ngClass]="{ selected: drawTools.isLineChosen }"
+        x1="30"
+        y1="10"
+        x2="10"
+        y2="30"
+        style="stroke:black;stroke-width:2"/>
+    </svg>
+</button>
 <button
     matTooltip="Lock or unlock all items"
     mat-icon-button
     class="menu-button"
     (click)="changeLockValue()">
-    <mat-icon [ngClass]="{unmarked: !isLocked, marked: isLocked}">lock</mat-icon>
+    <mat-icon [ngClass]="{unmarkedLight: !isLocked && isLightThemeEnabled, marked: isLocked}">lock</mat-icon>
 </button>
 <button
     matTooltip="Take a screenshot"
@@ -59,7 +73,7 @@
     class="menu-button"
     (click)="takeScreenshot()"
     >
-    <mat-icon class="unmarked">photo_camera</mat-icon>
+    <mat-icon [ngClass]="{unmarkedLight: !isLocked && isLightThemeEnabled}">photo_camera</mat-icon>
 </button>
 <app-drawing-added
   [server]="server"

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

@@ -27,6 +27,10 @@ mat-divider.divider {
     color: white!important;
 }
 
+.unmarkedLight {
+    color: black!important;
+}
+
 .marked {
     color: #0097a7!important;
 }

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

@@ -12,6 +12,7 @@ import { ElectronService } from 'ngx-electron';
 import { MatDialog } from '@angular/material';
 import { ScreenshotDialogComponent, Screenshot } from '../screenshot-dialog/screenshot-dialog.component';
 import { saveAsPng, saveAsJpeg } from 'save-html-as-image';
+import { ThemeService } from '../../../services/theme.service';
 
 
 @Component({
@@ -31,16 +32,20 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
         isTextChosen: false
     };
     public isLocked: boolean = false;
+    public isLightThemeEnabled: boolean = false;
 
     constructor(
         private toolsService: ToolsService,
         private mapSettingsService: MapSettingsService,
         private drawingService: DrawingService,
         private symbolService: SymbolService,
-        private dialog: MatDialog
+        private dialog: MatDialog,
+        private themeService: ThemeService
     ) {}
 
-    ngOnInit() {}
+    ngOnInit() {
+        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
+    }
 
     public takeScreenshot() {
         const dialogRef = this.dialog.open(ScreenshotDialogComponent, {

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

@@ -33,11 +33,15 @@
   ></app-experimental-map>
 
   <div class="project-toolbar">
-    <mat-toolbar color="primary" class="project-toolbar">
-      <mat-toolbar-row>
+    <mat-toolbar color="primary" class="project-toolbar" [ngClass]="{lightTheme: isLightThemeEnabled}">
+      <mat-toolbar-row *ngIf="!isLightThemeEnabled">
         <button matTooltip="Open menu" mat-icon-button [matMenuTriggerFor]="mainMenu"><mat-icon svgIcon="gns3"></mat-icon></button>
       </mat-toolbar-row>
 
+      <mat-toolbar-row *ngIf="isLightThemeEnabled">
+        <button matTooltip="Open menu" mat-icon-button [matMenuTriggerFor]="mainMenu"><mat-icon svgIcon="gns3black"></mat-icon></button>
+      </mat-toolbar-row>
+
       <mat-menu #mainMenu="matMenu" [overlapTrigger]="false">
         <button mat-menu-item [routerLink]="['/server', server.id, 'projects']">
           <mat-icon>work</mat-icon>

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

@@ -21,8 +21,14 @@ 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);
 }
 
+img {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
 .lightTheme {
-  background: #0d47a1!important;
+  background: white!important;
+  color: black!important;
 }
 
 #show-menu-wrapper {
@@ -98,7 +104,7 @@ mat-divider.divider {
 }
 
 .unmarked {
-  color: white!important;
+  color: black!important;
 }
 
 .marked {
@@ -111,6 +117,7 @@ mat-divider.divider {
   bottom: 20px;
   right: 20px;
   display: grid;
+  color: white;
 
   .zoom-button {
     outline: none;
@@ -118,7 +125,7 @@ mat-divider.divider {
     width: 40px;
     background: transparent;
     border: none;
-    color: white;
+    color: black;
     font-size: 1.25rem;
     font-weight: bold;
 

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

@@ -12,7 +12,8 @@
 }
 
 .lightTheme {
-    background: #0d47a1;
+    background: white!important;
+    color: black;
 }
 
 .summaryHeaderMenu {