Logo in dark theme

  • Resolved raposa28

    (@raposa28)


    1 year, 10 months ago

    Hi! The client has a back-and-wight logo with 2 red dots. I added the black one as the site logo, but if the theme is switched to the dark one it looks bad. How can I set the logo for the dark theme?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Alexander Agnarson

    (@alxmedia)

    Hi, in Customize > Additional CSS, add something like this:

    body:where(.dark.invert-dark-logo) .site-title a img { filter: invert(0)!important; }
body:where(.dark) .site-title a img {
	display: block;
	box-sizing: border-box;
	background: url(img/my-logo-dark.png) no-repeat;
	width: 160px; /* Width of new image */
	height: 60px; /* Height of new image */
	padding-left: 160px; /* Width of new image */
}

    Then adjust the width and height values, and put your logo in the /img/ folder of the theme, or link to the background as you wish.

    More here: https://css-tricks.com/replace-the-image-in-an-img-with-css/

    Thread Starter raposa28

    (@raposa28)

    Thank you very much!

    Thread Starter raposa28

    (@raposa28)

    For subsequent requests)))

    I’m not sure is it related to all cases or only mine, but you also need to add padding-top a bit larger than your image. Or to reduce the image size

    • This reply was modified 1 year, 10 months ago by raposa28.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Logo in dark theme’ is closed to new replies.