I managed to hack myself a secondary logo in my theme. However, it does require the user to add a symbol into the assets folder.
Backstory
My PNG logo wasn’t doing any justice on dark-mode, and I knew I couldn’t rely on users to use SVG correctly, as suggested in another post.
How it works
The user can upload a publication logo on the Ghost dashboard, and a secondary logo hosted in the themes asset folder when they switch to dark-mode.
TL;DR Solution
I created an image folder in the assets folder containing ‘logo-dark.png’. That’s my dark logo.
assets/logo-dark.png
I created a new partial containing the logo:
<a class="logo " href="{{@site.url}}">
{{#if @site.logo}}
<img id="logo-light" src="{{@site.logo}}" alt="{{@site.title}}">
<img id="logo-dark" class="hidden" src={{asset "images/logo-dark.png"}} alt="{{@site.title}}">
{{/if}}
</a>
In my main.js, when the dark mode is active, I hide the publication logo.
My theme has jQuery, but you can 100% code it with vanilla JS. There are multiple ways to apply the same principle, including switches, but this is my approach.
function darkMode() {
$('.toggle-track').on('click', function () {
if (html.hasClass('dark')) {
html.removeClass('dark');
$('#logo-light').removeClass('hidden')
$('#logo-dark').addClass('hidden')
} else {
html.addClass('dark');
$('#logo-light').addClass('hidden')
$('#logo-dark').removeClass('hidden')
}
});
}
Now, whenever I toggle dark-mode, it also changes my logo! The end-user has to upload a publication logo and also change the logo in the themes asset folder.
I’m a coding newbie and far from being a developer, hacking and trying as I go! Any feedback is appreciated.
I removed some fluff from the code for easy reading, but ideally, you’d want to save your settings into the browser local storage.
Publication logo
Secondary logo