Как включить миксин в другой миксин и получить значение от того же объекта для применения 2 цветовых тем одновременно

Question

Я использую Angular 7, и мне нужно применить 2 темы (весь цвет сайта и цвет компонента) на одном сайте одновременно.И эти 2 темы можно переключать по отдельности, используя кнопки ниже: (2 случая)

1. [белая тема] |[черная тема]

2. [компонентная база] |[Глубина компонента]

Например, я могу щелкнуть черную тему, не меняя цвет компонента.Или измените цвет компонента индивидуально.

Итак, я создал следующее:

1. _color.scss (включает 2 цветовые темы)

2. _themes.scss(который является файлом mixin)

Имя класса "theme-white" генерируется длякоторый является высшим уровнем веб-сайта.И теперь он может менять цвет темы, нажимая кнопку.Моя проблема в том, что я не знаю, как создать миксин componentColor.

_color.scss

$themes : (
  white: (
    // for color theme
    primary: white,
    // for component theme
    base: red, // .component-base
    deep: yellow, // .component-deep
  ),
  black: (
    // for color theme
    primary: black,
    // for component theme
    base: pink, // .component-base
    deep: green, // .component-deep
  )
)

_theme.scss

// Color theme --------------
@mixin themify($themes: $themes, $location: component) {
  @each $theme, $color in $themes {
    @if $location == component {
      :host-context(.theme-#{$theme}) & {
        $theme-map: () !global;
        @each $key, $submap in $color {
          $value: map-get(map-get($themes, $theme), '#{$key}');
          $theme-map: map-merge($theme-map, ($key: $value)) !global;
        }

        @content;
        $theme-map: null !global;
      }
    } 
    @else {
      .theme-#{$theme} & {
        $theme-map: () !global;
        @each $key, $submap in $color {
          $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);
}

// usage
//@include themify($themes) {
 //color: themed('primary');  
 //background-color: themed('bgcolor1');  
//}


// Component theme ------------
@mixin componentColor() {

}

Значение componentColor необходимоотличаться от основной цветовой темы.

Итак, ожидаемый результат, надеюсь,И эти 2 темы можно менять индивидуально.

Большое спасибо тем, кто может помочь.