Resolve correct image depending on active theme

[Periecle]

Checklist

• I have read the contributing guidelines.
• There is no similar request on existing issues (including closed ones).
• I have read the project progress and know the current progress of the project.
• I was in the master branch of the latest code.

Is your feature request related to a problem? Please describe

I have a lot of images that look great on the light theme, but on the dark theme look awful or vice versa.

Describe the solution you'd like

It would be great to specify different images depending on a currently selected theme.

If the theme for the image is unspecified, then behavior remains unchanged. Otherwise, the correct image should be resolved and rendered.

Describe alternatives you've considered

Currently, I don't know alternative solutions.

Additional context

[digitigradeit]

Head over to the live mermaid editor

https://mermaid-js.github.io/mermaid-live-editor/edit

and you should be able to re-create these diagrams using mermaid. if you use the built-in mermaid refactoring done by chirpy, it will auto-switch from dark/light since mermaid is svg base and the mode can be passed down before the svg is rendered.

in my own testing, using a plugin like Jekyll-spaceship which has its own mermaid processor and then generates a static image that's then included before the post is converted to html (by default) , it does not have the same auto-switch method for dark/light mode.

how many is a lot of images? I am mot sure if it makes sense to re-create them by hand or not. what did you use to generate the images the first time?

[cotes2020]

There are currently three methods:

1. The easiest way is to add a black background color to the image suitable for dark mode, and vice versa.

2. As @digitigradeit mentioned, redraw the images with Mermaid

3. Redesign the colors of images to make them look great in both dark and light modes.

   For instance:

   

[Periecle]

Ok, that makes sense. Thank you