Ngx-chips custom theme doesn't work

Question

awesome component. I am using the latest version of ngx-chips with Angular 5. I tried to make custom theme the same as here , but it doesn't work. Here is my .scss file:

@import '~ngx-chips/core/styles/core/_core.scss';

$foundation-primary: #1779ba;
$foundation-primary-dark: darken($foundation-primary, 10%);

// this is the container's theme
$foundation-theme: (
container-border-bottom: 1px solid $foundation-primary
);

// this is the tag's theme
$foundation-tag-theme: (
background: $foundation-primary,
background-focused: $foundation-primary-dark,
background-active: $foundation-primary-dark,
background-hover: $foundation-primary-dark,
color: #fff,
color-hover: #fff,
border-radius: 2px
);

// this is the delete icon's theme
$foundation-icon-theme: (
fill: #fff,
fill-focus: #eee,
transition: all 0.35s
);

// apply theme to the container
:ng-deep .ng2-tag-input.foundation-theme {
@include tag-input-theme($foundation-theme);
}

// apply theme to the tags
:ng-deep .ng2-tag-input.foundation-theme tag {
@include tag-theme($foundation-tag-theme);
}

// apply theme to the delete icon
:ng-deep .ng2-tag-input.foundation-theme tag delete-icon {
@include icon-theme($foundation-icon-theme);
}

Also i found the same issue, but there was no answer. What am i doing wrong?

Answer 1

use '::ng-deep' instead of ':ng-deep'