ajuste

Author: Fabio Brasileiro

src/app/app.component.html

@@ -1,4 +1,2 @@
 <router-outlet>
-  <button (click)="themeSwitch()" class="sun">Sun</button>
-  <button (click)="themeSwitch()" class="moon">Moon</button>
 </router-outlet>

src/app/page/button-toggle-dark-light/button-toggle-dark-light.component.css

@@ -0,0 +1,12 @@
+<div class="  rounded-3xl p-1 flex justify-center items-center">
+  <button (click)="themeSwitch()" class="sun text-white"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+      fill="currentColor" class="bi bi-moon-fill" viewBox="0 0 16 16">
+      <path
+        d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278" />
+    </svg></button>
+  <button (click)="themeSwitch()" class="moon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+      fill="currentColor" class="bi bi-brightness-high-fill" viewBox="0 0 16 16">
+      <path
+        d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708" />
+    </svg></button>
+</div>

src/app/page/button-toggle-dark-light/button-toggle-dark-light.component.html

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonToggleDarkLightComponent } from './button-toggle-dark-light.component';
+
+describe('ButtonToggleDarkLightComponent', () => {
+  let component: ButtonToggleDarkLightComponent;
+  let fixture: ComponentFixture<ButtonToggleDarkLightComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonToggleDarkLightComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ButtonToggleDarkLightComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/page/button-toggle-dark-light/button-toggle-dark-light.component.spec.ts

@@ -0,0 +1,70 @@
+import { Component, OnInit, Renderer2 } from '@angular/core';
+
+@Component({
+  selector: 'app-button-toggle-dark-light',
+  standalone: true,
+  imports: [],
+  templateUrl: './button-toggle-dark-light.component.html',
+  styleUrl: './button-toggle-dark-light.component.css'
+})
+export class ButtonToggleDarkLightComponent 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());
+    }
+  }
+}

src/app/page/button-toggle-dark-light/button-toggle-dark-light.component.ts

@@ -4,6 +4,7 @@
       <a href="#" class="flex items-center">
         <img src="../assets/logo-java-jugle.png" class="h-6 mr-3 sm:h-9 disabled-logo" alt="Java juble Logo" />
       </a>
+      <app-button-toggle-dark-light></app-button-toggle-dark-light>
       <div class="flex items-center lg:order-2">
         <div class="hidden mt-2 mr-4 sm:inline-block">
           <a class="github-button" href="https://github.com/JavaAmazonas/java-jungle" data-size="large"

src/app/page/header-landing-page/header-landing-page.component.html

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
+import { ButtonToggleDarkLightComponent } from '../button-toggle-dark-light/button-toggle-dark-light.component';
 
 @Component({
   selector: 'app-header-landing-page',
   standalone: true,
-  imports: [],
+  imports: [ButtonToggleDarkLightComponent],
   templateUrl: './header-landing-page.component.html',
   styleUrl: './header-landing-page.component.css',
 })