El modo oscuro ya no es un lujo, es imprescindible: añádelo a tu app de Vue y Tailwind en 10 minutos

El modo oscuro se ha convertido en algo que los usuarios esperan. No solo cansa menos la vista, también ahorra batería en pantallas OLED y, seamos sinceros, se ve espectacular. Durante mucho tiempo implementarlo fue un dolor de cabeza, pero con Tailwind y Vue es sorprendentemente sencillo.

Hoy te enseño a añadir un selector de modo oscuro a tu aplicación en menos de 10 minutos, con código limpio y profesional.

La magia de Tailwind: el modificador dark:

La clave de la sencillez es el modificador dark: de Tailwind. Puedes aplicar cualquier clase de utilidad en modo oscuro.

<div class="bg-white dark:bg-slate-800 text-gray-900 dark:text-gray-100">
</div>

Cuando la clase dark está en el elemento <html> de tu documento, Tailwind aplica automáticamente las clases con el prefijo dark:.

Configura tu tailwind.config.js así:

// tailwind.config.js
module.exports = {
  darkMode: 'class', // <--- Usa 'class' en lugar de 'media'
  // ... resto de tu configuración
}

La implementación en Vue: un selector en un minuto

Ahora creemos la lógica para añadir y quitar la clase dark del documento.

<template>
  <button @click="toggleDarkMode" class="p-2 rounded-full transition-colors duration-300"
          :class="isDarkTheme ? 'bg-gray-800 text-white' : 'bg-gray-200 text-gray-800'">
      {{ isDarkTheme ? 'Modo claro' : 'Modo oscuro' }}
  </button>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';

const isDarkTheme = ref(false);

const toggleDarkMode = () => {
  isDarkTheme.value = !isDarkTheme.value;
  localStorage.setItem('theme', isDarkTheme.value ? 'dark' : 'light');
};

watch(isDarkTheme, (isDark) => {
  if (isDark) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
}, { immediate: true });

onMounted(() => {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    isDarkTheme.value = savedTheme === 'dark';
  } else {
    isDarkTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
  }
});
</script>

Explicación del código

• ref(false): usamos una referencia reactiva para controlar el estado del tema.
• toggleDarkMode: cambia el valor y lo guarda en localStorage.
• watch: escucha los cambios y aplica la clase dark a <html>.
• onMounted: al arrancar, revisa la preferencia guardada o la del sistema.

Conclusión

Añadir modo oscuro a tu app ya no es un proyecto de semanas; es un detalle que puedes implementar en minutos con las herramientas adecuadas. Demuestra que no solo construyes interfaces que funcionan: te importan la comodidad y la experiencia de tus usuarios.

Es un pequeño toque que te hace ver como un profesional que construye para personas.