如何在深色模式下显示浅色徽标？
如何在深色模式下显示浅色徽标？
提问于 2020-09-17 23:28:11
我在黑暗模式下工作。工作成功。在脚本中有两种类型的徽标:亮和暗。但是我的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");
}
}和get call：
<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 ;
});回答 1
Stack Overflow用户
发布于 2020-09-17 23:43:29
两张图片：
<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">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63941356
复制相关文章
相似问题
腾讯云开发者
