Javascript 如何在黑暗模式下显示灯光徽标？

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

这就是我的目标。

menu.php （浅色徽标：

，深色徽标：

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

并获得呼叫：

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

addEventListener（'load'，function（））{
setActiveStyleSheet（localStorage.getItem（'ex_mode'）？localStorage.getItem（'ex_mode'）：“light”）；
document.getElementById（“themeSwitch”）.checked=localStorage.getItem（'ex_mode'）==“深色”？true:false；
});

两幅图像：

<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.dark { display: inline-block; }

或者只使用背景图像，需要添加一些样式以确保整个图像显示

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

或者，如果您使图像上的背景透明，您可以在CSS中使用

过滤器：反转（1）；

来翻转颜色

img{
过滤器：反转（1）；
}

---

您是否尝试过使用

不透明度

？两个图像标签或带有背景图像的css谢谢您的回答，但我认为徽标的更改应取决于到暗模式的转换。我正在考虑如何做到这一点。“徽标的更改应取决于到暗模式的转换”这意味着什么？当你翻转页面的CSS文件时，它会发生变化……我的意思是，徽标不在CSS文件中。我正在从数据库动态获取它。所以双图像解决方案会起作用……只需将它们都放在页面上……这就像是一种黑客行为。听起来不像是一种专业方法。

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

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

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

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