[FIX] Detect dark mode in a wider range of sphinx themes

[SamAdamDay]

The CSS file currently uses body[data-theme="dark"] to detect whether the theme is using dark mode. But different Sphinx themes use different mechanisms for marking this.

Here is a summary of the mechanisms used by all the themes in https://sphinx-themes.org/ which are currently building and which support dark mode.

• Furo: body[data-theme="dark"] and body[data-theme="auto"]
• Book: html[data-mode="dark"] and html[data-mode="auto"]
• PyData: html[data-mode="dark"] and html[data-mode="auto"]
• Press: body.theme-dark. The auto mode either sets this or body.theme-light
• Piccolo: html[data-mode="dark"] and html[data-mode="auto"]
• Awesome: html.dark. The auto mode either sets this class or removes it
• Nefertiti: html.dark. The auto mode either sets this class or removes it
• PDJ: Updating the media attribute of stylesheet link elements to toggle these stylesheets on and off. Supporting this would require some JavaScript hacking.
• Python Documentation: Updating the media attribute of stylesheet link elements to toggle these stylesheets on and off. Supporting this would require some JavaScript hacking.
• Wagtail: body.theme-dark. There's no auto mode

Overall there are five different mechanisms. This PR enables detecting dark mode in the four cases where this can be done using pure CSS.

Fixes #193 Fixes #194 Fixes #195

[EytanDn]

I came across same issue this suppose to solve, would love for this to be merged <3!

[etesami]

This solution works. It would be great to have this merged into the main branch.