Standard Sass theming solution

sass-theming-mixin.scss

/*
 * Implementation of themes with standart sass solution not compatible with css-modules and css-in-js
 * https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1
 * 
 * $themes: (
 *   light: (
 *     elementBackgroundColor: var(--element-bg),
 *     elementColor: var(--element-color)
 *   ),
 *   dark: (
 *     elementBackgroundColor: #561558,
 *     elementColor: #2b0a38
 *   ),
 * );
 * 
 * .Element {
 *   @include themify($themes) {
 *     color: themed('elementColor');  
 *     background-color: themed('elementBackgroundColor');  
 *   }
 * }
 */
/*
 * Implementation of themes
 */
@mixin themify($themes) {
  @each $theme, $map in $themes {
    .theme-#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}