Change Logo When Website on Dark Mode (Theme Electro)

Store Design
1

Hello
I want to change the logo when my website changes to dark mode.
Means
What I want to do is: when my website is on light mode, its logo will be on black color and when it changes to dark mode, the logo will automatically be on white color.

Thanks

2

Hi @abdulbasitt

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/theme.css
  3. Add code below to bottom of file
#light .header-logo svg ellipse,
#light .header-logo svg path {
	fill: var(--bg-dark)!important;
}

#dark .header-logo svg ellipse,
#dark  .header-logo svg path {
	fill: var(--header-bg-color)!important;
}
3

Where i can add a link of white version of logo ?

4

Hi @abdulbasitt

/* Light, Logo will show dark color*/
#light .header-logo svg ellipse,
#light .header-logo svg path {
	fill: var(--bg-dark)!important;
}
/* Dark, logo will show white color  */
#dark .header-logo svg ellipse,
#dark  .header-logo svg path {
/* if you dont want this color after that you can update var(--header-bg-color) to #fff */
  fill: var(--header-bg-color)!important;
}