Check out the directive below:
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: 'd-btn',
host: {}
})
export class ButtonDirective {
constructor(private el: ElementRef){}
@HostListener('mouseover')
onMouseOver() {
this.el.nativeElement.style.transition;
this.el.nativeElement.style.backgroundColor = "var(theme-color-1)";
}
@HostListener('mouseout')
onMouseLeave() {
this.el.nativeElement.style.transition;
this.el.nativeElement.style.backgroundColor = 'transparent';
}
}
If I replace "var(theme-color-1)" with a specific color value, it works fine when hovering over the element. However, I would like to use a variable color instead since I am working on multiple color themes. Any suggestions?