如何在深色模式下显示浅色徽标？

Question

我正在使用暗模式。成功运行。脚本中有两种类型的徽标：浅色和深色。但是我的 css 文件中没有徽标。我正在动态获取徽标。我想在深色模式下显示浅色徽标。当我切换到深色模式时，我还希望浅色徽标处于活动状态。我做了很多研究和试验，但我没有得到任何结果。我不熟悉javascript。我很乐意为您提供任何帮助。

这就是我的目标。

菜单.php （浅色标志：<?=$setlogo?>，深色标志：<?=$setlogow?>

（也许我应该在这里写一个条件。检查它是否进入暗模式。但是这个过程发生在javascript中。我如何在php中检查javascript中的条件？）

<div class="navbar-brand">
    <a href="<?=SITE?>"><img src="<?=SITE?>../images/<?=$setlogo?>" alt="<?=$sitename?>" class="img-fluid logo"></a>
</div> 

我的 CSS 链接：

<link rel="stylesheet" title="light" href="<?=SITE?>assets/css/site.min.css">
<link rel="stylesheet" title="dark" href="<?=SITE?>assets/css/site-dark.min.css">

我的js：

function switchMode() {

  var mode = document.getElementById("themeSwitch"); 

  if (mode.checked) {
    setActiveStyleSheet('dark');
    localStorage.setItem("ex_mode", "dark");
     
  } else {
    setActiveStyleSheet('light');
    localStorage.setItem("ex_mode", "light");
  }
}

并接听电话：

<script type="text/javascript">
    window.addEventListener('load', function() {
     setActiveStyleSheet(localStorage.getItem('ex_mode') ? localStorage.getItem('ex_mode') :"light" );
     document.getElementById("themeSwitch").checked = localStorage.getItem('ex_mode')=="dark"  ? true:false ;
 });

Answer 1

两张图片：

<div class="navbar-brand">
   <a href="">
     <img class="light" src="..." />
     <img class="dark" src="..." />
   </a>
</div> 

轻量级CSS：

.navbar-brand img { display: none; }
.navbar-brand img.light { display: inline-block; }

黑暗的CSS：

.navbar-brand img { display: none; }
.navbar-brand img.dark { display: inline-block; }

或者只是使用背景图片，必须添加更多样式以确保显示整个图片

.navbar-brand a {
  background-image: url('light');
}

或者如果你让图片的背景透明，你可以在 CSS 中使用 filter: invert(1); 来翻转颜色。

img {
   filter: invert(1);
}

<img src="https://placekitten.com/g/200/300">