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 { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router'; import { provideRouter } from '@angular/router';
import { routes } from './app.routes'; import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser'; import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http' import { provideHttpClient, withFetch } from '@angular/common/http'
import { providerThemeInitializer } from './initializers/theme-initializer';
export const appConfig: ApplicationConfig = { export const appConfig: ApplicationConfig = {
providers: [ providers: [
provideZoneChangeDetection({ eventCoalescing: true }), provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes), provideRouter(routes),
provideClientHydration(withEventReplay()), 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'; import { ThemeService } from '../../services/theme.service';
@Component({ @Component({
@ -11,7 +11,7 @@ import { ThemeService } from '../../services/theme.service';
styles: ``, styles: ``,
}) })
export class ThemeToggleComponent { export class ThemeToggleComponent {
constructor(public themeService: ThemeService) {} public themeService = inject(ThemeService);
toggleTheme() { toggleTheme() {
this.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 { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common'; import { isPlatformBrowser } from '@angular/common';
type Theme = 'light' | 'dark';
@Injectable({ @Injectable({
providedIn: 'root', providedIn: 'root',
}) })
export class ThemeService { export class ThemeService {
private currentTheme: 'light' | 'dark' = 'light'; private currentTheme: Theme = 'light';
private isBrowser: boolean; private isBrowser: boolean;
constructor(@Inject(PLATFORM_ID) private platformId: Object) { constructor(@Inject(PLATFORM_ID) private platformId: Object) {
this.isBrowser = isPlatformBrowser(this.platformId); this.isBrowser = isPlatformBrowser(this.platformId);
if (this.isBrowser) { if (this.isBrowser) {
const savedTheme = localStorage.getItem('theme') as 'light' | 'dark'; const savedTheme = localStorage.getItem('theme') as Theme | null;
if (savedTheme) {
if (savedTheme === 'light' || savedTheme === 'dark') {
this.setTheme(savedTheme); this.setTheme(savedTheme);
} else { } else {
this.setTheme(this.currentTheme); this.setTheme(this.currentTheme);
@ -21,22 +24,36 @@ export class ThemeService {
} }
} }
toggleTheme() { /**
this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light'; * Alterna entre os temas 'light' e 'dark'.
this.setTheme(this.currentTheme); */
toggleTheme(): void {
const newTheme: Theme = this.currentTheme === 'light' ? 'dark' : 'light';
this.setTheme(newTheme);
} }
private setTheme(theme: 'light' | 'dark') { /**
if (this.isBrowser) { * Aplica o tema na tag <body>, salva no localStorage e atualiza o estado atual.
const body = document.body; * @param theme 'light' | 'dark'
body.classList.remove('light-theme', 'dark-theme'); */
body.classList.add(`${theme}-theme`); public setTheme(theme: Theme): void {
localStorage.setItem('theme', theme); if (!this.isBrowser) return;
}
this.currentTheme = theme; // <<< Faltava isso! // 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; 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 { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component'; import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig) bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
.catch((err) => console.error(err));