From e3069e8eeb3e4a667a512a1bf96ebd8382fc9c87 Mon Sep 17 00:00:00 2001
From: Arne Vlaeminck <arne@cptarn.com>
Date: Mon, 28 Oct 2024 19:52:08 +0100
Subject: [PATCH] added logos for light theme

---
 public/assets/{logos.svg => logos-dark.svg}          |  0
 public/assets/{Artboard 15.svg => logos-light.svg}   |  0
 public/assets/{ui-ux.svg => ui-ux-dark.svg}          |  0
 public/assets/{Artboard 16.svg => ui-ux-light.svg}   |  0
 .../{verpakkingen.svg => verpakkingen-dark.svg}      |  0
 .../{Artboard 14.svg => verpakkingen-light.svg}      |  0
 public/assets/{zetwerk.svg => zetwerk-dark.svg}      |  0
 public/assets/{Artboard 13.svg => zetwerk-light.svg} |  0
 src/app/services/services.component.html             | 12 ++++++++----
 src/styles.scss                                      | 12 ++++++++++++
 10 files changed, 20 insertions(+), 4 deletions(-)
 rename public/assets/{logos.svg => logos-dark.svg} (100%)
 rename public/assets/{Artboard 15.svg => logos-light.svg} (100%)
 rename public/assets/{ui-ux.svg => ui-ux-dark.svg} (100%)
 rename public/assets/{Artboard 16.svg => ui-ux-light.svg} (100%)
 rename public/assets/{verpakkingen.svg => verpakkingen-dark.svg} (100%)
 rename public/assets/{Artboard 14.svg => verpakkingen-light.svg} (100%)
 rename public/assets/{zetwerk.svg => zetwerk-dark.svg} (100%)
 rename public/assets/{Artboard 13.svg => zetwerk-light.svg} (100%)

diff --git a/public/assets/logos.svg b/public/assets/logos-dark.svg
similarity index 100%
rename from public/assets/logos.svg
rename to public/assets/logos-dark.svg
diff --git a/public/assets/Artboard 15.svg b/public/assets/logos-light.svg
similarity index 100%
rename from public/assets/Artboard 15.svg
rename to public/assets/logos-light.svg
diff --git a/public/assets/ui-ux.svg b/public/assets/ui-ux-dark.svg
similarity index 100%
rename from public/assets/ui-ux.svg
rename to public/assets/ui-ux-dark.svg
diff --git a/public/assets/Artboard 16.svg b/public/assets/ui-ux-light.svg
similarity index 100%
rename from public/assets/Artboard 16.svg
rename to public/assets/ui-ux-light.svg
diff --git a/public/assets/verpakkingen.svg b/public/assets/verpakkingen-dark.svg
similarity index 100%
rename from public/assets/verpakkingen.svg
rename to public/assets/verpakkingen-dark.svg
diff --git a/public/assets/Artboard 14.svg b/public/assets/verpakkingen-light.svg
similarity index 100%
rename from public/assets/Artboard 14.svg
rename to public/assets/verpakkingen-light.svg
diff --git a/public/assets/zetwerk.svg b/public/assets/zetwerk-dark.svg
similarity index 100%
rename from public/assets/zetwerk.svg
rename to public/assets/zetwerk-dark.svg
diff --git a/public/assets/Artboard 13.svg b/public/assets/zetwerk-light.svg
similarity index 100%
rename from public/assets/Artboard 13.svg
rename to public/assets/zetwerk-light.svg
diff --git a/src/app/services/services.component.html b/src/app/services/services.component.html
index 84164bd..404c7e5 100644
--- a/src/app/services/services.component.html
+++ b/src/app/services/services.component.html
@@ -1,16 +1,20 @@
 <div class="service">
-  <img src="assets/zetwerk.svg" alt="zetwerk" />
+  <img src="assets/zetwerk-dark.svg" alt="zetwerk" class="only-on-dark"/>
+  <img src="assets/zetwerk-light.svg" alt="zetwerk" class="only-on-light"/>
   <h2>Zetwerk van boeken</h2>
 </div>
 <div class="service">
-  <img src="assets/verpakkingen.svg" alt="Verpakkingen" />
+  <img src="assets/verpakkingen-dark.svg" alt="Verpakkingen" class="only-on-dark" />
+  <img src="assets/verpakkingen-light.svg" alt="Verpakkingen" class="only-on-light" />
   <h2>Verpakkingen</h2>
 </div>
 <div class="service">
-  <img src="assets/logos.svg" alt="Logos" />
+  <img src="assets/logos-dark.svg" alt="Logos" class="only-on-dark" />
+  <img src="assets/logos-light.svg" alt="Logos" class="only-on-light" />
   <h2>logo's en huisstijlen</h2>
 </div>
 <div class="service">
-  <img src="assets/ui-ux.svg" alt="UX/UI" />
+  <img src="assets/ui-ux-dark.svg" alt="UX/UI" class="only-on-dark" />
+  <img src="assets/ui-ux-light.svg" alt="UX/UI" class="only-on-light" />
   <h2>UX/UI</h2>
 </div>
diff --git a/src/styles.scss b/src/styles.scss
index ef23c63..46840ea 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,9 +1,21 @@
 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: rgb(222, 112, 108);
+
+    .only-on-dark {
+      display: inline-block;
+    }
+
+    .only-on-light {
+      display: none;
+    }
   }