Generated by SassMeister.com.

input.scss

@function semantic($str) {
  @if $str == "color" {
    @return "text";
  } @else if $str == "background-color" {
    @return "bg";
  } @else if $str == "box-shadow" {
		@return "shadow";
	}
  @return $str;
}

@mixin theme($theme-map) {
  @at-root {
    & {
      @each $k1, $v1 in $theme-map {
        @each $k2, $v2 in $v1 {
          --#{$k1}-#{semantic($k2)}: #{map-get($v2, "light")};
        }
      }
    }
    &[data-theme="dark"],
    & [data-theme="dark"] {
      @each $k1, $v1 in $theme-map {
        @each $k2, $v2 in $v1 {
          --#{$k1}-#{semantic($k2)}: #{map-get($v2, "dark")};
        }
      }
    }
    @each $k1, $v1 in $theme-map {
      .#{$k1} {
        @each $k2, $v2 in $v1 {
          #{$k2}: #{map-get($v2, "light")};
        }
      }
    }
    @each $k1, $v1 in $theme-map {
      [data-theme="dark"].#{$k1},
      [data-theme="dark"] .#{$k1} {
        @each $k2, $v2 in $v1 {
          #{$k2}: #{map-get($v2, "dark")};
        }
      }
    }
  }
}

body {
	// prettier-ignore
  @include theme((
		primary: (
			color: (
				light: #fff,
				dark: #000,
			),
			background-color: (
				light: #fff,
				dark: #000,
			),
		),
		secondary: (
			color: (
				light: #aaa,
				dark: #eee,
			),
			background-color: (
				light: #aaa,
				dark: #eee,
			),
		),
		tertiary: (
			color: (
				light: #fff,
				dark: #000,
			),
			background-color: (
				light: #fff,
				dark: #000,
			),
		),
	));
}

output.css

body {
  --primary-text: #fff;
  --primary-bg: #fff;
  --secondary-text: #aaa;
  --secondary-bg: #aaa;
  --tertiary-text: #fff;
  --tertiary-bg: #fff;
}

body[data-theme=dark], body [data-theme=dark] {
  --primary-text: #000;
  --primary-bg: #000;
  --secondary-text: #eee;
  --secondary-bg: #eee;
  --tertiary-text: #000;
  --tertiary-bg: #000;
}

.primary {
  color: #fff;
  background-color: #fff;
}

.secondary {
  color: #aaa;
  background-color: #aaa;
}

.tertiary {
  color: #fff;
  background-color: #fff;
}

[data-theme=dark].primary,
[data-theme=dark] .primary {
  color: #000;
  background-color: #000;
}

[data-theme=dark].secondary,
[data-theme=dark] .secondary {
  color: #eee;
  background-color: #eee;
}

[data-theme=dark].tertiary,
[data-theme=dark] .tertiary {
  color: #000;
  background-color: #000;
}

settings.json

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