Estoy tratando de implementar el modo oscuro en el proyecto de mi sitio web, lo hice para la parte del cuerpo con js, pero no puedo hacerlo para la barra de navegación usando la clase 'barra de navegación'. Aquí están mis códigos js:

 function darkMode() { var element = document.body; var navbar = document.getElementById("navbar"); element.classList.toggle("dark-mode");

Como puede ver, es solo para el elemento del cuerpo. Cuando intento crear una variable para la barra de navegación, no funciona.

 <div id="navbar" class="navbar"> <div class="navbar_left"> <a href="index.php"> <img src="img/logo_transparent.png"> </a> </div> <form class="navbar_mid" action="./action_page.php" method="get"> <input type="text" id="search" placeholder="Search.." name="search"> <button id="searchbutton" type="submit"><i class="fa fa-search"></i></button> </form> <div class="navbar_right"> <?php echo $multipleBtn; ?> </div> </div>

Estos son mis códigos de barra de navegación. Si puedo escribir códigos js correctos, puedo manejar los códigos css. ¿Me puedes ayudar?

ACTUALIZAR

Probé body.dark-mode #navbar {background color:#ddd;} y funcionó. Pero solo para mi archivo index.php como puede ver a continuación:

pero mi otro archivo php se ve así:

Realmente revisé los códigos dos veces, los archivos de css son los mismos para ambas páginas y están implementados para ambas. ¿Me podrían ayudar con este problema?