Angular Theme Switcher

Una librería Angular moderna y elegante para cambiar entre temas claro y oscuro con un componente toggle animado.

✨ Características

• 🌙 Cambio suave entre tema claro y oscuro
• 🎨 Componente totalmente personalizable
• 📱 Diseño responsivo y accesible
• 💾 Persistencia en localStorage
• 🎯 Detección automática de preferencias del sistema
• ⚡ Optimizado para performance
• 🔧 Fácil integración

📦 Instalación

npm install theme-switcher-maxcell

🚀 Uso Básico

1. Importar el módulo

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ThemeSwitcherModule } from 'theme-switcher-maxcell';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ThemeSwitcherModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Usar el componente

<lib-theme-toggle></lib-theme-toggle>

3. Agregar estilos CSS

body.light-theme {
  background-color: #ffffff;
  color: #1f2937;
}

body.dark-theme {
  background-color: #1f2937;
  color: #f9fafb;
}

⚙️ API

Propiedades del componente

• size: 'small' | 'medium' | 'large'
• showLabel: boolean
• lightLabel: string
• darkLabel: string

Servicios

• ThemeService.toggleTheme(): Alterna tema
• ThemeService.setTheme(theme): Establece tema específico
• ThemeService.currentTheme$: Observable del tema actual

Hecho con ❤️ por Alfredynho