Simple color theme system with Dart Sass

markup.html

<div class="is-primary">
  <button class="button">I'm primary</button>
</div>

<div class="is-secondary">
  <button class="button">I'm secondary</button>
</div>

style.scss

$color-themes: (
  primary: rebeccapurple,
  secondary: lightgoldenrodyellow
);

@mixin theme {
  @each $theme, $color in $color-themes {
    .is-#{$theme} & {
      @content($color);
    }
  }
}

.button {
  @include theme using ($color) {
    background: $color;

    &:hover,
    &:focus {
      background: darken($color, 10%);
    }
  }
}