styles

src/app/shared/components/layout/page-header/page-header.component.css

@@ -1,4 +1,3 @@
-/* Verschieben Sie diese Stile aus der globalen styles.css hierher */
 :host {
   display: block;
 }
@@ -7,20 +6,23 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 2rem;
 }
 
+/* .header-left {
+  Platzhalter für zukünftige Elemente wie Seitentitel oder Breadcrumbs
+} */
+
 .header-actions {
   display: flex;
   align-items: center;
   gap: 1.5rem;
 }
 
-/* Responsivität für den Header */
+/* Responsivität NUR für den Header */
 @media (max-width: 768px) {
   .main-header {
     flex-direction: column;
-    gap: 1rem;
+    gap: 1.5rem; /* Etwas mehr Abstand für mobile Ansicht */
     align-items: stretch;
   }
 }

src/app/shared/components/layout/page-header/page-header.component.html

@@ -1,14 +1,15 @@
 <header class="main-header">
-  
-  <!-- Linker Bereich: Hier könnte später ein Titel oder Breadcrumbs via ng-content platziert werden -->
   <div class="header-left">
     <app-search-bar></app-search-bar>
   </div>
-  
-  <!-- Rechter Bereich mit den Aktionen -->
   <div class="header-actions">
-    <app-theme-switcher></app-theme-switcher>
+
+    <app-slide-toggle
+     label="Dark Mode"
+    [ngModel]="darkModeAktiv"
+    (ngModelChange)="onDarkModeChange($event)"
+    name="mainDarkModeToggle"
+  ></app-slide-toggle>
     <app-user-profile></app-user-profile>
   </div>
-
 </header>

src/app/shared/components/layout/page-header/page-header.component.ts

@@ -1,8 +1,16 @@
-import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+  Component,
+  Inject,
+  PLATFORM_ID,
+  Renderer2,
+  OnInit,
+  AfterViewInit,
+} from '@angular/core';
+import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { SearchBarComponent } from '../search-bar/search-bar.component';
-import { ThemeSwitcherComponent } from '../theme-switcher/theme-switcher.component';
 import { UserProfileComponent } from '../user-profile/user-profile.component';
+import { SlideToggleComponent } from '../../form/slide-toggle/slide-toggle.component';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-page-header',
@@ -10,12 +18,67 @@ import { UserProfileComponent } from '../user-profile/user-profile.component';
   imports: [
     CommonModule,
     SearchBarComponent,
-    ThemeSwitcherComponent,
-    UserProfileComponent
+    UserProfileComponent,
+    SlideToggleComponent,
+    FormsModule,
   ],
   templateUrl: './page-header.component.html',
-  styleUrl: './page-header.component.css'
+  styleUrl: './page-header.component.css',
 })
-export class PageHeaderComponent {
-  // Hier könnten später z.B. der Seitentitel oder Breadcrumbs übergeben werden
-}
+export class PageHeaderComponent implements OnInit, AfterViewInit {
+  private readonly darkModeKey = 'app-dark-mode-setting';
+  darkModeAktiv: boolean = false;
+
+  constructor(
+    private renderer: Renderer2,
+    @Inject(DOCUMENT) private document: Document,
+    @Inject(PLATFORM_ID) private platformId: Object
+  ) {}
+
+  ngOnInit(): void {
+    this.loadThemeSetting();
+  }
+
+  ngAfterViewInit(): void {
+    this.updateTheme(this.darkModeAktiv);
+  }
+
+  private loadThemeSetting(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      try {
+        const storedValue = localStorage.getItem(this.darkModeKey);
+        // Setze den Zustand der Komponente basierend auf dem gespeicherten Wert.
+        this.darkModeAktiv = storedValue === 'true';
+      } catch (e) {
+        console.error('Could not access localStorage:', e);
+      }
+    }
+    // Wende das Theme an - entweder den Standardwert (false) oder den geladenen Wert.
+    this.updateTheme(this.darkModeAktiv);
+  }
+
+  onDarkModeChange(isEnabled: boolean): void {
+    this.darkModeAktiv = isEnabled;
+
+    // --- KORREKTUR 2: Speichere die neue Einstellung ---
+    if (isPlatformBrowser(this.platformId)) {
+      try {
+        localStorage.setItem(this.darkModeKey, String(isEnabled));
+      } catch (e) {
+        console.error('Could not write to localStorage:', e);
+      }
+    }
+
+    // Wende die visuelle Änderung an.
+    this.updateTheme(isEnabled);
+  }
+
+  // This method is CORRECT. It just needs to be called.
+  private updateTheme(isEnabled: boolean): void {
+    if (isEnabled) {
+      this.renderer.addClass(this.document.body, 'dark-theme');
+    } else {
+      this.renderer.removeClass(this.document.body, 'dark-theme');
+    }
+  }
+}

src/app/shared/components/layout/theme-switcher/theme-switcher.component.css

@@ -1,12 +0,0 @@
-:host {
-  display: block;
-}
-
-.theme-switcher {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  color: var(--color-text-light);
-  font-weight: 500;
-  font-size: 0.9rem;
-}

src/app/shared/components/layout/theme-switcher/theme-switcher.component.html

@@ -1,5 +0,0 @@
-<div class="theme-switcher">
-  <label>Dark Mode</label>
-
-  <app-slide-toggle [(ngModel)]="isDarkMode" (ngModelChange)="toggleTheme($event)"></app-slide-toggle>
-</div>

src/app/shared/components/layout/theme-switcher/theme-switcher.component.ts

@@ -1,35 +0,0 @@
-import { Component, Renderer2, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms'; // FormsModule importieren
-import { SlideToggleComponent } from '../../form/slide-toggle/slide-toggle.component';
-
-@Component({
-  selector: 'app-theme-switcher',
-  standalone: true,
-  imports: [
-    CommonModule, 
-    SlideToggleComponent,
-    FormsModule // <-- HIER IST DIE KORREKTUR
-  ],
-  templateUrl: './theme-switcher.component.html',
-  styleUrl: './theme-switcher.component.css'
-})
-export class ThemeSwitcherComponent implements OnInit {
-  isDarkMode = false;
-
-  constructor(private renderer: Renderer2) {}
-
-  ngOnInit(): void {
-    // Hier könnte man den Zustand aus dem localStorage laden
-  }
-
-  // Die Methode akzeptiert jetzt direkt den neuen boolean-Wert
-  toggleTheme(isDarkMode: boolean): void {
-    this.isDarkMode = isDarkMode;
-    if (this.isDarkMode) {
-      this.renderer.addClass(document.body, 'dark-theme');
-    } else {
-      this.renderer.removeClass(document.body, 'dark-theme');
-    }
-  }
-}