Boton Modo Oscuro

En este artículo, te mostraré cómo crear un componente en Angular que permite a los usuarios alternar entre el modo claro y oscuro, guardando su preferencia en el almacenamiento local del navegador.

Estructura del Componente

Explica que el componente tiene:

Un botón para alternar el tema.
Lógica para detectar el tema guardado o la preferencia del sistema.
Persistencia de la preferencia en localStorage.
Aplicación de la clase dark a <html> para activar el modo oscuro globalmente.

El HTML del Componente

<button (click)="toggleTheme()"
    class="p-2 rounded transition-colors duration-200 bg-stone-200 dark:bg-stone-950 border dark:border-stone-800 border-stone-300"
    aria-label="Toggle dark mode">
    @if (isDark) { <span>🌙</span> }
    @else { <span>☀️</span> }
</button>

Explicación:

El botón muestra un icono de luna 🌙 si está activado el modo oscuro y un sol ☀️ si está en modo claro.
Usa la directiva @if (Angular v17+) para renderizar condicionalmente el icono.
Las clases de Tailwind CSS cambian el fondo y los bordes según el modo.

El Código TypeScript

Incluye el código de la clase y explica su funcionamiento por secciones:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';

@Component({
selector: 'app-toggle',
imports: [CommonModule],
templateUrl: './toggle.html',
styleUrl: './toggle.css',
})
export class Toggle {
isDark: boolean = false;

constructor() {
  if (typeof window !== 'undefined' && window.localStorage) {
    this.isDark =
      window.localStorage.getItem('theme') === 'dark' ||
      (!window.localStorage.getItem('theme') &&
        window.matchMedia('(prefers-color-scheme: dark)').matches);
    this.updateTheme();
  }
}

toggleTheme() {
  this.isDark = !this.isDark;
  this.updateTheme();
  if (typeof window !== 'undefined' && window.localStorage) {
    window.localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
  }
}

updateTheme() {
  if (typeof document !== 'undefined') {
    const root = document.documentElement;
    if (this.isDark) {
      root.classList.add('dark');
      console.log('Dark mode enabled');
    } else {
      root.classList.remove('dark');
      console.log('Dark mode disabled');
    }
  }
}
}

Explicación:

Propiedad isDark: Lleva el estado del tema actual.
Constructor:
- Comprueba si hay un valor guardado en localStorage y lo aplica.
- Si no hay valor, detecta la preferencia del sistema (prefers-color-scheme: dark).
- Llama a updateTheme para aplicar la clase correspondiente.
toggleTheme():
- Cambia el valor de isDark.
- Actualiza el DOM y guarda la preferencia en localStorage.
updateTheme():
- Añade o remueve la clase dark del <html>, lo que activa los estilos oscuros si usas Tailwind (o tu propio CSS).

Integración en la Aplicación

Explica cómo usar el componente en otra parte de tu app, por ejemplo en app.component.html:

<app-toggle></app-toggle>

Notas Adicionales

Si usas Tailwind CSS, asegúrate de que tu configuración tenga activado el modo JIT y el dark mode en modo class.
Puedes mejorar el componente añadiendo animaciones, accesibilidad, o pruebas unitarias.

Conclusión

Resalta la importancia de respetar la preferencia del usuario y cómo una buena experiencia oscura/clara puede mejorar la usabilidad de tu web.