IndiePackPara añadir modo oscuro en Next.js 15 sin parpadeo ni diferencias de hidratación, decide el tema antes del primer pintado siempre que sea posible, aplica un único atributo o clase al documento y expresa los colores mediante variables CSS. El servidor y el primer render del cliente deben partir del mismo estado visible.
Índice
¿Por qué aparece un flash claro antes del modo oscuro?
El flash aparece cuando el HTML inicial no conoce el tema y un efecto cliente lo cambia después del primer pintado. También puede surgir una advertencia de hidratación si el servidor genera una etiqueta distinta de la que el navegador espera al arrancar.
Una cookie permite al servidor leer una elección explícita. Para la preferencia del sistema, un script inicial mínimo puede aplicar el atributo antes de pintar; mantenlo pequeño, determinista y sin depender de llamadas de red.
¿Cuál es la forma rápida: usar los temas de IndiePack?
La forma rápida es partir de IndiePack, cuya ruta Next.js incluye componentes listos para producción y modos claro y oscuro de fábrica. Así personalizas la identidad visual sin volver a resolver el estado inicial y la estructura del tema.
Ver IndiePackVer precio¿Cómo se organizan los colores para no duplicar cada componente?
Los colores se organizan con tokens semánticos como fondo, superficie, texto, borde y acción, cuyos valores cambian bajo el atributo de tema. Los componentes consumen esos nombres por función y no preguntan si están en claro u oscuro.
Incluye estados de foco, error, desactivado y selección. Cambiar solo fondo y texto principal deja gráficos, sombras o formularios con contraste insuficiente.
¿Cómo se construye un selector de tema accesible?
El selector se construye como un control con nombre comprensible, estado actual perceptible por tecnología asistiva y uso completo con teclado. Si alterna solo entre dos opciones, comunica la siguiente acción; si ofrece sistema, presenta las tres elecciones de forma explícita.
Guarda la elección al activarla y actualiza el documento sin esperar otra navegación. El artículo sobre starter con dark mode e i18n sitúa el tema dentro del recorrido completo de un SaaS, no como una pantalla aislada.
¿Cómo se verifica el modo oscuro sin errores de hidratación?
Se verifica recargando directamente rutas públicas y privadas con cada elección, ralentizando JavaScript y navegando entre páginas. Prueba también sin preferencia guardada, con el sistema cambiando de tema y con la sesión iniciada en otro dispositivo.
Revisa contraste, logotipos, gráficos y formularios en móvil y escritorio, además de la consola del navegador. IndiePack aporta la base visual en ambos temas; una decisión inicial coherente hace que esa interfaz aparezca correcta desde el primer fotograma.