Generated by SassMeister.com.

input.scss

@mixin color-scheme($name) {
  @if $name == dark {
    @media (prefers-color-scheme: dark) {
      @content;
    }
  } @else if $name == light {
    @media (prefers-color-scheme: light) {
      @content;
    }
  } @else {
    @media (prefers-color-scheme: #{$name}) {
      @content;
    }
  }
}

.test {
    @include color-scheme(dark) {
        display: block;
    }
}

.test {
    @include color-scheme(light) {
        display: block;
    }
}

.test {
    @include color-scheme(custom) {
        display: block;
    }
}

output.css

@media (prefers-color-scheme: dark) {
  .test {
    display: block;
  }
}

@media (prefers-color-scheme: light) {
  .test {
    display: block;
  }
}

@media (prefers-color-scheme: custom) {
  .test {
    display: block;
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}