Dark mode: cómo funciona en el Starter

Toggle manual + preferencia del sistema. Cómo agregar dark mode a tus componentes custom.

Actualizado el min de lectura

Cómo funciona

El Starter usa la estrategia "class" de Tailwind. Cuando el usuario activa dark mode, se agrega la clase "dark" al <html>. La preferencia se guarda en localStorage.

Variantes dark:

En tus componentes usa clases dark:bg-neutral-900, dark:text-white, dark:border-neutral-800. Tailwind las aplica solo cuando la clase "dark" está presente.

Colores semánticos

El Starter expone clases utilitarias como color-titles, color-paragraph que ya manejan light/dark internamente. Úsalas en lugar de text-neutral-* directos.

Imágenes

Si tu imagen no se ve bien en dark, usa dos versiones con class="block dark:hidden" y class="hidden dark:block".

Toggle

El partial components/dark_mode_toggle ya tiene el botón. Llámalo donde lo necesites o reemplázalo por el switch que viene en el header.

¿Te fue útil este artículo?

✓ ¡Gracias por tu feedback!

Lamentamos que no haya sido lo que buscabas. ¿Quieres contactarnos directamente?

Contactar soporte

¿Aún necesitas ayuda?

Si no encontraste lo que buscabas, contáctanos y te ayudaremos lo antes posible.

Contactar soporte