Generated by SassMeister.com.

input.scss

$themes: ();

@mixin color-mode-theme($theme-name, $base, $include-root: false) {
  $update: ($theme-name: $base);
  $themes: map-merge($themes, $update) !global;
    
  @if $include-root {
    :root {
      @content;
    }
  }

  [data-color-mode="#{$theme-name}"],
  [data-color-mode="light"][data-light-theme="#{$theme-name}"],
  [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
    @content;
  }

  [data-color-mode="auto"][data-light-theme="#{$theme-name}"] {
    @media (prefers-color-scheme: light) {
      @content;
    }
  }

  [data-color-mode="auto"][data-dark-theme="#{$theme-name}"] {
    @media (prefers-color-scheme: dark) {
      @content;
    }
  }
}

@mixin color-mode-var($name, $args...) {
  $map: keywords($args);
    
  @each $theme, $base in $themes {
    @if map-has-key($map, $theme) == false {
        @error "Failed to specify a color for theme '#{$theme}'"
    }
  }
    
  @each $mode, $color in $map {
    @if map-has-key($themes, $mode) == false {
      @error "Specified a value for invalid theme '#{$mode}'";
    }
    
    $base: map-get($themes, $mode);
    @include color-mode-theme($mode, $base) {
      --color-#{$name}: #{$color};
    }
  }
}




@include color-mode-theme('light', 'light', true) {
  --color-thing: light-color;
}

@include color-mode-theme('dark', 'dark') {
  --color-thing: dark-color;
}

@include color-mode-theme('dimmed', 'dark') {
  --color-thing: dimmed-color;
}

@include color-mode-theme('high-contrast', 'light') {
  --color-thing: high-contrast-color;
}


// error: failed to specify color for theme 'light' 
@include color-mode-var(
  my-thing,
  $dark: purple,
  $dimmed: gray,
  $high-contrast: cyan
);

// error: specified a value for invalid theme 'other'
@include color-mode-var(
  my-thing,
  $light: green,
  $dark: purple,
  $dimmed: gray,
  $high-contrast: cyan,
  $other: yellow
);

// Ok 👍
@include color-mode-var(
  my-thing,
  $light: green,
  $dark: purple,
  $dimmed: gray,
  $high-contrast: cyan
);

output.css

:root {
  --color-thing: light-color;
}

[data-color-mode="light"],
[data-color-mode="light"][data-light-theme="light"],
[data-color-mode="dark"][data-dark-theme="light"] {
  --color-thing: light-color;
}

@media (prefers-color-scheme: light) {
  [data-color-mode="auto"][data-light-theme="light"] {
    --color-thing: light-color;
  }
}

@media (prefers-color-scheme: dark) {
  [data-color-mode="auto"][data-dark-theme="light"] {
    --color-thing: light-color;
  }
}

[data-color-mode="dark"],
[data-color-mode="light"][data-light-theme="dark"],
[data-color-mode="dark"][data-dark-theme="dark"] {
  --color-thing: dark-color;
}

@media (prefers-color-scheme: light) {
  [data-color-mode="auto"][data-light-theme="dark"] {
    --color-thing: dark-color;
  }
}

@media (prefers-color-scheme: dark) {
  [data-color-mode="auto"][data-dark-theme="dark"] {
    --color-thing: dark-color;
  }
}

[data-color-mode="dimmed"],
[data-color-mode="light"][data-light-theme="dimmed"],
[data-color-mode="dark"][data-dark-theme="dimmed"] {
  --color-thing: dimmed-color;
}

@media (prefers-color-scheme: light) {
  [data-color-mode="auto"][data-light-theme="dimmed"] {
    --color-thing: dimmed-color;
  }
}

@media (prefers-color-scheme: dark) {
  [data-color-mode="auto"][data-dark-theme="dimmed"] {
    --color-thing: dimmed-color;
  }
}

[data-color-mode="high-contrast"],
[data-color-mode="light"][data-light-theme="high-contrast"],
[data-color-mode="dark"][data-dark-theme="high-contrast"] {
  --color-thing: high-contrast-color;
}

@media (prefers-color-scheme: light) {
  [data-color-mode="auto"][data-light-theme="high-contrast"] {
    --color-thing: high-contrast-color;
  }
}

@media (prefers-color-scheme: dark) {
  [data-color-mode="auto"][data-dark-theme="high-contrast"] {
    --color-thing: high-contrast-color;
  }
}

[data-color-mode="light"],
[data-color-mode="light"][data-light-theme="light"],
[data-color-mode="dark"][data-dark-theme="light"] {
  --color-my-thing: green;
}

@media (prefers-color-scheme: light) {
  [data-color-mode="auto"][data-light-theme="light"] {
    --color-my-thing: green;
  }
}

@media (prefers-color-scheme: dark) {
  [data-color-mode="auto"][data-dark-theme="light"] {
    --color-my-thing: green;
  }
}

[data-color-mode="dark"],
[data-color-mode="light"][data-light-theme="dark"],
[data-color-mode="dark"][data-dark-theme="dark"] {
  --color-my-thing: purple;
}

@media (prefers-color-scheme: light) {
  [data-color-mode="auto"][data-light-theme="dark"] {
    --color-my-thing: purple;
  }
}

@media (prefers-color-scheme: dark) {
  [data-color-mode="auto"][data-dark-theme="dark"] {
    --color-my-thing: purple;
  }
}

[data-color-mode="dimmed"],
[data-color-mode="light"][data-light-theme="dimmed"],
[data-color-mode="dark"][data-dark-theme="dimmed"] {
  --color-my-thing: gray;
}

@media (prefers-color-scheme: light) {
  [data-color-mode="auto"][data-light-theme="dimmed"] {
    --color-my-thing: gray;
  }
}

@media (prefers-color-scheme: dark) {
  [data-color-mode="auto"][data-dark-theme="dimmed"] {
    --color-my-thing: gray;
  }
}

[data-color-mode="high-contrast"],
[data-color-mode="light"][data-light-theme="high-contrast"],
[data-color-mode="dark"][data-dark-theme="high-contrast"] {
  --color-my-thing: cyan;
}

@media (prefers-color-scheme: light) {
  [data-color-mode="auto"][data-light-theme="high-contrast"] {
    --color-my-thing: cyan;
  }
}

@media (prefers-color-scheme: dark) {
  [data-color-mode="auto"][data-dark-theme="high-contrast"] {
    --color-my-thing: cyan;
  }
}

settings.json

{
  "sass": {
    "compiler": "libsass/3.5.5",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}