rayankonecny/my-task-board
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust in theme-server

Browse source
This commit is contained in:
Rayan Konecny do Nascimento 2025-04-16 05:22:36 +00:00
parent 7795e5d674
commit d4332dce35
5 changed files with 57 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/app/app.config.ts
View file

@ -1,15 +1,16 @@
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http'
import { providerThemeInitializer } from './initializers/theme-initializer';
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideClientHydration(withEventReplay()),
provideHttpClient(withFetch())
provideHttpClient(withFetch()),
providerThemeInitializer,
]
};

19
src/app/initializers/theme-initializer.ts Normal file
View file

@ -0,0 +1,19 @@
import { EnvironmentProviders, inject, Provider } from '@angular/core';
import { ThemeService } from '../shared/services/theme.service';
export function ThemeInitializer() {
return () => {
const themeService = inject(ThemeService);
const savedTheme = localStorage.getItem('theme') as 'light' | 'dark';
themeService.setTheme(savedTheme || 'light');
};
}
export const providerThemeInitializer: Provider | EnvironmentProviders = {
provide: 'APP_INITIALIZER',
useFactory: ThemeInitializer,
multi: true,
deps: [ThemeService],
};

4
src/app/shared/components/theme-toggle/theme-toggle.component.ts
View file

@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, inject } from '@angular/core';
import { ThemeService } from '../../services/theme.service';
@Component({
@ -11,7 +11,7 @@ import { ThemeService } from '../../services/theme.service';
styles: ``,
})
export class ThemeToggleComponent {
constructor(public themeService: ThemeService) {}
public themeService = inject(ThemeService);
toggleTheme() {
this.themeService.toggleTheme();

47
src/app/shared/services/theme.service.ts
View file

@ -1,19 +1,22 @@
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
type Theme = 'light' | 'dark';
@Injectable({
providedIn: 'root',
})
export class ThemeService {
private currentTheme: 'light' | 'dark' = 'light';
private currentTheme: Theme = 'light';
private isBrowser: boolean;
constructor(@Inject(PLATFORM_ID) private platformId: Object) {
this.isBrowser = isPlatformBrowser(this.platformId);
if (this.isBrowser) {
const savedTheme = localStorage.getItem('theme') as 'light' | 'dark';
if (savedTheme) {
const savedTheme = localStorage.getItem('theme') as Theme | null;
if (savedTheme === 'light' || savedTheme === 'dark') {
this.setTheme(savedTheme);
} else {
this.setTheme(this.currentTheme);
@ -21,22 +24,36 @@ export class ThemeService {
}
}
toggleTheme() {
this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
this.setTheme(this.currentTheme);
/**
* Alterna entre os temas 'light' e 'dark'.
*/
toggleTheme(): void {
const newTheme: Theme = this.currentTheme === 'light' ? 'dark' : 'light';
this.setTheme(newTheme);
}
private setTheme(theme: 'light' | 'dark') {
if (this.isBrowser) {
const body = document.body;
body.classList.remove('light-theme', 'dark-theme');
body.classList.add(`${theme}-theme`);
localStorage.setItem('theme', theme);
}
this.currentTheme = theme; // <<< Faltava isso!
/**
* Aplica o tema na tag <body>, salva no localStorage e atualiza o estado atual.
* @param theme 'light' | 'dark'
*/
public setTheme(theme: Theme): void {
if (!this.isBrowser) return;
// Evita reaplicar o mesmo tema
if (this.currentTheme === theme) return;
const body = document.body;
body.classList.remove('light-theme', 'dark-theme');
body.classList.add(`${theme}-theme`);
localStorage.setItem('theme', theme);
this.currentTheme = theme;
}
getCurrentTheme(): 'light' | 'dark' {
/**
* Retorna o tema atual da aplicação.
*/
getCurrentTheme(): Theme {
return this.currentTheme;
}
}

3
src/main.ts
View file

@ -2,5 +2,4 @@ import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));
bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));