i m trying to implement dark mode to my website project, i did it for the body part with js, but i can't do it for navigation bar using 'navbar' class. Here is my js codes:

function darkMode() {
var element = document.body;
var navbar = document.getElementById("navbar");

element.classList.toggle("dark-mode");

As you can see it's just for the body element. When i try to create variable for navbar it doesn't work.

    <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>

This is my navbar codes. If i can write a correct js codes i can handle the css codes. Can you help me?

UPDATE

I tried body.dark-mode #navbar {background color:#ddd;} and it actually worked. But only for my index.php file as you can see below:

but my other php file it looks like this:

I really checked the codes twice, css 's files are the same for both pages and implemented for both. Could you help me with this problem?