Dark or light mode

I Need Help
1

Hello everyone,

I’m working on the possibility of having a slider button in the navbar of my site allowing the visitor to activate dark mode or light mode.

I use the block class duplication method to create darkmode classes as explained in the help here : https://help.blocsapp.com/fr/knowledge-base/dark-theme/

It works very well. However, I need your help with the following two points:

  1. I have a navbar on my homepage which is different from the other pages with a script in its footer which is as follows:

<!-- logo reduction and opacification-->
<script>
var logo = document.getElementsByClassName("navbar-brand")[0];
var scrollDistance = '600';
var color = document.getElementsByClassName("bloc-menu")[0];

window.addEventListener('scroll', function() { 
 if ($(this).scrollTop() > scrollDistance) 
  {
    logo.style.transform = "scale(0.65)";
logo.style.transition = "0.9s";
logo.style.height = "70px";
color.style = "background-color: rgb(255,255,255)"; 
  }

else 
  {
    logo.style.transform = "scale(1)";
logo.style.height = "120px";
color.style = "background-color: rgba(255,255,255,.01)"; 
  }

})
 </script>

At the moment this navbar is transparent with black characters and turns white when you scroll down . How can I make it so that when darkmode is activated, the characters are white and it becomes black instead of white when scrolling down?

  1. How do I get a slider button in this navbar to activate/deactivate dark mode?

For these 2 functions, I think I need to modify the script above, but I haven’t got the necessary skills.

Can anyone help me?

Thanks

Patrick

2

I would update that old code of mine from jquery to pure javascript while you are at :sweat_smile:

3
  1. Design tip: Add a checkbox to your nav bar and in the sidebar change its style from checkbox to switch. Et voilà, then you have a nice bootstrap switch ín your nav bar.
1 Like