From 36e3e4c09cf3505d9c1ac1d4733983357e67cfa3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bernat=20Borr=C3=A0s=20Civil?=
 <70479573+BernatBC@users.noreply.github.com>
Date: Sun, 10 Mar 2024 11:02:51 +0100
Subject: [PATCH] Add dark logos (#903)

Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
---
 assets/scripts/features/darkmode/index.js      | 18 ++++++++++++++++++
 layouts/partials/sections/education-alt.html   |  8 ++++++--
 layouts/partials/sections/education.html       |  8 ++++++--
 .../sections/experiences/positions.html        | 12 ++++++++----
 4 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/assets/scripts/features/darkmode/index.js b/assets/scripts/features/darkmode/index.js
index f268af400..be1ce5a07 100644
--- a/assets/scripts/features/darkmode/index.js
+++ b/assets/scripts/features/darkmode/index.js
@@ -39,6 +39,8 @@ window.addEventListener('load', async () => {
 
     // save preference to local storage
     saveScheme(newScheme)
+
+    setImages(newScheme)
   }
 
   setScheme(loadScheme())
@@ -50,3 +52,19 @@ window.addEventListener('load', async () => {
     })
   })
 })
+
+function setImages(newScheme) {
+  const els = Array.from(document.getElementsByClassName('logo-holder'));
+  for (const el of els) {
+    const light = el.querySelector('.light-logo');
+    const dark = el.querySelector('.dark-logo');
+    if (newScheme === "dark" && dark !== null) {
+      if (light !== null) light.style.display = 'none'
+      dark.style.display = 'inline'
+    }
+    else {
+      if (light !== null) light.style.display = 'inline'
+      if (dark !== null) dark.style.display = 'none'
+    }
+  }
+}
\ No newline at end of file
diff --git a/layouts/partials/sections/education-alt.html b/layouts/partials/sections/education-alt.html
index cbb6120bf..8716c5bd1 100644
--- a/layouts/partials/sections/education-alt.html
+++ b/layouts/partials/sections/education-alt.html
@@ -33,9 +33,13 @@ <h1 class="text-center" style="display: none">
                         <div class="degree-info card">
 
                             {{ $logoImage:= resources.Get .institution.logo}}
+                            {{ $darkLogoImage:= resources.Get .institution.darkLogo}}
                             {{ if $logoImage }}
-                            <div class="logo-holder">
-                                <img class="company-logo" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
+                            <div class="logo-holder"> 
+                                <img class="company-logo light-logo" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
+                                {{ if $darkLogoImage }}
+                                <img class="company-logo dark-logo" src="{{ $darkLogoImage.RelPermalink }}" alt="{{ .name }}" />
+                                {{ end }}
                             </div>
                             {{ end }}
 
diff --git a/layouts/partials/sections/education.html b/layouts/partials/sections/education.html
index fcfb8e5d2..ced54048d 100644
--- a/layouts/partials/sections/education.html
+++ b/layouts/partials/sections/education.html
@@ -33,9 +33,13 @@ <h1 class="text-center" style="display: none">
                         <div class="degree-info card">
 
                             {{ $logoImage:= resources.Get .institution.logo}}
+                            {{ $darkLogoImage:= resources.Get .institution.darkLogo}}
                             {{ if $logoImage }}
-                            <div class="logo-holder">
-                                <img class="company-logo" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
+                            <div class="logo-holder"> 
+                                <img class="company-logo light-logo" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
+                                {{ if $darkLogoImage }}
+                                <img class="company-logo dark-logo" src="{{ $darkLogoImage.RelPermalink }}" alt="{{ .name }}" />
+                                {{ end }}
                             </div>
                             {{ end }}
 
diff --git a/layouts/partials/sections/experiences/positions.html b/layouts/partials/sections/experiences/positions.html
index 367801b8f..0ee18bb9b 100644
--- a/layouts/partials/sections/experiences/positions.html
+++ b/layouts/partials/sections/experiences/positions.html
@@ -1,11 +1,15 @@
 <div class="col-10 col-lg-8">
     <div class="experience-entry-heading">
         {{ $logoImage:= resources.Get .company.logo}}
-            {{ if $logoImage }}
-            <div class="logo-holder">
-                <img class="company-logo" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
-            </div>
+        {{ $darkLogoImage:= resources.Get .company.darkLogo}}
+        {{ if $logoImage }}
+        <div class="logo-holder"> 
+            <img class="company-logo light-logo" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
+            {{ if $darkLogoImage }}
+            <img class="company-logo dark-logo" src="{{ $darkLogoImage.RelPermalink }}" alt="{{ .name }}" />
             {{ end }}
+        </div>
+        {{ end }}
         <!-- Total experience duration on a company is time between the starting date of the oldest position and ending date of most recent position -->
         {{ $oldestPosition := index (last 1 .positions) 0}}
         {{ $mostRecentPosition := index (first 1 .positions) 0}}