From 47ad7f36595ba5061310b0584b16e43d0b2d253c Mon Sep 17 00:00:00 2001
From: Arne Vlaeminck <arne@cptarn.com>
Date: Fri, 1 Nov 2024 12:19:01 +0100
Subject: [PATCH] Added theme switching

---
 src/app/app.component.html       | 58 ++++++++++++++++++++++++++++++--
 src/app/app.component.ts         | 25 ++++++++++++++
 src/app/hero/hero.component.html |  1 +
 src/app/hero/hero.component.ts   | 10 +++++-
 src/styles.scss                  | 43 ++++++++++++-----------
 5 files changed, 112 insertions(+), 25 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 15a4220..489194b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,61 @@
+<!--
+<div
+  style="
+  display: flex;
+  width: 550px;
+  padding: 20px 30px;
+  border-radius: 40px;
+  background-color: rgb(41, 23, 44);
+  gap: 1rem;
+  "
+>
+  <img src="https://cptarn.com/ontvlambaar/assets/signature/logofoto.webp" style="height: 250px;"/>
+  <div
+    style="
+      display: flex;
+      border-left: 5px solid #E94541;
+      padding: 1rem;
+      flex-direction: column;
+    "
+  >
+    <h1
+      style="
+        color: rgb(222, 112, 108);
+        padding: 0;
+        margin: 0;
+        font-size: 1rem;
+      "
+    >LOTTE DE VLAM</h1>
+    <p
+      style="
+        color: #E94541;
+        display: flex;
+        flex-direction: column;
+      "
+    >
+      Grafische vormgever
+      <span>Ontvlambaar</span>
+    </p>
+    <p
+      style="
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        color: rgb(222, 112, 108);
+        text-decoration: none;
+      "
+    >
+      <a style="color: rgb(222, 112, 108);text-decoration: none;"href="tel:+0493183740">04 93 18 37 40</a>
+      <a style="color: rgb(222, 112, 108);text-decoration: none;"href="mailto:lotte@ontvlambaar.be">lotte&#64;ontvlambaar.be</a>
+      <a style="color: rgb(222, 112, 108);text-decoration: none;"href="https://www.ontvlambaar.be">www.ontvlambaar.be</a>
+      <span>BTW BE0673 769 126</span>
+    </p>
+  </div>
+</div> -->
+
 <div class="wrapper">
-  <!-- <app-toggle></app-toggle> -->
   <app-header></app-header>
-  <app-hero></app-hero>
+  <app-hero [theme]="theme" (themeChange)="themeChange($event)"></app-hero>
   <app-services id="services"></app-services>
   <app-portfolio id="portfolio"></app-portfolio>
   <app-about id="about"></app-about>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 047c40f..857beda 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -17,4 +17,29 @@ import { ToggleComponent } from "./toggle/toggle.component";
 })
 export class AppComponent {
   title = 'ontvlambaar';
+  theme = "light"
+
+  private detectColorScheme(): void {
+    //local storage is used to override OS theme settings
+    if(localStorage.getItem("theme")){
+        if(localStorage.getItem("theme") == "dark"){
+            this.theme = "dark";
+        }
+    } else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        //OS theme setting detected as dark
+        this.theme = "dark";
+    }
+
+    document.documentElement.setAttribute("data-theme", this.theme);
+  }
+
+  ngOnInit(): void {
+    this.detectColorScheme();
+  }
+
+  themeChange(theme: string) {
+    localStorage.setItem("theme", theme);
+    this.theme = theme;
+    document.documentElement.setAttribute("data-theme", this.theme);
+  }
 }
diff --git a/src/app/hero/hero.component.html b/src/app/hero/hero.component.html
index 4ca9ddb..43f8d58 100644
--- a/src/app/hero/hero.component.html
+++ b/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)">
diff --git a/src/app/hero/hero.component.ts b/src/app/hero/hero.component.ts
index 41c875c..32e6472 100644
--- a/src/app/hero/hero.component.ts
+++ b/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');
+  }
 }
diff --git a/src/styles.scss b/src/styles.scss
index 8484464..bfefae0 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,25 +1,4 @@
-body {
-  .only-on-dark {
-    display: none;
-  }
-
-  // dark mode
-  @media (prefers-color-scheme: dark) {
-    --text-color: rgb(222, 112, 108);
-    --background-color: rgb(41, 23, 44);
-    --accent-color: #E94541;
-    --logo-color: #E94541;
-
-    .only-on-dark {
-      display: inline-block;
-    }
-
-    .only-on-light {
-      display: none;
-    }
-  }
-
-
+html {
   // light mode
   --text-color: rgb(29, 29, 29);
   --background-color: rgb(255, 255, 255);
@@ -31,4 +10,24 @@ body {
 
   color: var(--text-color);
   background-color: var(--background-color);
+
+  .only-on-dark {
+    display: none;
+  }
+}
+
+[data-theme="dark"] {
+  // dark mode
+  --text-color: rgb(222, 112, 108);
+  --background-color: rgb(41, 23, 44);
+  --accent-color: #E94541;
+  --logo-color: #E94541;
+
+  .only-on-dark {
+    display: inline-block;
+  }
+
+  .only-on-light {
+    display: none;
+  }
 }