CODEWITHSUNDEEP
javascript
burakios
burakios

Reputation: 25

How can I show light logo in dark mode?

I am working on dark mode. Works successfully. There are two types of logos in the script: light and dark. But there is no logo in my css files. I'm getting the logos dynamically. I want to show the light logo in the dark mode. When I switch to dark mode, I also want the light logo to be active. I did a lot of research and trials, but I couldn't get any results. I am not familiar with javascript. I will be happy to any help.

enter image description here

This is what I aim to happen. enter image description here

menu.php (light logo:<?=$setlogo?> , dark logo:<?=$setlogow?>

(Maybe i should write a condition here. to check if it goes into dark mode. but this process happens in javascript. How can I check the condition in javascript in php?)

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

My css links:

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

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

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

Upvotes: 0

Views: 1959

Answers (1)

epascarello
epascarello

Reputation: 207527

Two images:

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

dark css:

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

Or just use a background image, going to have to add a few more styles to make sure the whole image appears

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

Or if you make the background transparent on the image, you could use filter: invert(1); in the CSS to flip the color.

img {
   filter: invert(1);
}
<img src="https://placekitten.com/g/200/300">

Upvotes: 2

Related Questions