Rails, Sass and MaterializeCSS variables with if command

I have a quick question, why does this work in my app/javascript/stylesheets/application.scss

@import 'materialize-css/sass/components/_color-variables';

$primary-color: color('blue', 'lighten-2') !default;
$secondary-color: color('yellow', 'base') !default;

@import 'materialize-css/sass/materialize';

But this doesn't

@import 'materialize-css/sass/components/_color-variables';

@if (prefers-color-scheme: dark) {
    $primary-color: color('blue', 'lighten-2') !default;
    $secondary-color: color('yellow', 'base') !default;
}

@import 'materialize-css/sass/materialize';

What I am trying to do is override Materialize CSS's defaults if the user has a different system setting for his/her color mode in their operating system (prefers-color-scheme).