Skip to content

Commit

Permalink
Add support for different logo on dark mode (#1020)
Browse files Browse the repository at this point in the history
  • Loading branch information
hossainemruz authored Jan 14, 2025
1 parent 047bb51 commit 0737251
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 3 deletions.
2 changes: 1 addition & 1 deletion assets/scripts/features/darkmode/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,4 +67,4 @@ function setImages(newScheme) {
if (dark !== null) dark.style.display = 'none'
}
}
}
}
2 changes: 1 addition & 1 deletion assets/scripts/features/theme/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -85,4 +85,4 @@ function setImages(newScheme) {
if (dark !== null) dark.style.display = 'none'
}
}
}
}
20 changes: 19 additions & 1 deletion assets/styles/components/images.scss
Original file line number Diff line number Diff line change
Expand Up @@ -55,4 +55,22 @@ html[data-theme='dark'] {
.company-logo {
max-height: 100%;
width: auto;
}
}

.light-logo {
display: inline;
}

.dark-logo {
display: none;
}

html[data-theme='dark'] {
.light-logo {
display: none;
}

.dark-logo {
display: inline;
}
}
15 changes: 15 additions & 0 deletions layouts/partials/navigators/navbar.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
{{/* by default, don't use any logo */}}
{{ $mainLogo := "" }}
{{ $invertedLogo := "" }}
{{ $darkLogo := "" }}

{{/* if custom logo has been provided, use them */}}
{{ if site.Params.logo.main }}
Expand All @@ -21,6 +22,9 @@
{{ if site.Params.logo.inverted }}
{{ $invertedLogo = site.Params.logo.inverted }}
{{ end }}
{{ if site.Params.logo.dark }}
{{ $darkLogo = site.Params.logo.dark }}
{{ end }}

{{/* resize the logos. don't resize svg because it is not supported */}}
{{ if $mainLogo }}
Expand All @@ -39,6 +43,14 @@
{{ $invertedLogo = $invertedLogo.RelPermalink}}
{{ end }}

{{ if $darkLogo }}
{{ $darkLogo = resources.Get $darkLogo}}
{{ if and $darkLogo (ne $darkLogo.MediaType.SubType "svg")}}
{{ $darkLogo = $darkLogo.Resize "42x" }}
{{ end }}
{{ $darkLogo = $darkLogo.RelPermalink}}
{{ end }}

{{ $logo := $mainLogo }}
{{ if .IsHome }}
{{ $logo = $invertedLogo }}
Expand Down Expand Up @@ -154,4 +166,7 @@
{{ if $invertedLogo }}
<img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo" alt="Inverted Logo">
{{ end }}
{{ if $darkLogo }}
<img src="{{ $darkLogo }}" class="d-none" id="dark-logo" alt="Dark Logo">
{{ end }}
</nav>

0 comments on commit 0737251

Please sign in to comment.