michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-01-22 22:45:42 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

✨[#676] Add logo dark/light mode switching mechanism

Browse source
This commit is contained in:
Daniel Odrinski 2023-04-26 18:49:53 +01:00
parent 92f26f9bdd
commit b8f23598c8
2 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
assets/js/appearance.js
View file

@ -26,16 +26,20 @@ window.addEventListener("DOMContentLoaded", (event) => {
const switcher = document.getElementById("appearance-switcher"); const switcher = document.getElementById("appearance-switcher");
const switcherMobile = document.getElementById("appearance-switcher-mobile"); const switcherMobile = document.getElementById("appearance-switcher-mobile");
var targetAppearance = document.documentElement.classList.contains("dark") ? "dark" : "light"
updateMeta() updateMeta()
updateLogo(targetAppearance)
if (switcher) { if (switcher) {
switcher.addEventListener("click", () => { switcher.addEventListener("click", () => {
document.documentElement.classList.toggle("dark"); document.documentElement.classList.toggle("dark");
var targetAppearance = document.documentElement.classList.contains("dark") ? "dark" : "light"
localStorage.setItem( localStorage.setItem(
"appearance", "appearance",
document.documentElement.classList.contains("dark") ? "dark" : "light" targetAppearance
); );
updateMeta() updateMeta()
updateLogo(targetAppearance)
}); });
switcher.addEventListener("contextmenu", (event) => { switcher.addEventListener("contextmenu", (event) => {
event.preventDefault(); event.preventDefault();
@ -45,11 +49,13 @@ window.addEventListener("DOMContentLoaded", (event) => {
if (switcherMobile) { if (switcherMobile) {
switcherMobile.addEventListener("click", () => { switcherMobile.addEventListener("click", () => {
document.documentElement.classList.toggle("dark"); document.documentElement.classList.toggle("dark");
var targetAppearance = document.documentElement.classList.contains("dark") ? "dark" : "light"
localStorage.setItem( localStorage.setItem(
"appearance", "appearance",
document.documentElement.classList.contains("dark") ? "dark" : "light" targetAppearance
); );
updateMeta() updateMeta()
updateLogo(targetAppearance)
}); });
switcherMobile.addEventListener("contextmenu", (event) => { switcherMobile.addEventListener("contextmenu", (event) => {
event.preventDefault(); event.preventDefault();
@ -65,3 +71,20 @@ var updateMeta = () => {
style = getComputedStyle(elem); style = getComputedStyle(elem);
document.querySelector('meta[name="theme-color"]').setAttribute('content', style.backgroundColor); document.querySelector('meta[name="theme-color"]').setAttribute('content', style.backgroundColor);
} }
var updateLogo = (targetAppearance) => {
{{ if and (.Site.Params.Logo) (.Site.Params.SecondaryLogo) }}
{{ $primaryLogo := resources.Get .Site.Params.Logo }}
{{ $secondaryLogo := resources.Get .Site.Params.SecondaryLogo }}
{{ if and ($primaryLogo) ($secondaryLogo) }}
var elems;
elems = document.querySelectorAll("img.logo")
targetLogoPath =
targetAppearance == "{{ .Site.Params.DefaultAppearance }}" ?
"{{ $primaryLogo.RelPermalink }}" : "{{ $secondaryLogo.RelPermalink }}"
for (const elem of elems) {
elem.setAttribute("src", targetLogoPath)
}
{{ end }}
{{- end }}
}

1
config/_default/languages.en.toml
View file

@ -7,6 +7,7 @@ rtl = false
title = "Blowfish" title = "Blowfish"
# logo = "img/logo.png" # logo = "img/logo.png"
# secondaryLogo = "img/secondary-logo.png"
# description = "My awesome website" # description = "My awesome website"
# copyright = "Copy, _right?_ :thinking_face:" # copyright = "Copy, _right?_ :thinking_face:"