Specify different image for dark / light mode

[matteoacrossi]

Hello, I was wondering if there is a way to have two different versions of an image for the light and dark modes. I have some stylized images that work well with black contours that work well with the light mode, but do not match well with the dark mode.

Is there a possibility to change which image is shown in each mode?

[gcushen]

The Hugo site generator used for Wowchemy is a static site generator, hence it's not best suited to dynamic content. It could be possible but would introduce complexity and there would be some issues to navigate such as lazy loading of dynamic content (dynamic images in this context). Feel free to propose an approach. Otherwise, other users in this position have simply disabled Day/Night mode in params.toml and used a light theme for all visitors.

[matteoacrossi]

I understand that Hugo doesn’t use server side code. I was rather thinking of ways to change the image using CSS, e.g. using the invert() transform, or JavaScript or something like that.

[rodrigoalcarazdelaosa]

By any chance is it a SVG image? I have not tested this but you can use currentColor to make your image use the same color as defined by the color parameter.

I use extensively SVG images in my website and this is the only reason I haven't configured a light/dark theme (I only use a light mode)

[gcushen]

Very elegant solution for SVG images 👏🏻

[matteoacrossi]

This is very interesting. I was using PNGs, but since I have the original vector drawing, using SVG shouldn't be a problem. I'll try and I'll let you know.

[rodrigoalcarazdelaosa]

This is very interesting. I was using PNGs, but since I have the original vector drawing, using SVG shouldn't be a problem. I'll try and I'll let you know.

I'll be happy to hear your progress. I usually produce my SVGs using Inkscape, and I'm not sure how to specify currentColor without editing the code itself.

[SoyBison]

I've been trying to get this to work, and am struggling with it, have you managed anything @matteoacrossi?

[hasanbaig]

following this thread!

[matteoacrossi]

It appears that Wowchemy v5.1 supports automatic inversion of images based on dark/light theme.

I wonder if this can be also done for featured images and so on.

[Nosferican]

My use case is something like with the MongoDB logo which explicitly state which image should be use based on the background color. The dynamic invert(1) also changes the green leaf which is suppose to always stay green.

I used the following method,

body:not(.dark) .mongo_dark {
  display: none;
}
.dark .mongo_light {
  display: none;
}

and

{{< figure src="icons/brands/MongoDB_Logo_FullColorBlack_RGB.svg" class="mongo_light" caption="test" >}}
{{< figure src="icons/brands/MongoDB_Logo_FullColorWhite_RGB.svg" class="mongo_dark" caption="test" >}}

[danikiev]

This solution is very nice, I would just add that you should put the first code block into assets/scss/custom.scss file, and if you don't have, just create it.

[sander1095]

Take a look at my blog post to learn how to do this. It is theme independent and doesn't need JavaScript!

https://stenbrinke.nl/blog/adding-support-for-dark-and-light-images-to-hugo-figure-shortcode