Creé una función que cambiaba los colores de mi sitio cuando hacía clic (un tema de modo claro), y con eso, tenía que seleccionar los elementos a los que se les cambiaría el color, uno por uno, lo que dejaba el código enorme. ¿Cómo podría resumir esta selección?
let h = document.querySelector('header'); h.classList.toggle('bright-mode'); let b = document.querySelector('body'); b.classList.toggle('bright-mode'); let h1 = document.querySelector('h1'); h1.classList.toggle('bright-mode'); let h2 = document.querySelector('h2'); h2.classList.toggle('bright-mode'); let h3 = document.querySelector('h3'); h3.classList.toggle('bright-mode'); let h4 = document.querySelector('h4'); h4.classList.toggle('bright-mode'); let si = document.querySelector('.section-inicio'); si.classList.toggle('bright-mode'); let ss = document.querySelector('.section-sobre'); ss.classList.toggle('bright-mode'); let sl = document.querySelector('.section-linguagens'); sl.classList.toggle('bright-mode'); }¿Por qué no simplemente seleccionarlos todos a la vez con querySelectorAll y luego simplemente recorrerlos y alternar la clase?
document.querySelectorAll('header, body, h1, h2, h3, h4, .section-inicio, .section-sobre, .section-linguagens').forEach( el => el.classList.toggle('bright-mode') )solo 1 línea de código ;)
Debe agregar la clase bright-mode solo a la etiqueta <body> . Antes de eso, en su CSS defina todos los selectores y sus colores brillantes debajo de ese selector principal.
var darkMode = false function handle_dark_click() { if (darkMode == true) { disable_dark(); } else { enable_dark(); } darkMode = !darkMode; } function enable_dark() { document.body.classList.add("bright-mode"); } function disable_dark() { document.body.classList.remove("bright-mode"); } document.getElementById('toggle-theme').addEventListener('click', handle_dark_click) /* default is dark */ body { background: #333; } h1 { color: white; } div { border: 1px solid white; } /* all of these are bright mode */ body.bright-mode { background: white; } body.bright-mode h1 { color: black; } body.bright-mode div { border-color: black; } <body> <div> <h1>hello world</h1> </div> <button id="toggle-theme">toggle theme</button> </body>