Currently, I am in the process of developing a secondary theme for one of my websites. It's going to be a dark theme. I'm facing an issue where a specific CSS style is not being applied to a particular element, even though it works perfectly fine on an identical element.
If you'd like to take a look, here is the URL to the website: . Toggle the switch in the top right corner to enable the dark theme. You will notice that the dark theme is only being applied to the 'Header' and not the 'Footer', even though they share the same classes when inspected.
document.querySelector('.switch').addEventListener('click', () => {
document.body.classList.toggle('light');
document.querySelector('.navbar').classList.toggle('light');
document.querySelector('button').classList.toggle('light');
document.querySelector('#menu-btn').classList.toggle('light');
document.querySelector('.wve-editor-player').classList.toggle('light');
});/* video editor */
body { padding: 90px 0; background-color: #101010;}
@media screen and (max-width: 568px) {
body { padding: 0; }
body > .container { margin: 0; padding: 0; }
body > .container > .card { border: 0; border-radius: 0; background-color: transparent !important;}
}
.navbar { background-color: #191919; height: 89px; border-bottom: solid 1px #414040; box-shadow: 1px 1px #414040;}
...
#wve-time-selected-inputs .card-block input.form-control:focus { background-color: #f1f1f1; }
input[type="range"] { width: 100%; padding: 0; }
.input-range { padding: 7px; border: 1px solid #ddd; border-radius: 4px; }
...
.editor-timeline-wrapper { position: relative; }
#wve-timeline { position: relative; width: 100%; height: 20px; z-index: 11; overflow: hidden; background: none transparent; border: 0; }
...
</script>Additionally, I have attached an image showcasing the expected outcome. If you have any suggestions or solutions, your help would be greatly appreciated. Thank you in advance!