I've got a greyscale backdrop-filter applied to a .cover behind one of my overlaid menus. It always has a background color, but when it is .on I sometimes, with JavaScript, want to set the .cover's background-color to an opaque black to darken the background, too.

I have the following CSS being applied to the cover:

body {
    --darkMode: transparent;
}
.cover {
    background-color: #123456;
}
.cover.on {
    -webkit-backdrop-filter: grayscale(100%);
    backdrop-filter: grayscale(100%);
    background-color: var(--darkMode); /* Notable Line */
}

The JavaScript that sets the --darkMode variable is just document.body.style.setProperty("--darkMode", "rgba(0, 0, 0, 0.5)");

However, when darkMode is not enabled, and therefore the .cover's background-color is transparent just like default, the backdrop-filters don't work at all.

You can play around with this with this fiddle.

Thanks for any insights you might have, and have a splendid day, person who was willing to read this question.

EDIT 1: My apologies, the above code was not complete; I have updated to reflect my code more directly, and have added a JS fiddle so you can see it yourself.

EDIT 2: Turns out a solution is to just set the background-color to something like rgba(0, 0, 0, 0.01) instead of transparent.