-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathapp.component.ts
More file actions
79 lines (69 loc) · 2.54 KB
/
Copy pathapp.component.ts
File metadata and controls
79 lines (69 loc) · 2.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import { Component, OnInit, Renderer2 } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { LandingPageInicioComponent } from './page/landing-page-inicio/landing-page-inicio.component';
import { HeaderLandingPageComponent } from './page/header-landing-page/header-landing-page.component';
import { NotFoundComponent } from './not-found/not-found.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [
RouterOutlet,
LandingPageInicioComponent,
HeaderLandingPageComponent,
NotFoundComponent,
],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent implements OnInit {
sunIcon: HTMLElement | null = null;
moonIcon: HTMLElement | null = null;
userTheme: string | null = null;
systemTheme!: boolean;
constructor(private renderer: Renderer2) {}
ngOnInit(): void {
this.sunIcon = document.querySelector('.sun');
this.moonIcon = document.querySelector('.moon');
// Verifica o tema do usuário no localStorage
this.userTheme = localStorage.getItem('theme');
// Verifica o esquema de cores preferido do sistema
this.systemTheme = window.matchMedia(
'(prefers-color-scheme: dark)'
).matches;
// Verifica e aplica o tema inicial
this.themeCheck();
}
iconToggle() {
if (this.sunIcon && this.moonIcon) {
this.sunIcon.classList.toggle('display-none');
this.moonIcon.classList.toggle('display-none');
}
}
themeCheck() {
if (this.userTheme === 'dark' || (!this.userTheme && this.systemTheme)) {
this.renderer.addClass(document.documentElement, 'dark');
if (this.moonIcon) this.renderer.addClass(this.moonIcon, 'display-none');
} else {
this.renderer.addClass(document.documentElement, 'light');
if (this.sunIcon) this.renderer.addClass(this.sunIcon, 'display-none');
}
}
themeSwitch() {
if (document.documentElement.classList.contains('dark')) {
this.renderer.removeClass(document.documentElement, 'dark');
this.renderer.addClass(document.documentElement, 'light');
localStorage.setItem('theme', 'light');
} else {
this.renderer.removeClass(document.documentElement, 'light');
this.renderer.addClass(document.documentElement, 'dark');
localStorage.setItem('theme', 'dark');
}
this.iconToggle();
}
chamada() {
if (this.sunIcon && this.moonIcon) {
this.sunIcon.addEventListener('click', () => this.themeSwitch());
this.moonIcon.addEventListener('click', () => this.themeSwitch());
}
}
}