Trouble with changing a styled list transition conflicting with the transition from light mode to dark mode and vice versa

Question

When a user changes from light mode to dark mode, or vice versa, a 1s ease transition takes place. However, when the transition is taking place on a specific page with a styled list, the list is also taking a 1s ease transition. When a user hovers over a list item, the :hover selector conflicts. I've tried numerous different combinations these last couple days to try to make this work. I've even tried adding 0s !important to the transition, but this does not have the desired effect.

Thanks to everyone for their input and assistance.

Here's the styled list HTML:

<ul id="lists">
    <li><a href="#" class="list-link" title="Apple">Apple</a></li>
    <li><a href="#" class="list-link" title="Orange">Orange</a></li>
    <li><a href="#" class="list-link" title="Banana">Banana</a></li>
    <li><a href="#" class="list-link" title="Mango">Mango</a></li>
    <li><a href="#" class="list-link" title="Lime">Lime</a></li>
    <li><a href="#" class="list-link" title="Tomato">Tomato</a></li>
    <li><a href="#" class="list-link" title="Watermelon">Watermelon</a></li>
    <li><a href="#" class="list-link" title="Peaches">Peaches</a></li>
    <li><a href="#" class="list-link" title="Kiwi">Kiwi</a></li>
    <li><a href="#" class="list-link" title="Dragonfruit">Dragonfruit</a></li>
    <li><a href="#" class="list-link" title="Honeydew">Honeydew</a></li>
    <li><a href="#" class="list-link" title="Lemon">Lemon</a></li>
</ul>

And the styled list CSS:

#lists {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#lists li a.list-link {
    margin-top: -2px;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    display: block;
    transition: 2s !important
}

#lists li a.list-link:hover:not(.header) {
    background-color: #222;
    font-weight: bold;
}

.dark-mode #lists li a.list-link {
    background-color: #555;
    border: 2px solid white;
    color: white;
    transition: 2s ease !important;
}

.light-mode #lists li a.list-link {
    background-color: #C5C5C5;
    border: 2px solid black;
    color: black;
    transition: 2s ease !important;
}

.dark-mode #lists li a.list-link:hover {
    background-color: #02305A;
    color: white;
    transition: 0s;
}

.light-mode #lists li a.list-link:hover {
    background-color: #02305A;
    color: white;
    transition: 0s;
}

And here's the CSS for light/dark mode:

body {
    transition: background-color 1s ease-in;
}

/* DEFINE THE DIFFERENCE BETWEEN LIGHT AND DARK MODE */
.light-mode {
    background-color: #FFF;
    color: black;
}

.dark-mode {
    background-color: #000;
    color: white;
}