Fix styles for light theme

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

@@ -21,7 +21,7 @@
     (mousedown)="toggleDragging(true)"
     [ngStyle]="style"> -->
 
-    <div class="consoleHeader">
+    <div class="consoleHeader" [ngClass]="{lightThemeConsoleHeader: isLightThemeEnabled}">
         <mat-tab-group class="tabs" [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
             <mat-tab>
                 <ng-template mat-tab-label>
@@ -32,7 +32,7 @@
             <mat-tab *ngFor="let node of nodes; let index = index" [label]="tab">
                 <ng-template mat-tab-label>
                     <div class="col" style="margin-left: 20px;">{{node.name}}</div>
-                    <button style="color:white" mat-icon-button (click)="removeTab(index)">
+                    <button [ngClass]="{lightThemeConsoleHeader: isLightThemeEnabled}" style="color:white" mat-icon-button (click)="removeTab(index)">
                         <mat-icon>close</mat-icon>
                     </button>
                 </ng-template>
@@ -40,13 +40,13 @@
     
         </mat-tab-group>
 
-        <button *ngIf="!isMinimized" style="color:white" mat-icon-button (click)="minimize(true)">
+        <button *ngIf="!isMinimized" [ngClass]="{lightThemeConsoleHeader: isLightThemeEnabled}" style="color:white" mat-icon-button (click)="minimize(true)">
             <mat-icon>remove</mat-icon>
         </button>
-        <button *ngIf="isMinimized" style="color:white" mat-icon-button (click)="minimize(false)">
+        <button *ngIf="isMinimized" [ngClass]="{lightThemeConsoleHeader: isLightThemeEnabled}" style="color:white" mat-icon-button (click)="minimize(false)">
             <mat-icon>web_asset</mat-icon>
         </button>
-        <button style="color:white" mat-icon-button (click)="close()">
+        <button [ngClass]="{lightThemeConsoleHeader: isLightThemeEnabled}" style="color:white" mat-icon-button (click)="close()">
             <mat-icon>close</mat-icon>
         </button>
     </div>

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

@@ -41,6 +41,11 @@
     background: #263238!important;
 }
 
+.lightThemeConsoleHeader {
+    background: white!important;
+    color: black!important;
+}
+
 :host ::ng-deep .mat-tab-label {
     height: 3rem !important;
     min-width: 8rem !important;

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

@@ -1 +1 @@
-<div #terminal id="terminal"></div>
+<div class="lightTheme" #terminal id="terminal"></div>

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

@@ -0,0 +1,4 @@
+.lightTheme {
+    background: white!important;
+    color: black!important;
+}

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

@@ -6,13 +6,14 @@ import { AttachAddon } from 'xterm-addon-attach';
 import { Node } from '../../../cartography/models/node';
 import { FitAddon } from 'xterm-addon-fit';
 import { NodeConsoleService } from '../../../services/nodeConsole.service';
+import { ThemeService } from '../../../services/theme.service';
 
 
 @Component({
     encapsulation: ViewEncapsulation.None,
     selector: 'app-web-console',
     templateUrl: './web-console.component.html',
-    styleUrls: ['../../../../../node_modules/xterm/css/xterm.css']
+    styleUrls: ['../../../../../node_modules/xterm/css/xterm.css', './web-console.component.scss']
 })
 export class WebConsoleComponent implements OnInit, AfterViewInit {
     @Input() server: Server;
@@ -21,15 +22,19 @@ export class WebConsoleComponent implements OnInit, AfterViewInit {
 
     public term: Terminal = new Terminal();
     public fitAddon: FitAddon = new FitAddon();
+    public isLightThemeEnabled: boolean = false;
     private copiedText: string = '';
 
     @ViewChild('terminal') terminal: ElementRef;
 
     constructor(
-        private consoleService: NodeConsoleService
+        private consoleService: NodeConsoleService,
+        private themeService: ThemeService,
     ) {}
     
     ngOnInit() {
+        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
+
         this.consoleService.consoleResized.subscribe(ev => {
             let numberOfColumns = Math.floor(ev.width / 9);
             let numberOfRows = Math.floor(ev.height / 17);
@@ -47,6 +52,8 @@ export class WebConsoleComponent implements OnInit, AfterViewInit {
 
     ngAfterViewInit() {
         this.term.open(this.terminal.nativeElement);
+        if (this.isLightThemeEnabled) this.term.setOption('theme', { background: 'white', foreground: 'black', cursor: 'black' });
+
         const socket = new WebSocket(this.getUrl());
 
         socket.onerror = ((event) => {