Transparent logo does not work well with mobile dark mode

Technical Q&A

Topic summary

A user reports that their transparent header logo is difficult to see when visitors browse their website (www.schwettefw.com) in mobile dark mode.

Proposed Solutions:

  • Adjust logo color through theme settings
  • Check the Broadcast theme customizer for built-in dark mode logo options, or contact theme support
  • Implement a dual-logo solution by:
    • Modifying the header.liquid file to support a second logo
    • Adding CSS with @media (prefers-color-scheme: dark) to automatically switch between logos based on user’s system dark mode preference

The discussion remains open with no confirmation from the original poster about which solution was attempted or successful. The technical approach involves detecting the user’s color scheme preference and conditionally displaying the appropriate logo variant.

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!

image
image466×1000 47.7 KB

2

Adjust the color from theme settings

1 Like
3

@SFW

You are using Broadcast theme. Please check in your customizer if other logo options there for the dark mode. If not then please contact theme support. I hope they will guide.

6

Hi @SFW,

This will require you to add the option to show a second logo for dark mode. You can follow these steps:

  • Step 1: Please go to header.liquid file, change code to add option to display 2nd logo.
  • Step 2: Add CSS code in the following structure to display it:
.logo--second {
    display: none;
}
@media (prefers-color-scheme: dark) {
    .logo--first {
        display: none;
    }
    .logo--second {
        display: block;
    }
}

If I helped you, then a Like would be truly appreciated.