Image with light/dark mode

[vlebert]

Hi

Is there a way to add images that could adapt to dark/light mode ? For example often logos are available in 2 version for dark and light mode.

If not any clues on how to develop this feature?

Thanks for the theme by the way
Valerian

[ahenaor]

Hello. I have the same question. I want an image within a post to adapt to dark mode or light mode. I appreciate any help

[erahn-safejump]

Piling in here to say that this would be very useful to be able to change images used in the markdown based on the theme being light/dark.

[tim-hilt]

You could use an svg-image and add styles with a .dark-class in front of them!

This also works for the syntax-highlighting-theme or a favicon.

[erahn-safejump]

Tim, thanks for the quick reply. Do you have an example of this I could look at somewhere, ideally showing how it is used in hugo markdown? I do have the image in an svg format, but I am not that familiar with web design.

[tim-hilt]

You could google „style svg with css“ to get a feel of how you would achieve this. Unfortunately I don’t have a quick example on how to do this.

[PradeepLoganathan]

Did this work for anyone ?

[pushblue]

I got this working on my site. Here's a guide:

https://push.blue/posts/20220718-add-lightdarklogoswap/

[PradeepLoganathan]

Thanks .. this works great and the logic makes sense. However, it would be great to have a solution that can be applied to all images on a blog post and not just the logo.

[mattmtong]

Hi @pushblue, I tried adding your lines of code into my files, but I don't see any change on my site. Is there any other place I need to change to activate a custom logo in the header area?

[est01co]

Dude, you really helped me a lot. Wishing you all the best in life!

[erahn-safejump]

Thanks push.blue! I look forward to trying this out sometime.

…

On Mon, Jul 18, 2022 at 1:35 PM push.blue ***@***.***> wrote: I got this working on my site. Here's a guide: https://push.blue/posts/20220718-add-lightdarklogoswap/ — Reply to this email directly, view it on GitHub <#689 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZK2A2KJU2MZZYV45G7HGWTVUW5ZZANCNFSM5KWO4G6A> . You are receiving this because you commented.Message ID: ***@***.*** com>