Why does hover stop working after a function that changes html style?

Question

css

I created a button in html via input type by setting a function in onclick (named it darkmode)
and in JavaScript this switch changes the color of other buttons (on which hover is written, this hover changes color on hover).
So, after I click on the darkmode switch (the background-color and color of the buttons on which hover is changing) the color does not change when the cursor is hovered over the button.
darkmode switch code

<label class="switch"><input type="checkbox" onclick="darkmode()"><span class="slider">

@mixin button {width:250px;height: 40px; font-size: $smallF;font-family: $titF; background-color: $Dark; color: white; position: absolute; top: 150px; border-radius: 10px;&:hover{transition: 0.5s ease 0.1s; background-color: red;}}
.button_EGS {@include button; left: 30%;}

//Темный режим
function darkmode(){
    if(h.innerHTML==='Светлый режим') //Да, оттого что у меня есть div с текстом "Светлый режим" я меняю цвет
    {document.body.style.backgroundColor = '#212121';

    h.innerHTML='Темный режим';h.style.color='#dcddd8';

    [passEGS, passSteam, passgoogle, passspotify,passds].forEach(element => {element.style.color = '#f2f3f4'});
    [btnEGS,btnSteam,btnGoogle,btnSpotify,returnbtn,btnDS].forEach(element => {element.style.backgroundColor ='#f2f3f4';element.style.color = 'black'})}
   
    else
    {document.body.style.backgroundColor = '#CCCCCC';
    h.innerHTML='Светлый режим';h.style.color='black';
    [passEGS, passSteam, passgoogle, passspotify,passds].forEach(element => {element.style.color = 'Black'});
    [btnEGS,btnSteam,btnGoogle,returnbtn,btnSpotify,btnDS].forEach(element => {element.style.color ='#f2f3f4';element.style.backgroundColor = 'black'});}}