diff --git a/ng-ttc-frontend/src/app/app.component.ts b/ng-ttc-frontend/src/app/app.component.ts index c6e0384..8907956 100644 --- a/ng-ttc-frontend/src/app/app.component.ts +++ b/ng-ttc-frontend/src/app/app.component.ts @@ -1,4 +1,5 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { ThemeService } from './services/theme.service'; @Component({ selector: 'app-root', @@ -6,6 +7,13 @@ import { Component } from '@angular/core'; standalone: false, styleUrl: './app.component.css' }) -export class AppComponent { +export class AppComponent implements OnInit { + constructor(private themeService: ThemeService) {} title = 'ng-ttc-frontend'; + + + ngOnInit(): void { + // โหลดธีมเมื่อคอมโพเนนต์เริ่มต้นทำงาน + this.themeService.getCurrentTheme(); + } } diff --git a/ng-ttc-frontend/src/app/app.module.ts b/ng-ttc-frontend/src/app/app.module.ts index 68fa7a5..255e75c 100644 --- a/ng-ttc-frontend/src/app/app.module.ts +++ b/ng-ttc-frontend/src/app/app.module.ts @@ -29,6 +29,7 @@ import { MainProject } from './component/main-project/main-project'; import { MainProjectContent } from './content/main-project-content/main-project-content'; import { MainProjectAdd } from './component/main-project-add/main-project-add'; import { BudgetAprovalContent } from './content/budget-aproval-content/budget-aproval-content'; +import { ThemeSwitcherComponent } from './component/theme-switcher/theme-switcher'; // import { BudgetAproval } from './component/budget-aproval/budget-aproval'; // import { AccDateFormatPipe } from './pipe/dtmtodatetime.pipe'; // import { DtmtodatetimePipe } from './dtmtodatetime.pipe'; @@ -41,6 +42,7 @@ import { BudgetAprovalContent } from './content/budget-aproval-content/budget-ap SidebarComponent, LicensePrivacyTermsComponent, TokenTimerComponent, + // ThemeSwitcherComponent, // BudgetAprovalContent // MainProjectAdd, // MainProject, diff --git a/ng-ttc-frontend/src/app/component/theme-switcher/theme-switcher.css b/ng-ttc-frontend/src/app/component/theme-switcher/theme-switcher.css new file mode 100644 index 0000000..e69de29 diff --git a/ng-ttc-frontend/src/app/component/theme-switcher/theme-switcher.html b/ng-ttc-frontend/src/app/component/theme-switcher/theme-switcher.html new file mode 100644 index 0000000..f3d845e --- /dev/null +++ b/ng-ttc-frontend/src/app/component/theme-switcher/theme-switcher.html @@ -0,0 +1 @@ +

theme-switcher works!

diff --git a/ng-ttc-frontend/src/app/component/theme-switcher/theme-switcher.ts b/ng-ttc-frontend/src/app/component/theme-switcher/theme-switcher.ts new file mode 100644 index 0000000..f4d7dd3 --- /dev/null +++ b/ng-ttc-frontend/src/app/component/theme-switcher/theme-switcher.ts @@ -0,0 +1,44 @@ +import { Component } from '@angular/core'; +import { ThemeService } from '../../services/theme.service'; + +@Component({ + selector: 'app-theme-switcher', + template: ` +
+ Theme: + + + + + + + + + +
+ `, + standalone: true +}) +export class ThemeSwitcherComponent { + currentTheme: string; + + constructor( + private themeService: ThemeService + ) { + this.currentTheme = this.themeService.getCurrentTheme(); + } + + changeTheme(theme: string) { + this.themeService.setTheme(theme); + this.currentTheme = theme; + } +} diff --git a/ng-ttc-frontend/src/app/services/theme.service.ts b/ng-ttc-frontend/src/app/services/theme.service.ts new file mode 100644 index 0000000..430b5db --- /dev/null +++ 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 ที่ 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; + } +} diff --git a/ng-ttc-frontend/src/styles.css b/ng-ttc-frontend/src/styles.css index 4a2896f..3136636 100644 --- a/ng-ttc-frontend/src/styles.css +++ b/ng-ttc-frontend/src/styles.css @@ -1,5 +1,40 @@ @import "tailwindcss"; +/* กำหนดตัวแปรสีพื้นฐาน */ +:root { + /* Default (Red Theme) */ + --color-primary-50: #fef2f2; + --color-primary-100: #fee2e2; + --color-primary-500: #ef4444; + --color-primary-600: #dc2626; + --color-primary-900: #7f1d1d; /* สีแดงเข้มที่คุณใช้บ่อย */ + --color-primary-950: #450a0a; +} + +/* Blue Theme Override */ +.theme-blue { + --color-primary-50: #eff6ff; + --color-primary-100: #dbeafe; + --color-primary-500: #3b82f6; + --color-primary-600: #2563eb; + --color-primary-900: #1e3a8a; /* สีน้ำเงินเข้ม */ + --color-primary-950: #172554; +} + +/* Green Theme Override */ +.theme-green { + --color-primary-50: #f0fdf4; + --color-primary-100: #dcfce7; + --color-primary-500: #22c55e; + --color-primary-600: #16a34a; + --color-primary-900: #14532d; + --color-primary-950: #052e16; +} + +/* ... CSS อื่นๆ ของคุณ ... */ +html, body { height: 100%; } +body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } + /* Global base styles for the app. Keep lightweight and self-contained so the login component can reliably fill the viewport without producing an outer page scrollbar. */ @@ -92,7 +127,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Prevent the browser from showing a scroll bar for the page itself; - the login card will scroll internally if needed. */ + the login card will scroll internally if needed. */ } /* Simple utilities used by nested components in this workspace */ @@ -108,7 +143,7 @@ body { padding: 10px; margin: 10px; /* Use flex centering so nested components (like the login widget) - are centered without forcing the document to scroll. */ + are centered without forcing the document to scroll. */ display: flex; align-items: center; justify-content: center;