Idea for generated light mode / dark mode CSS

output

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;
}

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

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

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

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

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

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

theme.scss

// Ex:
//
// "theme-primary" -> "primary"
//
@function advance-theme($str) {
  @if str-index($str, "theme-") == 1 {
    @return str-slice($str, str-length("theme-" + 1));
  }
  @return $str;
}

// Ex:
//
// "color" -> "text"
// "background-color" -> "bg"
// "box-shadow" -> "shadow"
//
@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 {
          --#{advance-theme($k1)}-#{semantic($k2)}: #{map-get($v2, "light")};
        }
      }
    }
    &[data-theme="dark"],
    & [data-theme="dark"] {
      @each $k1, $v1 in $theme-map {
        @each $k2, $v2 in $v1 {
          --#{advance-theme($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((
    "theme-primary": (
      "color": (
        "light": #fff,
        "dark": #000,
      ),
      "background-color": (
        "light": #fff,
        "dark": #000,
      ),
    ),
    "theme-secondary": (
      "color": (
        "light": #aaa,
        "dark": #eee,
      ),
      "background-color": (
        "light": #aaa,
        "dark": #eee,
      ),
    ),
    "theme-tertiary": (
      "color": (
        "light": #fff,
        "dark": #000,
      ),
      "background-color": (
        "light": #fff,
        "dark": #000,
      ),
    ),
  ));
}