Skip to content

Improve theme integration #693

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Improve theme integration #693

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d33c67
Fix broken table CSS
flying-sheep Sep 12, 2025
9aabfb2
Properly support themes and remove table hacks
flying-sheep Sep 12, 2025
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
9 changes: 3 additions & 6 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,12 +84,9 @@ ipython_config.py
# pyenv
.python-version

# pipenv
# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
# However, in case of collaboration, if having platform-specific dependencies or dependencies
# having no cross-platform support, pipenv may install dependencies that don't work, or not
# install all needed dependencies.
#Pipfile.lock
# lockfiles
Pipfile.lock
uv.lock

# PEP 582; used by e.g. github.com/David-OConnor/pyflow
__pypackages__/
Expand Down
101 changes: 38 additions & 63 deletions myst_nb/static/mystnb.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,31 @@
/* Dark mode support:
* if <html> (e.g. Furo theme) or <body> (e.g. PyData theme) has `data-theme` set, respect it.
* else default to the system color scheme
*/
@media (prefers-color-scheme: dark) {
:root {
--light: ;
--dark: initial;
}
}

@media (prefers-color-scheme: light) {
:root {
--dark: ;
--light: initial;
}
}

:is(html, body)[data-theme="dark"] {
--light: ;
--dark: initial;
}

:is(html, body)[data-theme="light"] {
--dark: ;
--light: initial;
}

/* Variables */
:root {
/*
Expand All @@ -21,39 +49,25 @@
--mystnb-danger-palette-900: #680010;

/* MyST-NB specific variables; colors should be logically picked from palettes */
--mystnb-source-bg-color: var(--mystnb-neutral-palette-100);
--mystnb-stdout-bg-color: var(--mystnb-neutral-palette-50);
--mystnb-stderr-bg-color: var(--mystnb-danger-palette-50);
--mystnb-traceback-bg-color: var(--mystnb-neutral-palette-50);
--mystnb-source-border-color: var(--mystnb-neutral-palette-400);
--mystnb-source-bg-color: var(--light, var(--mystnb-neutral-palette-100)) var(--dark, var(--mystnb-neutral-palette-800));
--mystnb-stdout-bg-color: var(--light, var(--mystnb-neutral-palette-50)) var(--dark, var(--mystnb-neutral-palette-900));
--mystnb-stderr-bg-color: var(--light, var(--mystnb-danger-palette-50)) var(--dark, var(--mystnb-danger-palette-900));
--mystnb-traceback-bg-color: var(--light, var(--mystnb-neutral-palette-50)) var(--dark, var(--mystnb-neutral-palette-900));
--mystnb-source-border-color: var(--light, var(--mystnb-neutral-palette-400)) var(--dark, var(--mystnb-neutral-palette-500));
--mystnb-source-margin-color: green;
--mystnb-stdout-border-color: var(--mystnb-neutral-palette-100);
--mystnb-stderr-border-color: var(--mystnb-neutral-palette-100);
--mystnb-traceback-border-color: var(--mystnb-danger-palette-100);
--mystnb-stdout-border-color: var(--light, var(--mystnb-neutral-palette-100)) var(--dark, var(--mystnb-neutral-palette-800));
--mystnb-stderr-border-color: var(--light, var(--mystnb-neutral-palette-100)) var(--dark, var(--mystnb-neutral-palette-800));
--mystnb-traceback-border-color: var(--light, var(--mystnb-danger-palette-100)) var(--dark, var(--mystnb-danger-palette-800));
--mystnb-hide-prompt-opacity: 70%;
--mystnb-source-border-radius: .4em;
--mystnb-source-border-width: 1px;
--mystnb-scrollbar-width: 0.3rem;
--mystnb-scrollbar-height: 0.3rem;
--mystnb-scrollbar-thumb-color: var(--mystnb-neutral-palette-400);
--mystnb-scrollbar-thumb-hover-color: var(--mystnb-neutral-palette-500);
--mystnb-scrollbar-thumb-color: var(--light, var(--mystnb-neutral-palette-400)) var(--dark, var(--mystnb-neutral-palette-500));
--mystnb-scrollbar-thumb-hover-color: var(--light, var(--mystnb-neutral-palette-500)) var(--dark, var(--mystnb-neutral-palette-400));
--mystnb-scrollbar-thumb-border-radius: 0.25rem;
}

/* Override colors in dark theme */
html[data-theme="dark"] {
--mystnb-source-bg-color: var(--mystnb-neutral-palette-800);
--mystnb-stdout-bg-color: var(--mystnb-neutral-palette-900);
--mystnb-stderr-bg-color: var(--mystnb-danger-palette-900);
--mystnb-traceback-bg-color: var(--mystnb-neutral-palette-900);
--mystnb-source-border-color: var(--mystnb-neutral-palette-500);
--mystnb-stdout-border-color: var(--mystnb-neutral-palette-800);
--mystnb-stderr-border-color: var(--mystnb-neutral-palette-800);
--mystnb-traceback-border-color: var(--mystnb-danger-palette-800);
--mystnb-scrollbar-thumb-color: var(--mystnb-neutral-palette-500);
--mystnb-scrollbar-thumb-hover-color: var(--mystnb-neutral-palette-400);
}


/* Whole cell */
div.container.cell {
Expand Down Expand Up @@ -217,45 +231,6 @@ div.cell details.admonition summary::before {
text-align: left !important;
}

/* Pandas tables. Pulled from the Jupyter / nbsphinx CSS */
div.cell_output table {
border: none;
border-collapse: collapse;
border-spacing: 0;
color: black;
font-size: 1em;
table-layout: fixed;
}

div.cell_output thead {
border-bottom: 1px solid black;
vertical-align: bottom;
}

div.cell_output tr,
div.cell_output th,
div.cell_output td {
text-align: right;
vertical-align: middle;
padding: 0.5em 0.5em;
line-height: normal;
white-space: normal;
max-width: none;
border: none;
}

div.cell_output th {
font-weight: bold;
}

div.cell_output tbody tr:nth-child(odd) {
background: #f5f5f5;
}

div.cell_output tbody tr:hover {
background: rgba(66, 165, 245, 0.2);
}

/** source code line numbers **/
span.linenos {
opacity: 0.5;
Expand Down
6 changes: 4 additions & 2 deletions pyproject.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
[build-system]
requires = ["flit_core >=3.4,<4"]
requires = ["flit_core >=3.11,<4"]
build-backend = "flit_core.buildapi"

[project]
Expand All @@ -9,7 +9,7 @@ description = "A Jupyter Notebook Sphinx reader built on top of the MyST markdow
authors = [{name = "ExecutableBookProject", email = "[email protected]"}]
maintainers = [{name = "Angus Hollands", email = "[email protected]"}]
readme = "README.md"
license = {file = "LICENSE"}
license = "BSD-3-Clause"
classifiers = [
"Development Status :: 5 - Production/Stable",
"Framework :: Sphinx :: Extension",
Expand Down Expand Up @@ -173,6 +173,8 @@ filterwarnings = [
# From dateutil in sqlalchemy and jupyter_cache
'ignore:datetime.datetime.utcnow\(\) is deprecated:DeprecationWarning:sqlalchemy',
'ignore:datetime.datetime.utcnow\(\) is deprecated:DeprecationWarning:jupyter_cache',
# From matplotlib’s dependencies
'ignore::DeprecationWarning:pyparsing', # imports deprecated `sre_constants`
# Windows issues, some may need to be fixed in MyST-NB, others are upstream
'ignore:Proactor event loop does not implement add_reader:RuntimeWarning:zmq',
]
Expand Down
Loading