Css file not detecting the update of data-theme in html

Question

I am adding the dark theme to my website so i added a toggle switch in my footer.html page and it add a variable name data-theme = 'dark' to the html. the scss files of footer and core scss files are changing as per the condition but the scss files in module is not . Here is my code

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>
            <ul class="inline-list">
                <li><a class="text-light-gray" href="https://github.com/Cloud-CV/EvalAI" target="_blank"><i class="fa fa-github"></i></a></li>
                <li><a class="text-light-gray" href="https://twitter.com/project_cloudcv" target="_blank"><i class="fa fa-twitter"></i></a></li>
                <li>
                <div class="switch">
                    <label class="darktheme_text">
                        <input  type="checkbox" id="switch" name="theme">
                        <span class="lever"></span>
                        Dark Mode
                    </label>
                </div>
                </li>
                <!-- <li><a class="text-light-gray" href="#!"><i class="fa fa-facebook" target="_blank"></i></a></li> -->
            </ul>
            <p><a class="text-white">© CloudCV {{year}}</a></p>
        </div>
        <div class="col l4 offset-l0 s12">
            <h5 class="white-text">Links</h5>
            <ul>
                <li><a class="text-light-gray" ui-sref="about-us">About Us</a></li>
                <li><a class="text-light-gray" ui-sref="contact-us">Contact Us</a></li>
                <li><a class="text-light-gray" ui-sref="our-team">Our Team</a></li>
                <li><a class="text-light-gray" ui-sref="get-involved">Get Involved</a></li>
                <li><a class="text-light-gray" ui-sref="privacy_policy">Privacy Policy</a></li>
                <li><a class="text-light-gray" href="https://cloudcv.org">CloudCV Website</a></li>
            </ul>
        </div>
        <div class="col l2 s12">
            <h5 class="white-text">Stats</h5>
            <ul>
                <li>
                   <a class="github-button" href="https://github.com/Cloud-CV/EvalAI" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star Cloud-CV/EvalAI on GitHub">Star</a>
                 </li>
                <li>
                   <a class="github-button" href="https://github.com/Cloud-CV/EvalAI/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork Cloud-CV/EvalAI on GitHub">Fork</a>
                </li>
            </ul>
        </div>
    </div>
</div>
</footer>
<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>

scss file which is not working

/*font variable*/

$rob-light: 200;
$rob-med: 300;
$rob-reg: 400;
$rob-bold: 600;

/*blue shades*/

$light-gray: #adb4d0;
$med-gray: #3c3e49;
$dark-gray: #252833;
$dust-gray: #1a1b1f;
$blue: #3B9EB9;
$wait-blue:#5843A3;

/*green shades*/

$med-green: #74DB70;

/*red shades*/
$med-red: #DB3232;

/*black shades*/

$shadow-black: #dedede;
$light-black: #9d9d9d;
$med-black: #4d4d4d;
$dark-black: #4d4d4d;

/*orange shades*/

$highlight: #ffaf4b;
$highlight-dark: #ff7b2e;
$med-orange: #DF9C3E;
$hover-orange: #DA8F27;

/*transparent*/

$transparent: rgba(0, 0, 0, 0);

/*link colors*/

$light-link: #fff;
$med-link: #9ca3be;
$dark-link: #252833;

/*link hover colors*/

$link-hover-dark: #ffaf4b;
$link-hover-light: #fff;

/*loader variable*/

$loader-size: 70px;
$loader-dot-size: ($loader-size / 5);
$loader-height: $loader-dot-size;
$loader-dot-color: #ffaf4b;

/*border color*/

$border-color-light: #e3e3e3;

/*Screen Size Variables*/

$med-screen: 992px;
$small-screen: 600px;

/*grad new variables*/

$grad-super-light: #fafafa; 
$grad-light-black: #dcdcdc;
$grad-sec-gray: #45334e;

/*shadow colors*/

$super-light-shadow: #ececec;
html[data-theme = "dark"] {
 $dark-black: #fff;
}

This is the piece of code from above file that was suppose to work but didn't

html[data-theme = "dark"] {
 $dark-black: #fff;
}

i cant get it that other scss files work but these files in modules doesn't .

Answer 1

Problem

Sass is a pre-processor for CSS.

Sass variables are nonexistant in the final outputted CSS. They are only available during the Sass preprocessing, and will not be printed in the final CSS. Any variable will be replaced by the value it represents.

Your inputed Sass:

html[data-theme = "dark"] {
    $dark-black: #fff;
}

Outputted CSS:

html[data-theme = "dark"] {}

Actually, it will completely omit that from the CSS because it is an empty ruleset.

---

Possible solution

Use CSS variables. CSS variables will be outputted in the final CSS.

html {
    --themed-color: #4d4d4d;
}

html[data-theme = "dark"] {
    --themed-color: #fff;
}

$dark-black: var(--themed-color);