Switching Header Logos for Dark mode on a theme?

Highlighted
New Member
2 0 2

I'm currently working with Testament (with some pretty extensive modifications), and I'm getting ready to add dark mode on the site in question.  My issue is that the site's header graphic/logo is not set up for dark mode, and part of it disappears into the background due to using black text. The simplest solution to this would be to have the site load a separate graphic (a version of the logo specifically made for dark mode) if a user's preferences are set to dark mode, but I wanted to get some input on what the best way to implement that was.

0 Likes
Highlighted
Shopify Partner
60 7 35

Hi @Robert42!

Unfortunately, not many themes have been updated with a dark mode in mind so this would have to be a pretty manual process of setting the site to make use of dark mode.

The best method of changing the site's header logo would probably be to override it with some CSS so that it can make use of a different logo when the visitor is viewing the page in dark mode - assuming you want this to be automatic, for example, having the store go into dark mode if the visitor's device has dark mode turned on.

Nearly all of the latest versions of browsers now support the prefers-color-scheme media query that can be used to detect the dark mode settings of the device. For example, using @media (prefers-color-scheme: dark) {...} would allow you to set content based on dark mode. For example,

@media (prefers-color-scheme: dark {
    .header-icon {
        background: url(...);
    }
}

Hope this helps point you in the right direction! 

Karl Jones | Team Lead, Technical Support, Shogun
support@getshogun.com | Try Shogun Page Builder for Shopify for FREE!

If you found my answer helpful, please make it as the solution!
0 Likes