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.

Sign up for GitHub

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

Jump to bottom

Dark mode support #231

Open
flying-sheep opened this issue Sep 15, 2022 · 3 comments
Open

Dark mode support #231

flying-sheep opened this issue Sep 15, 2022 · 3 comments
Assignees
@humitos
Labels
Accepted Accepted issue on our roadmap Improvement Minor improvement to code

Comments

@flying-sheep
Copy link

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
Copy link
Member

humitos commented Sep 15, 2022

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.

@humitos humitos added Improvement Minor improvement to code Accepted Accepted issue on our roadmap labels Sep 15, 2022
@flying-sheep
Copy link
Author

flying-sheep commented Sep 16, 2022 •
edited

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
Copy link

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.

@agriyakhetarpal agriyakhetarpal mentioned this issue Jun 29, 2023
Merged
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@humitos humitos

Labels
Accepted Accepted issue on our roadmap Improvement Minor improvement to code
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@humitos @flying-sheep @Snipy7374