Apply Language Settings

src/app/app.ts

@@ -1,8 +1,9 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, effect, PLATFORM_ID } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { HeaderMenu } from './features/header-menu/header-menu';
 import { PopupService } from './services/popup.service';
-import { NgComponentOutlet } from '@angular/common';
+import { SettingsService } from './services/settings.service';
+import { NgComponentOutlet, isPlatformBrowser } from '@angular/common';
 
 @Component({
   selector: 'app-root',
@@ -12,4 +13,19 @@ import { NgComponentOutlet } from '@angular/common';
 })
 export class App {
   protected popupService = inject(PopupService);
+  protected settingsService = inject(SettingsService);
+  private platformId = inject(PLATFORM_ID);
+
+  constructor() {
+    effect(() => {
+      if (isPlatformBrowser(this.platformId)) {
+        const isDark = this.settingsService.darkMode();
+        document.documentElement.classList.toggle('dark-theme', isDark);
+        document.documentElement.classList.toggle('light-theme', !isDark);
+        
+        const lang = this.settingsService.language();
+        document.documentElement.lang = lang.toLowerCase();
+      }
+    });
+  }
 }