Switching Header Logos for Dark mode on a theme?

Robert42
New Member
3 0 3

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
Karl_J
Shopify Partner
65 8 40

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
Get in touch: support@getshogun.com | Try Shogun Page Builder for Shopify for FREE!

If you found my answer helpful, please mark it as the solution!
0 Likes
jordae
Excursionist
22 0 3

Hello I'm trying to achieve the same thing with no luck

I've added these line code at the end of my theme.css (debut theme)

 

@media (prefers-color-scheme: dark) {
.site-header__logo-image { background: url(https://cdn.shopify.com/s/files/1/1631/5085/files/logoentete_blancsurnoir.png?v=1624612233); }

}

 

Any help would be appreciated, thanks !

0 Likes
jordae
Excursionist
22 0 3

Anyone ?

0 Likes