Scss theme mixin

main.scss

@mixin theme($theme) {
  @at-root #{selector-nest(':root[data-theme=#{$theme}]', &)} {
    @content;
  }
}

:root {
  --bg-color: lightcoral;
}

body {
  background-color: var(--bg-color);
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

  h1 {
    @include theme(coder) {
      color: red;
    }
  }

  @include theme(dark) {
    --bg-color: lightblue;
  }
}