Generated by SassMeister.com.

input.scss

@use 'sass:map';

$colors: () !default;
$colors: map.merge(
  (
    'light': (
      'color-bg': hsl(0deg 0 100),
      'color-surface': hsl(0deg 0 90),
      'color-text': hsl(0deg 0 0),
      'color-text-2': hsl(0deg 0 10),
    ),
    'dark': (
      'color-bg': hsl(0deg 0 0),
      'color-surface': hsl(0deg 0 10),
      'color-text': hsl(0deg 0 100),
      'color-text-2': hsl(0deg 0 90),
    ),
  ),
  $colors
);

/// Map deep get.
/// @param {Map} $map - The map.
/// @param {Arglist} $keys - The key chain.
/// @return {*} - The desired value.
@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map.get($map, $key);
  }

  @return $map;
}

@mixin mix-themes(
    $themes: $colors,
    $selector: ':root'
  ) {
  @each $theme, $map in $themes {
    @media (prefers-color-scheme: #{$theme}) {
      #{$selector} {
        color-scheme: #{$theme};

        @each $key, $submap in $map {
          --#{$key}: #{map-deep-get($themes, $theme, "#{$key}")};
        }
      }
    }
  }
}

@include mix-themes();

output.css

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --color-bg: white;
    --color-surface: #e6e6e6;
    --color-text: black;
    --color-text-2: #1a1a1a;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-bg: black;
    --color-surface: #1a1a1a;
    --color-text: white;
    --color-text-2: #e6e6e6;
  }
}

settings.json

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