This website uses cookies to improve the user experience, more information on the legal information path.
Notas
0
años
0
meses
0
días
0
horas
0
minus
0
segus
00
2
Tema oscuro con Nextjs
Hay muchas formas de hacer la gestión de temas de estilos en React y Nextjs, pero todas ellas pasan por tener un array/objecto con todos los estilos de cada uno de los distintos temas, también
otra de las formas es usar variables de css o scss estas últimas están en cada vez en más deshuso. Yo, en particular voy a usar variables de css y fijar un tema por defecto en mi _document . ¿ Por qué aquí ?
Por que _document se ejecuta en servidor no como _app que lo hace en cliente y si usas un useEffect para setear tu tema por defecto o detectar el que tiene el usuario en su sistema operativo,
en el tiempo que se tarda en hacer esta comprobación y añadirlo, puede darse un parpadeo en los estilos de la pagina. Eso puede resultar extraño.
name={f({ id: theme === dark ? 'settings.dark' : 'settings.light' })}
onClick={toggleTheme}
/>
</section>
<section className={styles.confg}></section>
</div>
);
};
Para hacer la prueba en vivo, puedes cambiar el tema en tu sistema operativo y verás que mi sitio web se actualiza automáticamente o también puedes ir a mi pagina de configuración y cambiar el tema.
Todo el código en mi repositorio de github, si te gusta este proyecto, o si el contenido te ha ayudado en algo puedes recompensarme con una ⭐️, Gracias!