Question

我正在尝试在我的应用程序中使用暗表，该表中有数据表。由于某些原因，我必须使用Javascript设置表格行背景的悬停颜色。现在，在黑暗和明亮模式下只有一种背景悬停颜色。例如，如果我的背景悬停效果在浅色模式下使用Javascript设置为红色，那么对于深色模式也将其设置为红色，这看起来很可怕。如果我将mouseout和mouseover事件放在if statements函数的switchTheme内，则无法使用。

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

这是代码段：

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

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

$("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)
});

我认为最好删除background上的mouseout，以默认设置返回样式表定义的背景：

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

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

Answer 2

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

var(--bg-color-primary)

您实际上不需要任何JavaScript来访问主题为浅色和深色的网站。希望能有所帮助！

Answer 3

使用以下代码

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

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

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

3 个答案: