Fix theme for grouped tooltips

projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.html

@@ -26,7 +26,7 @@ <h1 class="tui-text_h3">Grouped tooltips</h1>
     [languages]="s.languages"
   ></t-demo-code>
 
-  <t-demo>
+  <t-demo *ngIf="isShowDemo">
     <ngx-tippy-group [groupedProps]="groupedProps">
       <button
         *ngFor="let btn of [0, 1, 2, 3, 4]"
@@ -60,7 +60,7 @@ <h1 class="tui-text_h3">Grouped tooltips</h1>
     [languages]="s.languages"
   ></t-demo-code>
 
-  <t-demo>
+  <t-demo *ngIf="isShowDemo">
     <ngx-tippy-group [groupedProps]="groupedProps">
       <button
         data-tippy-grouped

projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.ts

@@ -1,21 +1,49 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component } from '@angular/core';
+import { Schemes } from '@interfaces';
+import { DestroyService, SchemeService } from '@services';
 import { NgxTippyProps } from 'ngx-tippy-wrapper';
+import { takeUntil } from 'rxjs';
 import { SNIPPETS } from './snippets';
 
 @Component({
   selector: 'app-grouped-tooltips',
   templateUrl: './grouped-tooltips.component.html',
   styleUrls: ['./grouped-tooltips.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [DestroyService],
 })
-export class GroupedTooltipsComponent implements OnInit {
+export class GroupedTooltipsComponent implements AfterViewInit {
   public readonly snippets = SNIPPETS;
-  public readonly groupedProps: NgxTippyProps = {
+  public isShowDemo: boolean = false;
+  public groupedProps: NgxTippyProps = {
     arrow: false,
     placement: 'top',
   };
 
-  constructor() {}
+  constructor(
+    private readonly schemeService: SchemeService,
+    private readonly destroy$: DestroyService,
+    private readonly cdr: ChangeDetectorRef
+  ) {}
 
-  ngOnInit(): void {}
+  ngAfterViewInit() {
+    this.listenForSchemeChange();
+  }
+
+  private listenForSchemeChange() {
+    this.schemeService.scheme$.pipe(takeUntil(this.destroy$)).subscribe(scheme => {
+      const theme = scheme === Schemes.Dark ? 'light' : 'dark';
+      this.groupedProps = {
+        ...this.groupedProps,
+        theme,
+      };
+
+      this.isShowDemo = false;
+      this.cdr.markForCheck();
+
+      setTimeout(() => {
+        this.isShowDemo = true;
+        this.cdr.markForCheck();
+      }, 0);
+    });
+  }
 }