search

readthedocs / sphinx-hoverxref

Sphinx extension to show tooltips with content embedded when hover a reference.
https://sphinx-hoverxref.readthedocs.io/
MIT License
96 stars 39 forks source link

Dark mode support #231

Open flying-sheep opened 1 year ago

flying-sheep commented 1 year ago

Using this with a theme that has a dark mode makes text in the popup hard to read, see e.g. https://icb-scanpy--2220.com.readthedocs.build/en/2220/api/generated/scanpy.pp.calculate_qc_metrics.html#scanpy.pp.calculate_qc_metrics

grafik

humitos commented 1 year ago

Thanks for opening this issue. I'm not a user of dark mode, so I would never have find this issue 😅

I saw that you are using "furo" theme and I was able to reproduce this issue by going to the link you shared. I don't know too much about CSS, but I'd assume the tooltip should apply the same class that furo is applying for the body when using dark mode. Maybe it's not too complicated to do that and make it match the same style, but 🤷🏼

I'll see if I come back to this in the following weeks (going on a travel in the next days) and research a little more.

flying-sheep commented 1 year ago

Ooo exciting! I hope you have fun on your trip!

Regarding this: Furo sets <body data-theme="auto"> (or "dark" or "light"), other themes do it differently. E.g. the PyData theme sets both data-mode and data-theme. “auto” of course means to derive the mode from the system theme.

I don’t think inheriting from body is too easy. Themes don’t use classes, and tooltipster uses border-color for the triangle, not background-color. Something like this should work:

/* allow users to override these colors without having to replicate a lot of CSS */
:root {
  --hoverxref-bg-color-dark: dimgray;
  --hoverxref-bg-color-light: white;
  /* “dark” means “light-on-dark” so fg-color-dark is a light color */
  --hoverxref-fg-color-dark: white;
  --hoverxref-fg-color-light: black;
}

/* defaults derived from system color scheme, set by user except on windows */
@media (prefers-color-scheme: light) {
  body:not([data-theme="dark"]):not([data-mode="dark"]) {
    --hoverxref-bg-color: var(--hoverxref-bg-color-light);
    --hoverxref-fg-color: var(--hoverxref-fg-color-light);
  }
}
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]):not([data-mode="light"]) {
    --hoverxref-bg-color: var(--hoverxref-bg-color-dark);
    --hoverxref-fg-color: var(--hoverxref-fg-color-dark);
  }
}

/* explicitly overridden by user */
body:is([data-theme="light"], [data-mode="light"])) {
  --hoverxref-bg-color: var(--hoverxref-bg-color-light);
  --hoverxref-fg-color: var(--hoverxref-fg-color-light);
}
body:is([data-theme="dark"], [data-mode="dark"])) {
  --hoverxref-bg-color: var(--hoverxref-bg-color-dark);
  --hoverxref-fg-color: var(--hoverxref-fg-color-dark);
}

/* use variables to set tooltip colors */
.tooltipster-sidetip.tooltipster-shadow .tooltipster-box {
  background-color: var(--hoverxref-bg-color);
  color: var(--hoverxref-fg-color);
}
.tooltipster-sidetip.tooltipster-shadow.tooltipster-right .tooltipster-arrow-border {
  border-right-color: var(--hoverxref-bg-color);
}
/* … same for the other directions … */
Snipy7374 commented 1 year ago

Hi, i was wondering what's the state of this issue? I'm encountering the same "problem" so it would be cool if it'll be implemented in hoverxref.