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