From 5bf9c725f4eec266237e0f680cdc767fba3788c7 Mon Sep 17 00:00:00 2001
From: Peter <42907716+MrShack@users.noreply.github.com>
Date: Sat, 5 Apr 2025 18:17:57 +0200
Subject: [PATCH] Fixed darkmode working in the navbar

---
 frontend/src/app/header/header.component.html | 12 ++++++------
 frontend/src/app/header/header.component.scss |  1 -
 frontend/src/app/theme/theme.service.ts       |  8 ++++----
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/header/header.component.html b/frontend/src/app/header/header.component.html
index bb37952..ad94226 100644
--- a/frontend/src/app/header/header.component.html
+++ b/frontend/src/app/header/header.component.html
@@ -70,7 +70,7 @@
           </li>
           <li class="nav_li">
           <span [id]="getCurrentPageId(['map', 'customfeatures', 'economy', 'events', 'mypet', 'warps',
-          'skyblock', 'claiming'])" class="nav_link fake_link">Features</span>
+          'skyblock', 'claiming'])" class="nav_link fake_link" [ngClass]="active">Features</span>
             <ul class="dropdown">
               <li class="nav_li"><a class="nav_link2" [routerLink]="['/map']">Map</a></li>
               <li class="nav_li"><a class="nav_link2" [routerLink]="['/economy']">Economy</a></li>
@@ -88,7 +88,7 @@
           <li class="nav_li">
           <span
             [id]="getCurrentPageId(['guide', 'faq', 'ranks', 'rules', 'commandlist', 'art', 'lag', 'staffpowers',
-             'nicknames', 'bans'])" class="nav_link fake_link">Reference</span>
+             'nicknames', 'bans'])" class="nav_link fake_link" [ngClass]="active">Reference</span>
             <ul class="dropdown">
               <li class="nav_li"><a class="nav_link2" [routerLink]="['/guide']">Guide Book</a></li>
               <!-- <li class="navli"><a class="nav_link2" [routerLink]="['/faq']">FAQ</a></li> -->
@@ -103,15 +103,15 @@
             </ul>
           </li>
           <li class="nav_li"><a class="nav_link" target="_blank" rel="noopener"
-                                href="https://discordapp.com/invite/TGqpzCJ">Discord</a></li>
-          <li class="nav_li"><a [id]="getCurrentPageId(['vote'])" class="nav_link" [routerLink]="['/vote']">Vote</a>
+                                href="https://discordapp.com/invite/TGqpzCJ" [ngClass]="active">Discord</a></li>
+          <li class="nav_li"><a [id]="getCurrentPageId(['vote'])" class="nav_link" [routerLink]="['/vote']" [ngClass]="active">Vote</a>
           </li>
           <li class="nav_li">
-            <a class="nav_link" target="_blank" rel="noopener" href="https://store.alttd.com">Store</a>
+            <a class="nav_link" target="_blank" rel="noopener" href="https://store.alttd.com" [ngClass]="active">Store</a>
           </li>
           <li class="nav_li">
             <a [id]="getCurrentPageId(['about', 'team', 'community', 'birthdays'])"
-               class="nav_link fake_link">Altitude</a>
+               class="nav_link fake_link" [ngClass]="active">Altitude</a>
             <ul class="dropdown">
               <li class="nav_li"><a class="nav_link2" [routerLink]="['/about']">About Us</a></li>
               <li class="nav_li"><a class="nav_link2" [routerLink]="['/socials']">Socials</a></li>
diff --git a/frontend/src/app/header/header.component.scss b/frontend/src/app/header/header.component.scss
index 8bff79f..179008e 100644
--- a/frontend/src/app/header/header.component.scss
+++ b/frontend/src/app/header/header.component.scss
@@ -15,7 +15,6 @@ header .container {
 }
 
 #header-img {
-  //width: 45%; TODO peter figure out why you added this cus it makes the logo weird af
   max-width: 550px;
   padding-bottom: 15px;
   margin-top: -120px;
diff --git a/frontend/src/app/theme/theme.service.ts b/frontend/src/app/theme/theme.service.ts
index a5c0e34..a3ba921 100644
--- a/frontend/src/app/theme/theme.service.ts
+++ b/frontend/src/app/theme/theme.service.ts
@@ -9,7 +9,7 @@ import {THEME_MODE} from '../constant';
 export class ThemeService {
   private readonly THEME_KEY = 'theme';
 
-  private themeSubject: BehaviorSubject<THEME_MODE> = new BehaviorSubject<THEME_MODE>(THEME_MODE.DARK);
+  private themeSubject: BehaviorSubject<THEME_MODE> = new BehaviorSubject<THEME_MODE>(THEME_MODE.LIGHT);
   public theme$ = this.themeSubject.asObservable();
 
   constructor(private cookieService: CookieService) {
@@ -22,9 +22,9 @@ export class ThemeService {
       : THEME_MODE.DARK;
     let currentTheme: THEME_MODE;
     switch (savedTheme) {
-      case THEME_MODE.LIGHT: currentTheme = THEME_MODE.LIGHT; break;
-      case THEME_MODE.DARK:
-      default: currentTheme = THEME_MODE.DARK;
+      case THEME_MODE.DARK: currentTheme = THEME_MODE.DARK; break;
+      case THEME_MODE.LIGHT:
+      default: currentTheme = THEME_MODE.LIGHT;
     }
     this.setTheme(currentTheme);
   }