Correct image based on "data-mode"

[ghost]

Checklist

• [x ] I have read the newlest tutorials and know the correct effect of the functional design.
• [x ] There is no similar question on existing issues (including closed ones).
• [x ] I have tried to find the answer on Jekyll Forum and StackOverflow.
• [x ] My question is based on the latest code of the master branch.

Description

I actually came across a similar question:
#481

However, my images are not exclusively diagrams, so I can't really use mermaid.

I wonder if there is a solution that would take "data-mode" into account and choose the correct image based on that.

If I insert something like "prefers-color-scheme" CSS media feature, but how would the markdown look?
Is it even feasible, so that I don't waste my time for no reason?

[sunnamed434]

As I understand this could be done like that, but this is not working for me

[ghost]

Thanks a lot, for some reason I managed to miss this part of the tutorial about images, although I saw the part about shadow effect.. Anyway I'll try it as soon as I get home.

[ghost]

![Light mode only](/path/to/light-mode.png){: .light }
![Dark mode only](/path/to/dark-mode.png){: .dark }

Unfortunately, this solution does not work for some reason

[ghost]

I get it, you need to update theme to 5.4.0 and then everything works!

[sunnamed434]

I get it, you need to update theme to 5.4.0 and then everything works!

What command name to update theme?

[NichtsHsu]

I get it, you need to update theme to 5.4.0 and then everything works!

What command name to update theme?

Please check https://chirpy.cotes.page/posts/getting-started/#upgrading

[sunnamed434]

I get it, you need to update theme to 5.4.0 and then everything works!

What command name to update theme?

Please check https://chirpy.cotes.page/posts/getting-started/#upgrading

thx, works fine now