Transparent logo does not work well in dark mode

Shopify Discussion

Topic summary

A Shopify store owner reports that their transparent header logo is not visible when users browse in dark mode, making it difficult to see against dark backgrounds.

Proposed Solution:
A detailed technical solution was provided involving:

  • Creating two logo versions (one for light mode, one for dark mode)
  • Uploading both to Shopify’s Assets folder
  • Modifying theme code files (theme.liquid or header.liquid) to include both logo images
  • Adding CSS media queries using @media (prefers-color-scheme: dark) to automatically switch logos based on user’s system settings

The solution would display the appropriate logo version automatically without requiring manual user intervention.

Current Status:
The original poster indicated they would test the suggested solution. Another user offered to review the theme files directly if given store access. A separate issue was also flagged: the website’s story page contains placeholder images that may need attention.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hello,
I have a website with a transparent logo for my header and it doesn’t work well when users are browsing in dark mode. Would it be possible to change the change the color of the logo when users are browsing in dark mode?

My website is www.schwettefw.com

Appreciate any form of help and assistance, thank you!

darkmode
darkmode746×1600 61 KB

2

Absolutely, you can show a different logo when a user’s device/browser is in dark mode using CSS media queries. It works well if you have two versions of your logo:

  • One for light mode (e.g. transparent/black logo)
  • One for dark mode (e.g. white or light-colored logo)

Here’s How to Do It:

Step 1: Prepare two logos

Upload both to your Shopify Assets folder:

  • logo-light.png (for white backgrounds)
  • logo-dark.png (for dark backgrounds)

Step 2: Edit Your Theme Code

Go to Online Store > Themes > Actions > Edit Code

Open your theme.liquid or header.liquid file (depending on where your logo is added), and update the logo code like this:

html

CopyEdit

<!-- Default Light Logo -->
<img 
  src="{{ 'logo-light.png' | asset_url }}" 
  class="site-logo light-logo" 
  alt="Schwette FW" />

<!-- Dark Mode Logo (initially hidden) -->
<img 
  src="{{ 'logo-dark.png' | asset_url }}" 
  class="site-logo dark-logo" 
  alt="Schwette FW" />

Step 3: Add CSS for Dark Mode Switching

Open your base.css, theme.css, or styles.css file and add:

css

CopyEdit

/* Hide dark logo by default */
.dark-logo {
  display: none;
}

/* When in dark mode */
@media (prefers-color-scheme: dark) {
  .light-logo {
    display: none;
  }

  .dark-logo {
    display: inline;
  }
}

Result:

  • Visitors using light mode will see logo-light.png
  • Visitors in dark mode will see logo-dark.png
  • The change is automatic based on system settings
3

Hey @SFW,
I check that the issue with the logo for the dark mode screen could be resolved by taking a look in your theme file. Could you please share the 4 digits store collab code in the p/m so that I can take a look and provide you with the solution code.
Thanks

4

Hi there, this looks promising. Let me try it out and I’ll update you on the results. Thank you!

5

I think your logo issue is done,

I recently visited your website and noticed that some pages, such as the story page, still contain placeholder images and appear incomplete. This might have been overlooked or still under development.

If you’re aware of this and the updates are in progress, that’s great. However, if you were unaware, I’d be happy to help fix and finalize these areas for you.

Please let me know if you’d like to discuss this further or need assistance.

Story page link :- Stories – Schwette Footwear

image
image1887×708 86.8 KB