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

Support dark mode #635

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

Support dark mode #635

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1466153
Support dark mode
flying-sheep Feb 23, 2022
e547932
generalize
flying-sheep Feb 25, 2022
59118d6
Maybe this works
flying-sheep Mar 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 23 additions & 18 deletions src/nbsphinx.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -656,26 +656,18 @@
}

/* Some additional styling taken form the Jupyter notebook CSS */
.jp-RenderedHTMLCommon table,
div.rendered_html table {
:is(.jp-RenderedHTMLCommon, div.rendered_html) table {
border: none;
border-collapse: collapse;
border-spacing: 0;
color: black;
font-size: 12px;
table-layout: fixed;
}
.jp-RenderedHTMLCommon thead,
div.rendered_html thead {
:is(.jp-RenderedHTMLCommon, div.rendered_html) thead {
border-bottom: 1px solid black;
vertical-align: bottom;
}
.jp-RenderedHTMLCommon tr,
.jp-RenderedHTMLCommon th,
.jp-RenderedHTMLCommon td,
div.rendered_html tr,
div.rendered_html th,
div.rendered_html td {
:is(.jp-RenderedHTMLCommon, div.rendered_html) :is(tr, th, td) {
text-align: right;
vertical-align: middle;
padding: 0.5em 0.5em;
Expand All @@ -684,16 +676,29 @@
max-width: none;
border: none;
}
.jp-RenderedHTMLCommon th,
div.rendered_html th {
:is(.jp-RenderedHTMLCommon, div.rendered_html) th {
font-weight: bold;
}
.jp-RenderedHTMLCommon tbody tr:nth-child(odd),
div.rendered_html tbody tr:nth-child(odd) {
background: #f5f5f5;
@media (prefers-color-scheme: light) {
body:not([data-theme="dark"]) {
--nbsphinx-table-row-odd-bg: #f5f5f5;
}
}
.jp-RenderedHTMLCommon tbody tr:hover,
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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
image image
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)

}
}
body[data-theme="light"]) {
Copy link
Contributor

@2bndy5 2bndy5 May 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Furthermore, I think :root is preferred over body in CSS selectors for setting variables. This is just based on my various experiences.

--nbsphinx-table-row-odd-bg: #f5f5f5;
}
body[data-theme="dark"] {
--nbsphinx-table-row-odd-bg: rgba(255, 255, 255, .1);
}
:is(.jp-RenderedHTMLCommon, div.rendered_html) tbody tr:nth-child(odd) {
background: var(--nbsphinx-table-row-odd-bg);
}
:is(.jp-RenderedHTMLCommon, div.rendered_html) tbody tr:hover {
background: rgba(66, 165, 245, 0.2);
}
"""
Expand Down