darkTheme angepasst

adessoSE · Sep 29, 2023 · f8c51c7 · f8c51c7
1 parent d86656c
commit f8c51c7
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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