Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

SamAdamDay
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant