Div visibility depending on light / dark mode

Design help Custom code
1

Hello there,

I’m looking for some help swapping out a set of logos depending on whether the light mode / dark mode is activated on my site - I know I could set the path color in the css but that knocks out the colour of all the over SVGs and the lottie animations - better to check out the site for an understanding of the problem - scroll to the partners / clients section.

If the dark mode is activated I’d like to swap out the logo div for a set of white logos!

Does anyone know how I could do this?

Here is my site Read-Only: https://preview.webflow.com/preview/eco-disco-staging?utm_medium=preview_link&utm_source=designer&utm_content=eco-disco-staging&preview=2173aa9e05ae2c9a4692e3a38e160963&workflow=preview
(how to share your site Read-Only link)

2

If the dark mode settings is stored in a cookie or localstorage, you could run a small script to check if it’s enabled on page load and then swap out the logo.

Btw and unrelated: You have a bunch of scripts in the header part of your main page. It’s considered bad practise and it could affect your page performance. Move the script stuff down into the “before </body>” part :slight_smile:

3

I see now that you’re toggling the entire class name of the content div when you’re activating dark mode. You could also run a script that’s checking the class name.

You can then target the two scrolling elements and just invert them with CSS (which is easier than swapping out all the logos). Something like:

function darklogos () {
let contentclassname = document.getElementById('content'); //gets class name
let logoscroller1 = document.getElementsByClassName("track-horizontal-alt2"); //gets the first scroller
let logoscroller2 = document.getElementsByClassName("track-horizontal-alt3"); //gets the second scroller

if (contentclassname.classList.contains("dark-mode")) {
//inverts both scrollers if dark mode is on
logoscroller1[0].style.filter = "invert(1)";
logoscroller2[0].style.filter = "invert(1)";
  } else {
//does not invert if dark mode is off
logoscroller1[0].style.filter = "invert(0)";
logoscroller2[0].style.filter = "invert(0)";
  }
}

//run this at page load, and when toggling
darklogos();

The last bit with darklogos(); has to be put in where the toggle happens too, it’s what starts the whole script.