Fixed toggling on darkmode on button click and not icon only

src/app/features/header-display/header-contact-links/header-contact-links.component.html

@@ -23,7 +23,7 @@
       </a>
     </div>
     <div class="w-1/3 h-full">
-      <div class="flex items-center justify-center h-full w-full svg-button-container" data-label="Theme">
+      <div class="flex items-center justify-center h-full w-full svg-button-container" data-label="Theme" (click)="toggleTheme()">
         <app-header-switch-theme-button class="svg-icon" />
         <span class="scan-line"></span>
       </div>

src/app/features/header-display/header-contact-links/header-contact-links.component.ts

@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import {HeaderSwitchThemeButtonComponent} from './header-switch-theme-button/header-switch-theme-button.component';
+import { HeaderSwitchThemeButtonComponent } from './header-switch-theme-button/header-switch-theme-button.component';
 
 @Component({
   selector: 'app-header-contact-links',
@@ -7,4 +7,64 @@ import {HeaderSwitchThemeButtonComponent} from './header-switch-theme-button/hea
   templateUrl: './header-contact-links.component.html',
   styleUrl: './header-contact-links.component.css',
 })
-export class HeaderContactLinksComponent {}
+export class HeaderContactLinksComponent implements OnInit {
+  isDarkMode = false;
+
+  constructor() {}
+
+  ngOnInit(): void {
+    // Check initial theme on load
+    this.isDarkMode = this.getCurrentTheme() === 'dark';
+  }
+
+  /**
+   * Toggle between light and dark themes
+   */
+  toggleTheme(): void {
+    this.isDarkMode = !this.isDarkMode;
+
+    // Update body data attribute
+    document.body.setAttribute(
+      'data-theme',
+      this.isDarkMode ? 'dark' : 'light',
+    );
+
+    // Add/remove dark class from body for :host-context
+    if (this.isDarkMode) {
+      document.body.classList.add('dark');
+    } else {
+      document.body.classList.remove('dark');
+    }
+
+    // Store preference in localStorage
+    localStorage.setItem('theme', this.isDarkMode ? 'dark' : 'light');
+
+    // Dispatch custom event for other components that might need to react
+    window.dispatchEvent(
+      new CustomEvent('themeChanged', {
+        detail: { theme: this.isDarkMode ? 'dark' : 'light' },
+      }),
+    );
+  }
+
+  /**
+   * Get current theme from localStorage or system preference
+   */
+  private getCurrentTheme(): string {
+    // First check localStorage
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+      return savedTheme;
+    }
+
+    // Fallback to system preference
+    if (
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      return 'dark';
+    }
+
+    return 'light';
+  }
+}

src/app/features/header-display/header-contact-links/header-switch-theme-button/header-switch-theme-button.component.html

@@ -1,5 +1,5 @@
 <!-- header-switch-theme-button.component.html -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-10 h-10 svg-icon" (click)="toggleTheme()">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-10 h-10 svg-icon">
   <!-- Outer ring -->
   <circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="0.8" />