Re: Dawn theme logo color in Dark Mode

Dawn theme logo color in Dark Mode

technase
Shopify Partner
209 1 47

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 

download (5) copy.jpg

technase
Replies 7 (7)

Jennifer20
Navigator
755 18 4

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!

 

Web and Mobile App Expert 🙂
Skype - live:jennifer.wcoast (Jennifer Smith)
Mail- jennifer.wrexim@gmail.com / sales@wreximinfotech.com
LinkedIn- https://www.linkedin.com/in/gayatri-jennifer-wreximinfotech/

steve_michael2
Trailblazer
444 38 57

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
Shopify Partner
209 1 47

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

technase
steve_michael2
Trailblazer
444 38 57

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
Shopify Partner
209 1 47

still nothing

technase
steve_michael2
Trailblazer
444 38 57

before:

steve_michael2_1-1733395225932.png

 

After:

steve_michael2_2-1733395247532.png

 

 

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