Support dark mode #635
Support dark mode #635
Conversation
|
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? |
|
The general problem is that while many things are able to use the system theme by default
|
|
Btw this PR will not work when user prefers dark, so it needs to do something like not theme="light" |
|
Why not? You’re doing |
|
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) |
|
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? |
|
I think I have an approach that should work. |
|
Could you take a look please? |
|
By the way, stderr is also a bit hard to read: |
| --nbsphinx-table-row-odd-bg: rgba(255, 255, 255, .1); | ||
| } | ||
| } | ||
| body[data-theme="light"]) { |
There was a problem hiding this comment.
data-theme is not a standard attribute for body elements. Some sites use a site-specific attribute name to control light/dark mode toggling in site-specific JS. I think furo specifically uses this attribute name, so this may have unintended consequences with other themes that don't (or do) support dark mode.
The sphinx-immaterial is a port of the mkdocs-material theme, and the attribute similar to furo's data-theme is data-md-color-scheme="slate" for dark mode.
There was a problem hiding this comment.
Furthermore, I think :root is preferred over body in CSS selectors for setting variables. This is just based on my various experiences.
| div.rendered_html tbody tr:hover { | ||
| @media (prefers-color-scheme: dark) { | ||
| body:not([data-theme="light"]) { | ||
| --nbsphinx-table-row-odd-bg: rgba(255, 255, 255, .1); |
There was a problem hiding this comment.
This color (rgba(255, 255, 255, .1)) is essentially a shade of grey in dark mode. It might make more sense to use rgba(127, 127, 127, 0.25) for both light and dark modes. That way the foreground color doesn't also need compensation. Font colors are usually more absolutely white or black, but colored text will depend more on the saturation of the color used in text; this discrepancy doesn't arise often.
I tested my color suggestion in furo, and the text is still legible.
The suggested alpha value could be adjusted (maybe lesser) to reduce the subtlety though.
While this comment is focused on the CSS selector tr.row-odd (or something more specifically used by nbsphinx), it could also be applied to the input code-block's added border. I have listed all the problematic hard-coded colors in #734 (comment)
|
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. As it's very much theme related, I'm not sure that coloring should be a responsability of nbsphinx itself. |
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:
after:
I don’t know if other themes’ dark modes