ng-custom-properties#final.ts

export interface Theme {
  primary: string;
  accent: string;
}

@Component({
  selector: 'app-root',
  template: `
  <app-card></app-card>
  
  <button (click)="theme = indigoPinkTheme">Indigo Pink</button>
  <button (click)="theme = pinkBlueGrayTheme">Pink BlueGray</button>
  <button (click)="theme = deepPurpleAmberTheme">Deep Purple Amber</button>
  <button (click)="theme = randomTheme()">?</button>
  `,
})
export class AppComponent {
  readonly indigoPinkTheme: Theme = {
    primary: '#5c6bc0',
    accent: '#ec407a'
  };

  readonly pinkBlueGrayTheme: Theme = {
    primary: '#ec407a',
    accent: '#90a4ae'
  };

  readonly deepPurpleAmberTheme: Theme = {
    primary: '#7e57c2',
    accent: '#ffca28'
  };
  
  theme: Theme = this.indigoPinkTheme;
  
  @HostBinding('style')
  get style() {
    return this.sanitizer.bypassSecurityTrustStyle(
      `--primary: ${this.theme.primary}; --accent: ${this.theme.accent}`
    );
  }

  constructor(private sanitizer: DomSanitizer) {}

  randomTheme(): Theme {
    const primary = this.randomHex();
    const accent = this.randomHex();
    return { primary, accent };
  }

  private randomHex() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
  }
}