Toggle a class by a button from header component that affect main app component by Angular 6+

My app by Angular simply starts with index.html:

<body>
  <app-root></app-root>
</body>

I would like it to be switched between Dark/Light by toggling between <body> and <body class="dark-mode"> with below styles:

body abcxyz {
  color: #fff
}

body.dark-mode abcxyz {
  color: #a2b3c4
}

Next is app.component.html with Header - Main - Footer as usual:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

The header.component.html has a toggle button:

<button (click)="onClickDarkMode()">Dark Mode</button>

We need a variable and a function like this to work, I put them in header.component.ts:

isDarkMode = false;
onClickDarkMode() {
  this.isDarkMode = !this.isDarkMode;
}

This idea seems simple to implement, but the click event seems like it fires to nothing with any of these lines added to the <body>:

<body [class.dark-mode]="isDarkMode">

<body [ngClass]="{'dark-mode': isDarkMode}">

<body [ngClass]="isDarkMode ? 'dark-mode' : ''">

Further more, with the idea of "Dark/Light", is this the best way to implement by toggling class inside the <body>?