Dark Mode mixin

mixins.scss

@use "sass:selector";

@mixin darkMode($applySelf: false) {
    $selector: &;

    @if ($applySelf) {
        @content;
    }

    @at-root {
	// SASS properly nests selectors downwards, but not "upwards", so we need to use selector.nest to make it work in all scenarios
        $darkByPref: selector.nest("html:not(.colorScheme.-light)", $selector);
        $darkByChoice: selector.nest("html.colorScheme.-dark", $selector);

        @media (prefers-color-scheme: dark) {
		// Only use system preferences if no choice (for light mode) has been made
            #{$darkByPref} {
                @content;
            }
        }

        #{$darkByChoice} {
            @content;
        }
    }
}