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

Question

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

这就是我的目标。

menu.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> 

light 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">