Different images for light and dark modes

[kjelljorner]

First of all I would like to congratulate on an awesome sphinx theme! I really love the automatic change between light and dark modes as well. For logos in the navigation menu, it is easy to setup up different images for light and dark modes. For other figures I found myself resorting to a type of hack. I would basically insert this html code with a .. raw:: html directive in my .rst file. Not sure if this could be handled in a better way?

  <picture>
      <source srcset="_static/logo-dark.svg" media="(prefers-color-scheme: dark)">
      <img src="_static/logo-light.svg?text=Light+mode" /> 
  </picture>

[pradyunsg]

You can set the "only-dark" and "only-light" classes on those images:

.. image:: https://source.unsplash.com/200x200/daily?cute+dogs
   :align: center
   :class: only-light

.. image:: https://source.unsplash.com/200x200/daily?cute+cats
   :align: center
   :class: only-dark

[pradyunsg]

This reminded me that I never documented this! Fixed that in aaec369. :)

[gumityolcu]

Hello. Currently, this doesn't work for inline images. Adding :class: only-light will add a newline before and after the image when used inside a substitution as an inline image. Is there any fix for this? Thank you