Почему hover перестает работать после функции, в которой меняется стиль html?

Question

[Rasul]

Я создал кнопку в html через input type задав функцию в onclick (назвал её darkmode)
и в JavaScript этот переключатель меняет цвет других кнопок(на которых написан hover, этот hover меняет цвет при наведении).
Так вот, после того, как я нажимаю на переключатель darkmode(меняется background-color и color кнопок, на которых стоит hover) цвет при наведении курсором на кнопку не меняется.
Код переключателя darkmode

<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'});}}

Comments

[Rasul]

Отмечу, что даже после того как я меняю обратно, hover не работает

[Anonimmus]

Просто потому что навешивается через style
style.color='black'

Напоминаю что стилизация происходит по приоритету.

1.style
2. Id
3. Класс

То есть на вашем элементе поверх создается стайл. Незнаю поч не возвращается, там консоль надо чекать.
Я бы рекомендовал изменять через классы.

[Ankhena]

Поддерживать стили написанными таким образом в JS, очень сложно. Вы уже сами в этом убедились.
Заметно удобнее манипулировать классами.
Причем, класс темной темы вы можете повесть один раз на body или на на какой-то большой контейнер.

Почитайте про кастомные свойства CSS. Для создания темной темы (или для любых других манипуляций с темами) подходят идеально. Вы лишь меняете само кастомное свойство.

.dark {
  --bg: black;
  --color: white;
}

.light {
  --bg: white;
  --color: black;
}

.btn {
  color: var(--color);
  background: var(--bg);
}

У самих кнопок ничего не меняется. Меняется только класс у body и соответственно, применяются нужные цвета.

[Rasul]

Ankhena, Anonimmus, Я понял в чём проблема, из-за того, что я backgroundColor поменял через JS, в CSS hover перестал работать.