feat(navigation): switch theme

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]">
+        @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>

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')!);
+  }
 }