Add dark logos (#903)

Co-authored-by: Emruz Hossain <[email protected]>
hugo-toha · Mar 10, 2024 · 36e3e4c · 36e3e4c
1 parent 803821d
commit 36e3e4c
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 8 deletions.
diff --git 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'
+ }
+ }
+}
diff --git 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
@@ -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
@@ -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}}