Skip to content

Commit dd29a7b

Browse files
Fabio BrasileiroFabio Brasileiro
Fabio Brasileiro
authored and
Fabio Brasileiro
committed
ajuste
1 parent 503596a commit dd29a7b

6 files changed

Lines changed: 80 additions & 8 deletions

File tree

‎src/app/app.component.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
<router-outlet></router-outlet>
1+
<router-outlet>
2+
<button (click)="themeSwitch()" class="sun">Sun</button>
3+
<button (click)="themeSwitch()" class="moon">Moon</button>
4+
</router-outlet>

‎src/app/app.component.ts‎

Lines changed: 68 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component } from '@angular/core';
1+
import { Component, OnInit, Renderer2 } from '@angular/core';
22
import { RouterOutlet } from '@angular/router';
33
import { LandingPageInicioComponent } from './page/landing-page-inicio/landing-page-inicio.component';
44
import { HeaderLandingPageComponent } from './page/header-landing-page/header-landing-page.component';
@@ -7,10 +7,73 @@ import { NotFoundComponent } from './not-found/not-found.component';
77
@Component({
88
selector: 'app-root',
99
standalone: true,
10-
imports: [RouterOutlet,LandingPageInicioComponent,HeaderLandingPageComponent,NotFoundComponent],
10+
imports: [
11+
RouterOutlet,
12+
LandingPageInicioComponent,
13+
HeaderLandingPageComponent,
14+
NotFoundComponent,
15+
],
1116
templateUrl: './app.component.html',
12-
styleUrl: './app.component.css'
17+
styleUrl: './app.component.css',
1318
})
14-
export class AppComponent {
15-
title = 'java-jungle';
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+
}
1679
}

‎src/app/page/landing-page-inicio/landing-page-inicio.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { NgClass } from '@angular/common';
1818
SliderEventComponent,
1919
FontAwesomeModule,
2020
FormsModule,
21-
NgClass
21+
NgClass,
2222
],
2323
templateUrl: './landing-page-inicio.component.html',
2424
styleUrl: './landing-page-inicio.component.css',
@@ -28,6 +28,7 @@ export class LandingPageInicioComponent {
2828
isOpen2 = false;
2929
isOpen3 = false;
3030

31+
3132
toggleAccordion(panel: number) {
3233
switch (panel) {
3334
case 1:

‎src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="pt-br">
2+
<html lang="pt-br" class="dark">
33

44
<head>
55
<meta charset="utf-8">

‎src/styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,9 @@
33
@tailwind components;
44
@tailwind utilities;
55

6+
.display-none {
7+
@apply hidden
8+
}
9+
610
html, body { height: 100%; }
711
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

‎tailwind.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/** @type {import('tailwindcss').Config} */
22
module.exports = {
33
content: ["./src/**/*.{html,ts}"],
4+
darkMode: "class",
45
theme: {
56
extend: {},
67
},

0 commit comments

Comments
 (0)