KardoCSS

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