Dawn theme logo color in Dark Mode

[technase]

My store has a dark logo, but in mobile dark mode, it doesn’t automatically change color and remains the same (attaching screenshot for reference). Is there a way to switch it to a lighter version?

Store link: https://barkblissboutique.com.au/

Any help is greatly appreciated

[GayatriD]

Hi @technase ,

• Go to the Online Store section in your admin panel.
• Click Edit Code for your theme.
• Add the CSS in your theme’s stylesheet (theme.css or equivalent).
• Ensure the HTML for the logo includes the .logo class (modify header.liquid or theme.liquid if necessary).

Please check this process, It would be helpful for you.
Thank you!

[steve_michael2]

Hi @technase

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(max-width:767px){
.header__heading-logo {
    filter: invert(1);
 }
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[technase]

thank you but its not changing the logo’s color in dark mode

[steve_michael2]

Try this code

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(max-width:767px){
.header__heading-logo-wrapper {
    filter: opacity(0.5) !important;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[technase]

still nothing

[steve_michael2]

before:

After:

[steve_michael2]

@media(max-width:930px){
img.header__heading-logo.motion-reduce {
    filter: opacity(0.3);
}
}