如何在组件的动画中利用自定义主题的颜色？

Question

I have a component that animates on enter and leave. One of these transitions changes the background color to the primary color, but I currently have it hard-coded.

animations: [
    trigger('fadeInOut', [
        state('in', style({ opacity: 1, background: 'transparent' })),
        transition(':enter', [
            style({
                background: '#1976d2' // Primary theme color
            }),
            animate('0.5s ease-in-out')
        ]),
        transition(':leave', [
            animate('0.3s ease-out', style({ opacity: 0 }))
        ])
    ])
]

I'd like to avoid hard-coding the color and instead do something like this

background: 'primary'

or

background: MyTheme.colors.primary

What's the proper convention here? Do I need to just set the element's background color in the component's css (or, in this case, scss) to the animation color and just animate it away instantly? I'm worried that would degrade horribly, especially if I later decide to put in a toggle for animations or something.

Answer 1

create 2 classes in your SCSS/CSS... use [ngClass] to change the applied class to your component.

similar question was asked earlier too: Bootstrap 4 dark & light mode switch