无法在暗模式/亮模式下的表格中设置不同的悬停背景颜色

Question

我正在我的应用程序中尝试暗模式，其中有一个包含数据的表格。出于某种原因，我必须使用 Javascript 设置表格行背景悬停颜色。现在暗模式和亮模式都只有一种背景悬停颜色。例如，如果我的背景悬停效果使用 Javascript 设置为红色，用于浅色模式，那么它对于深色模式也是红色的，这看起来很糟糕。如果我将mouseout 和mouseover 事件放在if statements 中的switchTheme 函数中，它不起作用。

我想要的是根据我所处的模式将背景悬停颜色设置为不同。如果我处于浅色模式，我会说红色/白色悬停背景颜色，当我处于深色模式时，它会自动更改为蓝色/绿色。

这是sn-p：

const toggleSwitch = document.querySelector('#dark-mode-button input[type="checkbox"]');

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        
    }else {        
        document.documentElement.setAttribute('data-theme', 'light');
        
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);


$("body").on("mouseover", "table tr", function() {
    $(this).css("background", "red");
});

$("body").on("mouseout", "table tr", function() {
    $(this).css("background", "#fff");
});

:root {
  --primary-color: #495057;
  --bg-color-primary: #F5F5F5;
}

body{
  background-color: var(--bg-color-primary); 
}

[data-theme="dark"] {
  --primary-color: #8899A6;
  --bg-color-primary: #15202B;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  background-color: #fff;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dark-mode-button">
    <input id="chck" type="checkbox">Dark Mode
    <label for="chck" class="check-trail">
      <span class="check-handler"></span>
    </label>
</div>

<table class="table">
    <thead>
      <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
      </tr>
    </thead>  
    <tbody>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </tbody>                     
</table>

Answer 1

保持当前代码最快/最简单的方法是检查您使用switchTheme() 设置的data-theme 属性并相应地设置颜色。

$("body").on("mouseover", "table tr", function(){
    let tColor = (document.documentElement.getAttribute('data-theme') === 'dark') ? 'blue' : 'red';
    $(this).css("background", tColor)
});

$("body").on("mouseout", "table tr", function(){
    let tColor = (document.documentElement.getAttribute('data-theme') === 'dark') ? 'green' : 'white';
    $(this).css("background", tColor)
});

我认为最好只删除 mouseout 上的 background 以默认回到样式表定义的背景：

$("body").on("mouseout", "table tr", function(){
    $(this).css("background", "")
});

然而，像这样，样式表中并没有真正定义颜色。或者，您可以根据主题在样式表中设置两个隐藏元素（悬停/正常）的background，并获取计算样式。

Answer 2

使用下面的代码

var color = ""; 
function switchTheme(e) {
if (e.target.checked) {
    document.documentElement.setAttribute('data-theme', 'dark');
    color = "red"; 
}
else { 
document.documentElement.setAttribute('data-theme', 'light');
color = "gray";
} 

$("body").on("mouseover", "table tr", function() {
    $(this).css("background", color);
});

$("body").on("mouseout", "table tr", function() {
    $(this).css("background", color);
});

当我们点击复选框时，我们将颜色存储在一个变量中， 当悬停在桌子上时，我们正在设置值

Answer 3

您可以将元素的:hover 设置为您的变量值，例如

var(--bg-color-primary)

对于浅色和深色主题的网站，您实际上不需要任何 JavaScript。 希望对您有所帮助！