hsThemed-v1.directive.ts

@Directive({
  selector: '[hsThemed]',
})
export class ThemedDirective implements OnInit {

  @Input() lightClass = '';
  @Input() darkClass = '';

  constructor(private el: ElementRef, private themingService: ThemingService) {
  }

  ngOnInit() {
    if (this.themingService.isDarkTheme() && this.darkClass && this.darkClass.length) {
      (this.el.nativeElement as HTMLElement).classList.add(...this.darkClass.split(' '));
    }

    if (this.themingService.isLightTheme() && this.lightClass && this.lightClass.length) {
      (this.el.nativeElement as HTMLElement).classList.add(...this.lightClass.split(' '));
    }
  }
}