0

estoy tratando de seleccionar un boton cada vez que lo pulso cambia a un estilo diferente de mi css, el problema es que este código está hecho para el codigo css en linea, si yo quiero cogerlo por ejemplo de la carpeta

css/stilos.css

y hacer que jquery encuentre la clase de alli como debería hacerlo? esto se puede?

const switchButton = $("button#switch");
 
$('button').click(switchButton, function(e) {

    document.body.classList.toggle('dark'); //toggle the HTML body the class 'dark'
    switchButton.classList.toggle('active');//toggle the HTML button with the id='switch' with the class 'active'
});

adjunto tambien el codigo html

<button class="darkModeSwitch" id="switch">
      <span><i class="fas fa-moon"></i></span>   
      <span><i class="fas fa-sun"></i></span>

Me gustaría saber si estas lineas:

document.body.classList.toggle('dark'); //toggle the HTML body the class 'dark'

switchButton.classList.toggle('active');//toggle the HTML button with the id='switch' with the class 'active'

hay alguna forma de llamarlas de otro modo que yo desconozco para acceder a este fichero css externo y que consiga estas clases.

4
  • Vincula ese archivo css en tu html
    – John Doe
    Commented el 20 abr. 2021 a las 16:49
  • No es con jQuery, pero tal vez esta respuesta pueda servirte; carga una hoja de estilos adicional al activar el modo oscuro.
    – Triby
    Commented el 20 abr. 2021 a las 16:55
  • no es exactamente lo que busco, pero seguramente me sirva mas adelante esta respuesta, la guardaré. Habría algun modo de colocar las clases de una hoja externa de css ? por jquery ? o tendre que ir a colocarlo en linea para que si lo detecte bien? Commented el 20 abr. 2021 a las 17:33
  • @JohnDoe la ruta del css seria algo asi css/stilos.css las clases que coge son dark y active que estan definidas en este css, no hace falta añadirlas creo yo ya que el efecto que hacen como tal no es el motivo de la pregunta sino, el jquery y como puede acceder a estas clases.Pero si es totalmente necesario las adjunto. Commented el 20 abr. 2021 a las 17:35

1 respuesta 1

0

Puedes estilizar la pagina entera en dos colores o diferentes estilos fácilmente mediante css y en js modificarle un atributo o clase a la etiqueta <body> y cambiara los estilos.

Ejemplo

css:

body{
  background: #fff; //---------> estilos de body generales
}
body.dark-mode{
  background: #000; //---------> estilos de body generales en dark-mode
  color: #fff;
}
//---------------
//BOTON
body button.darkModeSwitch{
  //.... Codigo del boton
}
body.dark-mode button.darkModeSwitch{
  //.... Codigo del boton en dark-mode
}
//---------------
//LUNA Y SOL
body button.darkModeSwitch .moon{
  display: none; //--------> esconder la luna
}
body.dark-mode button.darkModeSwitch .sun{
  display: none; //---------> esconde el sol en dark-mode
}

js:

const switchButton = $("button#switch");
 
$('button').click(switchButton, function(e) {

    document.body.classList.toggle('dark-mode'); //toggle dark-mode
});

html:

<button class="darkModeSwitch" id="switch">
      <span><i class="fas fa-moon moon"></i></span>   
      <span><i class="fas fa-sun sun"></i></span>
</button>

Si vas a hacer modificaciones a gran escala de la web cuando se vea en dark-web puedes usar variables de css Doc de W3Schools

Este metodo es util para no ir uno a uno dandole clases a los elementos en js

4
  • el css lo puedo crear en una hoja externa y lo cogera?? o todo esto es css en linea?Necesito crearlo en una hoja externa Commented el 20 abr. 2021 a las 19:01
  • El css puede ser hoja externa, lo unico que afecta es la class="dark-mode", porque los estilos de body.dark-mode se sobreescribira al css normal. Solo en js le añades la clase o lo borras y css hara su efecto
    – ABC
    Commented el 20 abr. 2021 a las 20:25
  • no termino de entenderte entonces si el código que implementas aqui tu de css esta en la hoja externa de ModoOscuro.css (por ejemplo), el js en otra hoja externa y el html por otro ladod eberia funcionar bien ? Commented el 21 abr. 2021 a las 15:32
  • si porque al final en html las incluyes
    – ABC
    Commented el 21 abr. 2021 a las 16:35

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.