added logos for light theme

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>

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;
+    }
   }