KardoCSS - Dark Mode Demo

## Dark Mode Demo

Prueba el modo oscuro automático y manual de KardoCSS

Automático con prefers-color-scheme Toggle manual con JavaScript Transiciones suaves

## Características

🌓

### Modo Automático

Respeta la preferencia del sistema con `prefers-color-scheme`

🎨

### Colores Adaptados

Paleta de colores optimizada para modo oscuro

⚡

### Fácil de Usar

Solo agrega el prefijo `dark:` a tus clases

💾

### Persistente

La preferencia se guarda en localStorage

♿

### Accesible

Cumple con WCAG 2.1 AA en ambos modos

🚀

### Sin Overhead

Solo +13 KB para soporte completo de dark mode

## Ejemplos de Código

### Ejemplo Básico

    <div class="k-bg-white dark:k-bg-gray-900 k-text-gray-900 dark:k-text-white">
      Contenido que se adapta automáticamente
    </div>

### Tarjetas Responsivas

    <div class="k-bg-white dark:k-bg-gray-800 k-border k-border-gray-200 dark:k-border-gray-700">
      <h3 class="k-text-gray-900 dark:k-text-white">Título</h3>
      <p class="k-text-gray-700 dark:k-text-gray-300">Contenido</p>
    </div>

### JavaScript Toggle

    function toggleDarkMode() {
      const isDark = document.documentElement.classList.toggle('dark');
      localStorage.setItem('theme', isDark ? 'dark' : 'light');
    }

## Paleta de Colores

Primary

Secondary

Success

Danger

Warning

Info

Gray

Contrast