I'm working on a portfolio website and I have a menu bar at the top with 3 buttons.
My issue is that, when I change the theme of the page from dark to light with a toggle, effects on hover for some elements such as buttons stops working.

我在一个投资组合网站上工作，我在顶部有一个菜单栏与3个按钮。我的问题是，当我使用切换将页面主题从深色更改为浅色时，按钮等某些元素的悬停效果停止工作。

HTML

超文本标记语言

<div class="container-menu">
    <button class="menu-button" id="home">Home</button>
    <button class="menu-button" id="project">Projects</button>
    <button class="menu-button" id="about">About Me</button>
</div>

CSS

CSS

.container-menu{
    padding-top: 0.5em;
    display: flex;
    justify-content: space-around;
    width: 20em;
}
.menu-button{
    font-size: 20;
    width: fit-content;
    height: 2em;
    padding-top: 0;
    padding-bottom: 0;
    border: 0;  
    background-color: rgb(10, 0, 10);
    color: #f0f0f0;
    cursor: pointer; 
}

I have a toggle switch that changes the page from light mode to dark mode with the help of javascript.

我有一个切换开关，可以在Java脚本的帮助下将页面从亮模式切换到暗模式。

js

JS

const checkbox=document.querySelector(".theme-checkbox");
const containertop=document.querySelector(".container-top");
const menubuttons = document.querySelectorAll(".menu-button");

checkbox.addEventListener("change", () => {
    if(checkbox.checked){
        document.body.style.backgroundColor="#f0f0f0";
        document.body.style.color="#0a000a";
        containertop.style.backgroundColor="#f0f0f0";
        menubuttons.forEach((button) => {
            button.style.backgroundColor = "#f0f0f0";
            button.style.color = "#0a000a";
        });
    } else {
        document.body.style.backgroundColor="#0a000a";
        document.body.style.color="#f0f0f0";
        containertop.style.backgroundColor="#0a000a";
        menubuttons.forEach((button) => {
            button.style.backgroundColor = "#0a000a";
            button.style.color = "#f0f0f0";
        });
    }
});

Just giving

只是给予而已

.menu-button:hover{
    color: rgb(255, 105, 105);
    transition-duration: 0.3s;
}

Makes the color of the button change when I hover but once I toggle to light mode or even toggle back to dark mode, the hover effect does not work. This seems to be some issue with the fact that I am changing the color of the text on hover as well as during theme change. Is there any way to get around this?

使按钮的颜色在我悬停时改变，但一旦我切换到浅色模式，甚至切换回深色模式，悬停效果就不起作用。这似乎是一个问题，因为我在悬停时以及在主题更改期间更改了文本的颜色。有什么办法可以绕过这件事吗？

Doing the following works but it is unstable. When i switch to light mode, the text color changes to the hover color and when I hover over the button, it changes back to black and then the hover function works. Is there any alternative to this?

执行以下操作虽然有效，但并不稳定。当我切换到灯光模式时，文本颜色会变为悬停颜色，当我将鼠标悬停在按钮上时，它会变回黑色，然后悬停功能就会起作用。除了这一点，还有其他选择吗？

.menu-button:hover{
    color: rgb(255, 105, 105) !important;
    transition-duration: 0.3s !important;
}

Instead of changing the styles directly on your Javascript, change to a toggle to add a property definid on your CSS code (Dark mode and Light Mode), and then you can definy the styles for your button for both modes.

不是直接在您的Java脚本上更改样式，而是切换到在您的CSS代码上添加一个属性finid(深色模式和浅色模式)，然后您可以为这两种模式定义按钮的样式。

CSS:

CSS：

.dark-mode {
    background-color: rgb(10, 0, 10);
    color: #f0f0f0;
}

.light-mode {
    background-color: #f0f0f0;
    color: #0a000a;
}
.menu-button:hover{
    color: rgb(255, 105, 105);
    transition-duration: 0.3s;
}

Javascript:

JavaScript：

const checkbox=document.querySelector(".theme-checkbox");
const containertop=document.querySelector(".container-top");
const menubuttons = document.querySelectorAll(".menu-button");

checkbox.addEventListener("change", () => {
    if(checkbox.checked){
        document.body.classList.remove("dark-mode");
        document.body.classList.add("light-mode");
        containerTop.classList.remove("dark-mode");
        containerTop.classList.add("light-mode");
        });
    } else {
        document.body.classList.remove("light-mode");
        document.body.classList.add("dark-mode");
        containerTop.classList.remove("light-mode");
        containerTop.classList.add("dark-mode");
        });
    }
});

The style attribute is more important than class.

style属性比class更重要。

You can change this behavior by adding a custom class name instead of a "style" attribute"

您可以通过添加自定义类名而不是“style”属性来更改此行为。

 document.body.classList.add("dark");

and create a css class for that:

并为此创建一个css类：

.dark {
  background-color: #0a000a;
  color: #f0f0f0;
}

I think both Alex and Dansky answers are good answers.

我认为亚历克斯和丹斯基的答案都是好答案。

You are basically adding a style attribute into the button tag with javascript,
So the result of that script, is that after the button is clicked you will have an inline style for that button, something like this:

您基本上是使用javascrip将样式属性添加到按钮标记中，因此该脚本的结果是，在单击按钮之后，您将拥有该按钮的内联样式，如下所示：

<button class="menu-button" id="about" style="background-color:#0a000a;color:#f0f0f0;">

and something you want to avoid,
as the inline style attribute is stronger than any other css class instruction you can assign after, and will win over any other instruction.
I added an example of inline style in one button just to show the effect of it.

还有一些您想要避免的东西，因为内联样式属性比您可以在后面赋值的任何其他CSS类指令更强，并且会胜过任何其他指令。我在一个按钮中添加了一个内联样式的示例，只是为了展示它的效果。

To add "dark-mode" class to the body with javascript, using
classlist.add("dark-mode")
or, as I suggest here,
classList.toggle("dark-mode")
will require less javascript code,
and you can then style all the elements in the css part, using '.dark-mode .your_element_class' or '.dark-mode #your_element_id'

要使用Java脚本将“暗模式”类添加到正文中，请使用classlist.add(“暗模式”)，或者，正如我在这里建议的那样，使用classList.toglg(“暗模式”)将需要较少的javascript代码，然后您可以使用‘.Dark-mode.you_Element_Class’或‘.Dark-mode#you_Element_id’来样式化CSS部件中的所有元素

See an example with the css, js and html in one page,

查看一个页面中包含css、js和html的示例。

then if you have the same background in the menu container, in the body and for the buttons, I would think that the buttons are like transparent buttons, and I would remove the button's background color from the css, but that really depends on your project.

然后如果你在菜单容器中有相同的背景，在主体和按钮中，我会认为按钮就像透明按钮一样，我会从css中删除按钮的背景颜色，但这真的取决于你的项目。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page Title</title>
    
    <style>
    body{
        /* added style for the page, for demo purpose.
        base font size is declared here 1em = 16px in many modern browsers  */
        font-size: 1em;
        margin: 1em auto;
        padding: 0;
        /* default mode style of body  */
        background-color: #f0f0f0;
        color: #0a000a;
    }
    /* body + dark mode - dark mode style of body  */
    .dark-mode {
        background-color: #0a000a;
        color: #f0f0f0;
    }

     .container-menu{
        padding: 0.5em 0 0 0;
        display: flex;
        justify-content: space-around;
        /* width removed temporarily, as button resulted cut
        width: 20em; 
        */
    }
    .menu-button{
        /* font size were declared as '20' without units, changed to 1.2 (19 px circa)  */
        font-size: 1.2rem;
        /* width/height removed temporarily, as menu items were not spaced around with this
        width: fit-content;
        height: 2em;
        */
        padding: 0 auto;
        border: 0;
        cursor: pointer;
        /* default mode style of menu buttons  */
        background: #f0f0f0;
        color: #0a000a;
    }
    /* menu-button + dark mode - dark mode style of menu buttons  */
    .dark-mode .menu-button{
      background: #0a000a;
      color: #f0f0f0;
    }

    .menu-button:hover{
        color: rgb(255, 105, 105);
        transition-duration: 0.3s;
    }
    </style>
</head>
<body>

<div class="container-menu">
    <button class="menu-button" id="home">Home</button>
    <button class="menu-button" id="project">Projects</button>
    <button class="menu-button" id="about">About Me</button>
    <!-- added a button to show what happens with inline style -->
    <button class="menu-button" id="override" style="background-color:#0a000a;color:#f0f0f0;">Try to hover</button>
    <!-- added a button to toggle the dark mode -->
    <button class="menu-button" id="darkMode" onclick="toggleMode()"> Toggle Mode</button>
</div>


<script>
    //function triggered by button darkMode
    function toggleMode() {
      var el = document.body;
      //each time the function is triggered, it adds or removes the class
      el.classList.toggle("dark-mode");
    }
</script>

</body>
</html>

I also found that the font size you declared fo the buttons was "20" without the unit (px, em, % etc) but that was not causing issues with the rest of the css instructions.

我还发现，您为按钮声明的字体大小为“20”，没有单位(px，em，%等)，但这不会导致其余的css指令出现问题。