How can I dynamically change the background color of all Leaflet popups on the map?

Question

My default Leaflet popups have a background color of white. When a user turns on dark mode, I want them all to turn black.

I'm looping over all of the popups, but for some reason they're not changing color. I've tried adding a custom class to the popup but that's not working either.

What am I missing to change the color of all popup wrappers dynamically?

.leaflet-popup-content-wrapper {
    background: white;
}

var wrapper = document.getElementsByClassName('leaflet-popup-content-wrapper');

for (var i = 0; i < wrapper.length; i++) {
    wrapper[i].style.backgroundColor = 'black';
}

Edit

I realized through XaC's answer below that I need to change all unopened popups. How would I go about this?

Updated Code

Here's the code I'm using. Switching classes works if I just use L.popup(),as the popups are open on the map. However, when using marker.bindPopup() it fails and the classes don't switch.

Nothing gets printed to the console when looping through either. Basically it looks like the popups don't even exist until the marker is clicked.

CSS

.light .leaflet-popup-content-wrapper {
    background: black;
}

.dark .leaflet-popup-content-wrapper {
    background: white;
}

Placing the markers

marker.bindPopup(popupContents(item), {
    closeButton: false,
    className: 'light'
}).addTo(layer);

Switching the classes

document.addEventListener('dark-mode-updated', event => {
    if (event.detail.text === 1) {
        var popups = document.getElementsByClassName('light');
        while (popups.length > 0) {
            
        // nothing prints here when using bindPopup() UNLESS a popup is open
        console.log(popups);
            
        popups[0].classList.replace('light','dark');
        }
    }
}

Answer 1

Your code works for me:

I put 3 popups and one linked to a marker, and they change colours when I call the function via a button:

function changecolour(){
            var wrapper = document.getElementsByClassName('leaflet-popup-content-wrapper');
        
            while( wrapper.length; i++) {
                wrapper[i].style.backgroundColor = colourList[colourIndex];
                colourIndex=(colourIndex+1)%colourList.length
            }
        }

However, when creating a new popup, it starts with no background colour (wrapper[i].style.backgroundColor = <empty string>), but if you apply the change colour function to it, it will take a value.

To change the triangular tip, you can do the same with:

var tip = document.getElementsByClassName('leaflet-popup-tip');

Putting the colour to 'black' also works, so I'm not sure why your poups don't change colour.

To change the popups before they open:

you can create a custom class in css:

 .black-popup .leaflet-popup-content-wrapper {
    background: black;
    }   

and use it when you open a pop-up:

L.popup({className: 'black-popup'})

To change it dynamically, you can create another popup class with a different colour, and change the class:

var blackpopuplist = document.getElementsByClassName('black-popup');
        
while(blackpopuplist.length>0) {
        blackpopuplist[0].classList.switch('black-popup','red-popup');

(as JS is dynamic, the blackpopuplist.length will decrease to 0 as the classes are removed --- see this question How to change class for all elements retrieved by document.getElementsByClassName)

Popup bonded to markers

To assign a class to a popup linked to a marker:

either defined the class when creating the marker:

L.marker(latlong).addTo(this.map).bindPopup('Marker 2',{className: newClass}).openPopup();

or create the pop-up first, then bind it to the marker:

var popup2 = L.popup({className: newClass}).setContent('Pop up 2')
    
L.marker(latLong).addTo(this.map).bindPopup(popup2).openPopup();
        

as above, it you set the class, and change the colours before they are displayed, they will first be shown with the first colours. You could run the class switching function each time a popup is opened to make sure that they all have the right colours.