Added lottie toggle

src/app/hero/hero.component.html

@@ -2,4 +2,4 @@
 <a href="/" aria-label="Ontvlambaar"><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)">
+<app-toggle (toggleOn)="themeClicked($event)" [toggleValue]="isDarkMode()"></app-toggle>

src/app/hero/hero.component.ts

@@ -1,9 +1,10 @@
 import { Component, computed, input, output } from '@angular/core';
+import { ToggleComponent } from '../toggle/toggle.component';
 
 @Component({
   selector: 'app-hero',
   standalone: true,
-  imports: [],
+  imports: [ToggleComponent],
   templateUrl: './hero.component.html',
   styleUrl: './hero.component.scss'
 })
@@ -15,6 +16,6 @@ export class HeroComponent {
   themeChange = output<string>();
 
   public themeClicked(event: any) {
-    this.themeChange.emit(event.target.checked ? 'dark' : 'light');
+    this.themeChange.emit(event ? 'dark' : 'light');
   }
 }