nbsphinx icon indicating copy to clipboard operation
nbsphinx copied to clipboard

Published 20 hours ago • verified publisher icon spatialaudio

Support dark mode

Open flying-sheep opened this issue 3 years ago • 10 comments

in your furo theme branch, you don’t style data frames in a way that’s readable on a dark background:

this is how this page looks for me by default https://nbsphinx.readthedocs.io/en/furo-theme/code-cells.html:

grafik

after:

grafik

I don’t know if other themes’ dark modes

flying-sheep avatar Feb 23 '22 11:02 flying-sheep

Thanks for this PR!

I'm not yet familiar with dark mode, I'll have to read up a bit.

But I already have a question: How does JupyterLab (which also has a dark theme) handle this situation? In a similar way?

mgeier avatar Feb 24 '22 19:02 mgeier

The general problem is that while many things are able to use the system theme by default (prefers-color-scheme: dark), they also allow some toggle to override this. And the way this manually selected state is stored depends on the theme / app author.

  • jupyterlab has <body data-jp-theme-light="false">
  • The upcoming dark mode for the pydata theme (https://github.com/pydata/pydata-sphinx-theme/pull/540) has <html data-theme="dark">
  • Furo has <body data-theme="dark">

flying-sheep avatar Feb 25 '22 07:02 flying-sheep

Btw this PR will not work when user prefers dark, so it needs to do something like not theme="light"

see https://github.com/scverse/scvi-tools/pull/1448

adamgayoso avatar Mar 17 '22 20:03 adamgayoso

Why not? You’re doing body:not([data-theme=light]) <selector> and I’m doing *[data-theme="dark"] <selector>. Both should work right?

flying-sheep avatar Mar 18 '22 08:03 flying-sheep

not exactly, at least it didn't for me when your browser "prefers dark"

(not night mode on furo, but this is the "default", prefers logo) Screen Shot 2022-03-18 at 7 27 33 AM

adamgayoso avatar Mar 18 '22 14:03 adamgayoso

I have also run into this, needed a solution quickly so I overrode the hardcoded colors in https://github.com/spatialaudio/nbsphinx/blob/master/src/nbsphinx.py#L658 with theme-agnostic CSS variables from Jupyter:

.jp-RenderedHTMLCommon table,
div.rendered_html table {
  color: var(--jp-ui-font-color1) !important;
}
.jp-RenderedHTMLCommon thead,
div.rendered_html thead {
  border-bottom: var(--jp-border-width) solid var(--jp-border-color1) !important;
}
.jp-RenderedHTMLCommon tbody tr:nth-child(odd),
div.rendered_html tbody tr:nth-child(odd) {
  background: var(--jp-layout-color0) !important;
}
.jp-RenderedHTMLCommon tbody tr:nth-child(even),
div.rendered_html tbody tr:nth-child(even) {
  background: var(--jp-rendermime-table-row-background) !important;
}
.jp-RenderedHTMLCommon tbody tr:hover,
div.rendered_html tbody tr:hover {
  background: var(--jp-rendermime-table-row-hover-background) !important;
}

ETA Would it be easier to unbreak Furo dark mode by removing the explicit color values introduced in #228?

ohrely avatar Mar 19 '22 00:03 ohrely

I think I have an approach that should work.

flying-sheep avatar Mar 20 '22 10:03 flying-sheep

Could you take a look please?

flying-sheep avatar Apr 06 '22 12:04 flying-sheep

By the way, stderr is also a bit hard to read: image

tmke8 avatar Jun 13 '22 16:06 tmke8

Just to add some information about the dark-themes in general, in pydata-sphinx-theme we decided to endorse the support of the dark-theme display so we do customise the redenring of supported libs to match the theme color scheme.

https://github.com/pydata/pydata-sphinx-theme/tree/main/src/pydata_sphinx_theme/assets/styles/extensions

As it's very much theme related, I'm not sure that coloring should be a responsability of nbsphinx itself.

12rambau avatar Mar 27 '24 07:03 12rambau