Added theme switching

src/app/hero/hero.component.html

@@ -2,3 +2,4 @@
 <a href="/"><img src="assets/logo-light.svg" alt="Logo light" class="only-on-light" /></a>
 <h1>Ontvlambaar</h1>
 <span class="slogan">Jullie het vuur, wij de branding</span>
+<input type="checkbox" [checked]="isDarkMode()" (change)="themeClicked($event)">

src/app/hero/hero.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, computed, input, output } from '@angular/core';
 
 @Component({
   selector: 'app-hero',
@@ -8,5 +8,13 @@ import { Component } from '@angular/core';
   styleUrl: './hero.component.scss'
 })
 export class HeroComponent {
+  theme= input<string>();
+  isDarkMode = computed(() => {
+    return this.theme() === 'dark';
+  });
+  themeChange = output<string>();
 
+  public themeClicked(event: any) {
+    this.themeChange.emit(event.target.checked ? 'dark' : 'light');
+  }
 }