Use admonitions to style collapsible cells :) #656
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fix: #523
Collapsible cells currently look like this:
sphinx_book_theme
furo
pydata_sphinx_theme
alabaster
sphinx_rtd_theme
sphinx_immaterial
biggest problem here is that they don't handle dark mode. secondary is that they don't adapt to the theme. this means that myst-nb is not really usable out of the box for all the modern themes that have a dark mode! I've been copy/pasting the same dark mode overrides for
myst-nb
sphinx projects for years and i figure i might as well try to help out with the problem.challenge: there isn't a standard way to declare colors as css vars or things we could otherwise anticipate and use when rendering a notebook - we can't reliably ship opinionated css for rendering collapsibles (and it's arguably not our job, but the job of the theme).
proposal: use admonition classes! Very simple change to the html rendering process to add classes and switch a
span
to ap
, and then clearing out the css rules that set colors, add some rules that unset values commonly used withdetails
andadmonition
tags so they take on the appearance of the theme.sphinx_book_theme
furo
pydata_sphinx_theme
alabaster
sphinx_rtd_theme
sphinx_immaterial
so not 100% perfect, but imo an improvement. only breaking change to existing use will be to swap out
span
->p
in css overrides, but this should also give us a more stable selector to target in the future rather than needing to override by being relative to a.cell
element (we could add a more unique class just for the sake of overriding, but didn't want to do too much)edit: a more foolproof version of this would be to not use
details
but directly mimic the structure of admonitions and use javascript to open/close the container. i could also do that if maintainers prefer, i just figured start with this since it was easier and more semantic html5 compliant, but it does miss the styles a bit in some of these themes.