-theme demo

2025-11-29 12:54:41 +07:00
parent 07c19bd46a
commit f0f3392dbb
7 changed files with 135 additions and 4 deletions
--- a/ng-ttc-frontend/src/app/services/theme.service.ts
+++ b/ng-ttc-frontend/src/app/services/theme.service.ts
@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService {
+  private currentTheme: string = 'theme-red'; // ธีมเริ่มต้น
+
+  constructor() {
+    this.loadTheme();
+  }
+
+  // โหลดธีมจาก LocalStorage หรือใช้ค่าเริ่มต้น
+  private loadTheme() {
+    const savedTheme = localStorage.getItem('app-theme');
+    if (savedTheme) {
+      this.currentTheme = savedTheme;
+    }
+    this.applyTheme(this.currentTheme);
+  }
+
+  // ฟังก์ชันเปลี่ยนธีม
+  setTheme(themeName: string) {
+    this.currentTheme = themeName;
+    localStorage.setItem('app-theme', themeName);
+    this.applyTheme(themeName);
+  }
+
+  // อัปเดต Class ที่ <html> tag
+  private applyTheme(theme: string) {
+    // ลบธีมเก่าออกทั้งหมด (สมมติมี theme-red, theme-blue, theme-green)
+    document.documentElement.classList.remove('theme-red', 'theme-blue', 'theme-green');
+
+    // เพิ่มธีมใหม่
+    document.documentElement.classList.add(theme);
+  }
+
+  getCurrentTheme() {
+    return this.currentTheme;
+  }
+}