From f8c51c7c7337a998206c2cea14996ebf3f63a845 Mon Sep 17 00:00:00 2001
From: Nataliia Karmazina <nataliia.karmazina@adesso.de>
Date: Fri, 29 Sep 2023 14:38:03 +0200
Subject: [PATCH] darkTheme angepasst

---
 .../src/app/example-table/example-table.component.css  |  4 ++--
 .../src/app/example-table/example-table.component.html |  6 ++++--
 .../src/app/example-table/example-table.component.ts   | 10 +++++++++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/example-table/example-table.component.css b/frontend/src/app/example-table/example-table.component.css
index 3aeab9087..694c734a3 100644
--- a/frontend/src/app/example-table/example-table.component.css
+++ b/frontend/src/app/example-table/example-table.component.css
@@ -65,8 +65,8 @@ span, .checkboxWrapper{
   background: transparent;
 }
 
-.darkTheme, .icon {
-  color: var(--light-blue)!important;;
+.edit-mode.icon.darkTheme {
+  color: var(--light-blue);
 }
 
 .scenarioTitle > em{
diff --git a/frontend/src/app/example-table/example-table.component.html b/frontend/src/app/example-table/example-table.component.html
index 8f99cdeba..faeae00bb 100644
--- a/frontend/src/app/example-table/example-table.component.html
+++ b/frontend/src/app/example-table/example-table.component.html
@@ -11,8 +11,10 @@
 	<ng-container *ngFor="let column of displayedColumns; let columnIndex = index;  let first = first;" matColumnDef={{column}}> 
 			<th class="headerRow MediumHeadline5" mat-header-cell *matHeaderCellDef scope="col"> 
 				<span *ngIf="first" class="slide-toggle-container">
-					<label class="edit-mode" [class.icon]="editMode">Edit</label>
-					<mat-slide-toggle [formControl]="toggleControl" [color]="color" title="Switch on/off edit mode"></mat-slide-toggle>
+					<label class="edit-mode" [class.icon]="editMode" [ngClass]="{'darkTheme': isDark && editMode}">Edit</label>
+					<mat-slide-toggle [formControl]="toggleControl" [color]="color"
+					[ngClass]="{'mat-accent': isDark}"
+					title="Switch on/off edit mode"></mat-slide-toggle>
 				</span>
 				<div *ngIf="!first">
 					{{column}}
diff --git a/frontend/src/app/example-table/example-table.component.ts b/frontend/src/app/example-table/example-table.component.ts
index 7455f8743..568181084 100644
--- a/frontend/src/app/example-table/example-table.component.ts
+++ b/frontend/src/app/example-table/example-table.component.ts
@@ -14,6 +14,7 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { MatTable } from '@angular/material/table';
 import { StepDefinition } from '../model/StepDefinition';
 import { ThemePalette } from '@angular/material/core';
+import { ThemingService } from '../Services/theming.service';
 
 
 @Component({
@@ -113,6 +114,7 @@ export class ExampleTableComponent implements OnInit {
   deleteExampleObservable: Subscription;
   toggleObservable: Subscription;
   updateExampleTableObservable: Subscription;
+  themeObservable: Subscription;
 
   indexOfExampleToDelete;
   @ViewChild('table') table: MatTable<StepDefinition>;
@@ -148,7 +150,9 @@ export class ExampleTableComponent implements OnInit {
      constructor( public scenarioService: ScenarioService,
        private toastr: ToastrService,
        public exampleService: ExampleService,
-       public apiService: ApiService
+       public apiService: ApiService,
+       public themeService: ThemingService
+
        ) {}
 
      /**
@@ -162,6 +166,10 @@ export class ExampleTableComponent implements OnInit {
     this.toggleObservable = this.toggleControl.valueChanges.subscribe(val => {
       this.editMode = val;
     });
+    this.isDark = this.themeService.isDarkMode();
+    this.themeObservable = this.themeService.themeChanged.subscribe((changedTheme) => {
+      this.isDark = this.themeService.isDarkMode();
+  });
   }
  
   // eslint-disable-next-line @angular-eslint/use-lifecycle-interface