Dark mode causes the color of images within tables to be inverted.

[oblivioncth]

I'm not familiar enough with HTML and CSS to know what exactly is happening, but I'm guessing that for whatever reason the attributes/class tied to images within tables is different than when they're by themselves and it's causing the Doxygen Awesome theming to incorrectly pickup the images as elements to change when dark mode is enabled.

Inverted Images:

The images are correctly displayed when the toggle is switched to light mode (see attachment).

Doxygen Version: Release v1.9.3 Doxygen Awsome Version: a5efba07a3d4fd6317d95657b3095b97e134b791

The following is an MRE for this issue: (deleted link to zip file)

(Ignore the strings of the first column in the tables, they're leftovers from the project I reduced into the example)

[jothepro]

Thanks for reporting this problem and for providing information on how to reproduce it! But please share a link to the MRE instead of posting a zip file. I doubt that the file is malicious but I'd like to avoid opening a zip from an untrusted source. I'll delete the link in your comment, sorry for the inconvenience!

[oblivioncth]

I would have just used a gist but some files were in subfolders (didn't have to be, but meh) and its also convenient to include the images even though you could have just substituted your own. So:

https://github.com/oblivioncth/doxygen-awesome_issue_72

Everything in the theme folder is straight from the commit in your repo that I mentioned above. Just there for convenience.

[mrquincle]

For now, workaround

@media (prefers-color-scheme: dark) {
    html:not(.light-mode) div.contents div.dyncontent img,
    html:not(.light-mode) div.contents center img,
    /* html:not(.light-mode) div.contents table img, */
    html:not(.light-mode) div.contents div.dyncontent iframe,
    html:not(.light-mode) div.contents center iframe,
    html:not(.light-mode) div.contents table iframe {
        filter: hue-rotate(180deg) invert();
    }
}

html.dark-mode div.contents div.dyncontent img,
html.dark-mode div.contents center img,
/* html.dark-mode div.contents table img, */
html.dark-mode div.contents div.dyncontent iframe,
html.dark-mode div.contents center iframe,
html.dark-mode div.contents table iframe {
    filter: hue-rotate(180deg) invert();
}

Not sure why table img is color-inverted though.

[jothepro]

That one took me a moment... The line in question is supposed to invert the graphical class hierarchy when it is rendered as png. Commit https://github.com/jothepro/doxygen-awesome-css/commit/afc4868752f4a886cfbca70bb546ddba55579def should fix the issue.

Also, based on the screenshot provided by you I realized that doxygen tables are not yet supported by the theme. https://github.com/jothepro/doxygen-awesome-css/commit/9e466391d8367485bd64cd14b252991167740c70 now makes beautiful doxygen tables possible, with all the nice features that markdown tables already offered: rounded corners and scrolling support if the content gets too wide!

[oblivioncth]

Never got to trying the workaround, but now I don't have to :)

Nice work, thanks for tackling this, and yea I originally was going to use the Doxy style tables but noticed they didn't work right so that's nice there's support now.