title: How to toggle dark theme in Angular when I click on the switch?
body: <p>I am using angular and I am trying to switch between light and dark themes. The toggle switch is in my header component. Please see below</p>
  
  <p><a href="https://i.stack.imgur.com/Pwpga.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pwpga.png" alt="enter image description here"></a></p>
  
  <p>And my header component is the child component in the app component. See below also</p>
  
  <pre><code>// app.component.html    
  
      &lt;app-header (mode)="receiveMode($event)"&gt;&lt;/app-header&gt;
  
       &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>Therefore, I set the boolean value for the toggle theme in my header component TS file</p>
  
  <pre><code>// header.component.ts
  
  import { Component, OnInit , Output, EventEmitter} from '@angular/core';
  
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
  })
  export class HeaderComponent implements OnInit {
  
    @Output() mode = new EventEmitter&lt;boolean&gt;();
  
    setDark = false;
  
    constructor() { }
  
    ngOnInit(): void {
  
    }
  
    onChangeToggle() {
      this.setDark = !this.setDark;
      this.mode.emit(this.setDark);
      console.log(this.setDark);
    }
  
  }
  </code></pre>
  
  <p>I then pass that value to the parent component with the Output decorator and receive it in the app.component.ts file so that all other components can have the theme as well, (not just HomeComponent).</p>
  
  <pre><code>// app.component.ts
  
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  
    setMode = false;
  
    receiveMode($event) {
      this.setMode = $event;
      console.log("MODEEEE", this.setMode);
    }
  
  
    title = 'about-me';
  }
  </code></pre>
  
  <p>I then receive the boolean value from the app-header in the app.component.html file</p>
  
  <pre><code>// app.component.html
  
      &lt;app-header (mode)="receiveMode($event)"&gt;&lt;/app-header&gt;
  
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>And I added the darkTheme class to my global stylessheet in styles.css</p>
  
  <pre><code>.darkTheme {
      background-color: black;
  }
  </code></pre>
  
  <p>I want to know how  can use ngClass or ngStyle to set it conditionally based on the boolean value.</p>