0

tengo dos ficheros css seperados, uno con la versión light y otro con la dark de un sitio web. Consigo hacer un toggle que intercambia dichos css, pero luego no se como guardar esa cookie y que cuando se entre en otra pagina del sitio se mantenga ese css activo.

3
  • Creo que lo que estás buscando es localStorage
    – KBeDev
    el 11 ene. 2021 a las 16:23
  • ¿y cuál es exactamente el problema que tienes?
    – Vlady
    el 11 ene. 2021 a las 16:51
  • Me funciona todo bien, el problema que tengo es que se mantenga el tema activo en las diferentes páginas. Si lo hago mediante locaStorage y cuando se cargue la página cambio el tema, se ve un efecto muy feo, porque se aprecia el cambio. Lo suyo sería poder guardar ese tema que guardo con localStorage en el servidor y que desde allí en la próxima carga de la página mande el fichero css correcto.
    – Jose
    el 11 ene. 2021 a las 16:56

3 respuestas 3

0

Tienes que controlar localStorage, y ejecutar un par de funciones en javascript que agregan y quitan un css de donde lo quieres agregar. En este caso, el body.

MODO OSCURO -> https://jsfiddle.net/k4um3axp/

1
  • El problema es que si cargo el css despues de que la página cargue, se nota mucho el efecto, lo suyo sería cargar desde el ppio. con el css correcto, pero entonces hbrái que hacerlo con php en el servidor no?
    – Jose
    el 11 ene. 2021 a las 16:51
0

Si deseas cargar archivos .css diferentes dependiendo de que tema de la web tenga, debes de manipular si o si el DOM, a traves de la funciones de:

document.createElement

HTMLElement.removeChild(child)

Con la primera opción creas el recurso CSS (<link>) y con el segundo lo remueves del DOM. Ahora bien estos recursos CSS deben ser colocados en la sección de metadatos, para ello puedes referenciar al <head> con:

document.head

Debes de tener una bandera booleana que indica un estado el cual sería el modo oscuro que desees, esta información la puedes guardar el localStorage o proveniente de una base de datos, y con esto puedes ir agregando o eliminando el recurso como nodo desde el DOM.

Aqui te dejo un ejemplo que acabo de hacer:

https://jsfiddle.net/znareak/5f1qmdg3/9/

7
  • pero no se mantiene entre páginas no?
    – Jose
    el 11 ene. 2021 a las 17:02
  • Cómo te he dicho, los datos se deben de almacenar en localStorage/sessionStorage para que sean persistentes y se mantengan si la pagina se refresca o cambie de ruta, eso es tu trabajo implementarselo, yo hice un ejemplo sencillo usando una bandera lógica (flag = true), pero esa variable puede ser bien almacenada en una cache del navegador ... el 11 ene. 2021 a las 17:03
  • Si mantengo bien la sesion y todo lo unico es que necesito que se cargue el css antes que nada.
    – Jose
    el 11 ene. 2021 a las 17:19
  • Con el script cargas lo que se haya guardado. Si nunca borras el localstorage, cargara el estado que tenga en ese momento.
    – Excorpion
    el 11 ene. 2021 a las 17:42
  • Si se almacena y guarda bien , el problema es que se carga el estilo después de cargar toda la página y claro el efecto es bastante molesto. ¿no se puede cargar la hoja de estilo ants de que se cargue la web?
    – Jose
    el 11 ene. 2021 a las 17:48
-1

Pero el problema es cuando los estilos no vienen definidos en la web , sino en ficheros css distintos, como se cargan dinámicamente antes de la carga de la web?

1
  • Con la configuracion asignada a la pagina. Sigue siendo local storage, pero al momento de cargar, cargar ese CSS si que el local storage lo dice asi.
    – Excorpion
    el 11 ene. 2021 a las 16:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.