Secondary logo (Hack)

[Raz1]

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