background-color does not work when it is used in "classList.toggle()"

Question

I have the following codes:

HTML:

<div class="barraLateral" id="barraLateral">
    <ul class="menuVertical" id="menuVertical">             
        <li name="liCat" onclick="darkTheme()"><i class="mdi mdi-theme-light-dark mdi-24px"></i><a name="cat">Dark Theme</a></li>
        <li name="liCat" onclick="deslogar()"><i class="mdi mdi-close-circle-outline mdi-24px"></i><a name="cat">Logout</a></li>
    </ul>
</div>

Javascript:

function darkTheme() {
    document.getElementById("corpoPagina").classList.toggle('bodyDark');
    var liCat = document.getElementsByName("liCat");
    for (var i = 0; i <= liCat.length; i++) 
    {
        liCat[i].classList.toggle('menuDark');
    }
}

CSS:

.menuDark {
    background-color: red;
    border: 1px solid red;
}

When the user clicks on the button to flip Darktheme, the body changes the background color and the menu was to change too, but only changes the menu border.

In other words: When executing the darkTheme function, the attribute border: 1px solid red the attribute is already executed background-color: red is not executed.

Answer 1

The problem is in for, when the correct would be to use i < liCat.length and not:

i <= liCat.length

When traversing array, only the operator is used less than <, otherwise the variable i will have value greater than the number of items in the array returning error.