Angular 16 Subscribe to multiple same components not working

Question

I have a component which subscribes to a service. I have placed multiple (4) of it in my view. When the service emits data Only one out of the multiple actually gets it. The rest don't.

This is my code:

For the service

isDark = false;
  getTheme : EventEmitter<any> = new EventEmitter;

  setTheme(bool : boolean) {
    if (!bool) {
      this.isDark = true;
      this.getTheme.emit(true);
    }
    else {
      this.isDark = false;
      this.getTheme.emit(false);
    }
  }

For the component

ngOnInit() {
    // theme
    var r = document.getElementById('card');
    this.sub = this.toggleTheme.getTheme.subscribe((isDark) => {
      if (r == null) {
        return;
      }

      if (isDark) {
        r.style.setProperty('--hover-color', 'rgb(30,30,30)');
      }
      else {
        r.style.setProperty('--hover-color', 'rgb(230,230,230)');
      }
    })
  }  

I also have other components that use this service in the same way. But it works fine for all of them. Although all of them are different.