Currently implementing a dark theme on my website involves adding a toggle switch to the footer.html page, which adds a variable named data-theme = 'dark' to the html. The scss files of the footer and core are adjusting accordingly based on the condition, but the scss files in the module are not. Here is the code snippet:
Footer.html
<footer class="ev-md-container ev-footer ev-dark-bg">
<div class="grad-container rm-grad-pad">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">EvalAI</h5>
<p class="text-light-gray">Evaluating state of the art in AI</p>
<!-- More HTML content -->
</div>
</div>
</div>
</footer>
<!-- JavaScript functionality -->
<script>
var checkbox = document.querySelector('input[name=theme]');
checkbox.addEventListener('change', function() {
if(this.checked) {
trans()
document.documentElement.setAttribute('data-theme', 'dark')
} else {
trans()
document.documentElement.setAttribute('data-theme', 'light')
}
})
let trans = () => {
document.documentElement.classList.add('transition');
window.setTimeout(() => {
document.documentElement.classList.remove('transition')
}, 1000)
}
</script>
Problematic scss file:
/*font variables*/
$rob-light: 200;
$rob-med: 300;
$rob-reg: 400;
$rob-bold: 600;
/*Color variables*/
$light-gray: #adb4d0;
$med-gray: #3c3e49;
$dark-gray: #252833;
...
$grad-sec-gray: #45334e;
/*Styles for dark theme*/
html[data-theme = "dark"] {
$dark-black: #fff;
}
This specific section of code from the mentioned file was expected to function properly but encountered issues. Other scss files work correctly but these particular ones in modules refuse to cooperate.