Cacher is the code snippet organizer for pro developers

@mixin component-theme($map) {
  @if not map-has-key($map, --name) {
    @error 'There is no property named `#{theme-name}` in the theme\'s map.';
  }
  @function theme($value) {
    @return map-get($map, $value)
  }
  .theme--#{theme(--name)} {
    @content;
  }
}

.app {
  display: block;
  width: 100%;
}

@mixin app-component-theme($map) {
  @include component-theme($map) {
    .app {
      color: theme(base-color);
      background: theme(base-bg);
    }
  }
}

$dark-theme: ( 
  --name: 'dark',
  base-color: #eee,
  base-bg: #ddd
);

$light-theme: ( 
  --name: 'light',
  base-color: #fff
);

$default-theme: map-merge($light-theme, (--name: 'default'));

@include app-component-theme($default-theme);
@include app-component-theme($light-theme);
@include app-component-theme($dark-theme);