From aebd3d643e98ba0d77751a25df3707e2810889f0 Mon Sep 17 00:00:00 2001
From: Nico Haider <nico@td-haider.at>
Date: Thu, 21 Aug 2025 04:10:46 +0200
Subject: [PATCH] feat(navigation): switch theme

---
 .../components/navigation-bar/navigation-bar.html    | 12 +++++++++---
 src/app/core/service/theme-switch.service.ts         |  8 ++++++++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/app/core/components/navigation-bar/navigation-bar.html b/src/app/core/components/navigation-bar/navigation-bar.html
index 212230e..a7967e9 100644
--- a/src/app/core/components/navigation-bar/navigation-bar.html
+++ b/src/app/core/components/navigation-bar/navigation-bar.html
@@ -62,9 +62,15 @@
         }
     </div>
     <div class="options flex flex-row gap-[10px]">
-        <div class="dark-mode size-[50px]">
-            <fa-icon [icon]="faMoon"/>
-        </div>
+        @if (themeSwitchService.darkMode()) {
+            <div class="dark-mode size-[50px]" (click)="themeSwitchService.switchToLight()">
+                <fa-icon [icon]="faMoon"/>
+            </div>
+        } @else {
+            <div class="dark-mode size-[50px]" (click)="themeSwitchService.switchToDark()">
+                <fa-icon [icon]="faSun"/>
+            </div>
+        }
         <div class="language size-[50px]">EN</div>
     </div>
 </nav>
diff --git a/src/app/core/service/theme-switch.service.ts b/src/app/core/service/theme-switch.service.ts
index 2ba7dd3..d63f402 100644
--- a/src/app/core/service/theme-switch.service.ts
+++ b/src/app/core/service/theme-switch.service.ts
@@ -52,4 +52,12 @@ export class ThemeSwitchService {
     console.info(`switching to theme: ${theme.name}`);
     this.theme.set(theme);
   }
+
+  switchToDark() {
+    this.switchToTheme(Theme.THEMES.find(t => t.code === 'dark')!);
+  }
+
+  switchToLight() {
+    this.switchToTheme(Theme.THEMES.find(t => t.code === 'light')!);
+  }
 }