Soy nuevo en JavaScript. Por qué mi botón no cambia del color del sol al color de la luna y otros funcionan bien, simplemente no cambia el ícono.
let menu = document.querySelector('#menu-icon'); let navbar = document.querySelector('.nav-menu'); menu.onclick = () => { menu.classList.toggle('fa-xmark'); navbar.classList.toggle('active'); }; let themeButton = document.getElementById('theme-button'); themeButton.onclick = () => { themeButton.classList.toggle('fa-moon'); if (themeButton.classList.contains('fa-moon')) { document.body.classList.add('active'); } else { document.body.classList.remove('active'); } }; <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="nav-right"> <div><i class="fa-solid fa-bars" id="menu-icon"></i></div> <div><i class="fa-solid fa-sun" id="theme-button"></i></div> </div>El código está alternando la clase, el ícono no está cambiando porque tiene dos clases fa-sun y fa-moon que están peleando por las mismas propiedades CSS. El orden/especificidad de las reglas debe hacer que gane fa-sun . Mientras que en tu otro la clase que agregues gana.
No debe confiar en el orden de las clases en la hoja de estilo, por lo que debe alternar ambas clases.
let menu = document.querySelector('#menu-icon'); let navbar = document.querySelector('.nav-menu'); menu.onclick = () => { menu.classList.toggle('fa-xmark'); menu.classList.toggle('fa-bars'); // navbar.classList.toggle('active'); }; let themeButton = document.getElementById('theme-button'); themeButton.onclick = () => { themeButton.classList.toggle('fa-moon'); themeButton.classList.toggle('fa-sun'); if (themeButton.classList.contains('fa-moon')) { document.body.classList.add('active'); } else { document.body.classList.remove('active'); } }; <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="nav-right"> <div><i class="fa-solid fa-bars" id="menu-icon"></i></div> <div><i class="fa-solid fa-sun" id="theme-button"></i></div> </div>Está agregando/eliminando la clase fa-moon al hacer clic. Pero también debe eliminar/agregar la clase fa-sun al mismo tiempo. Si ambos nombres de clase están presentes, se utilizará la clase con mayor especificidad .
themeButton.onclick = () => { //This will remove `fa-moon` class if it's already there, add if not. themeButton.classList.toggle('fa-moon'); //You need to do the same for `fa-sun` class. Otherwise, the class never gets removed themeButton.classList.toggle('fa-sun'); if (themeButton.classList.contains('fa-moon')) { document.body.classList.add('active'); } else { document.body.classList.remove('active'); } };Simplemente alterne las clases de CSS en el elemento del body (como .is-darkMode o .is-menuOpen ).
Cambie sus íconos Fa usando el código HEX del ícono apropiado en el ::before pseudo:
const el = (sel, par) => (par||document).querySelector(sel); const elBody = el("body"); const toggleDarkMode = () => elBody.classList.toggle("is-darkMode"); const toggleMenuOpen = () => elBody.classList.toggle("is-menuOpen"); el("#theme-btn").addEventListener("click", toggleDarkMode); el("#menu-icon").addEventListener("click", toggleMenuOpen); /* DEFAULT STYLES (LIGHT MODE) */ body { background: #eee; transition: background 0.4s, color 0.4s; } #menu-nav { display: none; } /* DARK MODE STYLES: */ .is-darkMode { background: #444; color: #fff; } .is-darkMode #theme-btn::before { content: "\f186"; } /* Moon icon */ /* MENU OPEN STYLES: */ .is-menuOpen #menu-nav { display: block; } .is-menuOpen #menu-icon::before { content: "\f00d"; } /* × icon */ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> <div class="nav-right"> <div><i class="fa-solid fa-sun" id="theme-btn"></i></div> <div><i class="fa-solid fa-bars" id="menu-icon"></i></div> </div> <div id="menu-nav">MENU GOES HERE</div>