jothepro / doxygen-awesome-css

Custom CSS theme for doxygen html-documentation with lots of customization parameters.
https://jothepro.github.io/doxygen-awesome-css/
MIT License
1.04k stars 118 forks source link

Dark theme for SVG graphs #28

Closed kuenzign closed 3 years ago

kuenzign commented 3 years ago

When using raster images (such as the default PNG), doxygen-awesome does a hue-rotate(180deg) invert() for img tags in dark theme. When you have DOT_IMAGE_FORMAT set to svg, Doxygen uses iframe tags instead of img tags. Please add iframe:not([id]) to the css rule for img tags, so that the iframes for SVG are also changed for dark theme.

Something like this should probably suffice:

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

html.dark-mode div.contents div.dyncontent img,
html.dark-mode div.contents div.dyncontent iframe:not([id]) {
    filter: hue-rotate(180deg) invert();
}
jothepro commented 3 years ago

Thanks for reporting this! Why do you require the iframe to not have an id (:not([id]))?

kuenzign commented 3 years ago

It was done originally to prevent iframes that do have an id such as #MSearchResults from being changed, although It may no longer be necessary now that I'm prefacing it with div.contents div.dyncontent. The class diagrams generated by doxygen tend not to have ids.

jothepro commented 3 years ago

Fixed in https://github.com/jothepro/doxygen-awesome-css/commit/8739758d46602cf90e95e349731faa2ea7109d8d

Thanks for providing the solution! Feel free to right away open a pull request in the future! :)