Documentation request: how to support #gh-dark-mode-only and #gh-light-mode-only

[mrquincle]

Currently there's a neat github feature to define if images should be rendered in dark and/or light mode. It's something like this:

<p align="center">
  <a href="https://crownstone.rocks#gh-light-mode-only">
    <img src="https://raw.githubusercontent.com/crownstone/bluenet/master/docs/images/crownstone_logo_text_black.svg?sanitize=true" alt="Crownstone Logo in Light Mode" />
  </a>
  <a href="https://crownstone.rocks#gh-dark-mode-only">
    <img src="https://raw.githubusercontent.com/crownstone/bluenet/master/docs/images/crownstone_logo_text_white.svg?sanitize=true" alt="Crownstone Logo in Dark Mode" />
  </a>
</p>

What I'm looking for is how to adjust the css to have the same behavior. It means I've to do something like the following depending on the mode.

a[href$="gh-light-mode-only"] { 
      display:none;
}     

It would be great to get some help in how to do this. Or otherwise, some directions I how this should be done in a manner that is github compatible.

[mrquincle]

For now I've added

html.dark-mode
a[href$="#\gh-light-mode-only"] {
    display: none;
}

html.light-mode
a[href$="#\gh-dark-mode-only"] {
    display: none;
}

Corrections welcome!

[jothepro]

This sounds like a nice feature! Unfortunately it has been deprecated by GitHub in favor of the <picture> element. But the <picture> tag will not be accepted by Doxygen.

Any other suggestions? My guess is that the best approach would be to open an issue at doxygen/doxygen asking for <picture> support? 🤔

[mrquincle]

I think it's coming: https://github.com/doxygen/doxygen/blob/master/src/htmldocvisitor.cpp

[mrquincle]

Oh no, this is just for displaying formulas.