Add more css to myst-nb code cells

[adamgayoso]

Context

The executable books project has nice css for code cells, but this doesn't carry over when using myst-nb in other themes like Furo.

Proposal

Add a bit more css to make myst-nb look consistent across themes.

Tasks and updates

No response

[chrisjsewell]

I would be reticent to start trying to accommodate for every theme here, of course people can already overload the CSS with their own via sphinx. I did already notice though that it wasn't great with furo, particularly for integration with the light/dark switching, which would be good to integrate. At least changing the colors to CSS variables.

I've already worked with pradyunsg to better integrate things like https://github.com/pradyunsg/furo/blob/main/src/furo/assets/styles/extensions/_sphinx-design.sass into furo, so something like this middle-ground would certainly be of interest

[chrisjsewell]

Nore, from 0.17.0, the background colors are now specified as CSS variable:

:root {
  --mystnb-source-bg-color: #f7f7f7;
  --mystnb-stdout-bg-color: #fcfcfc;
  --mystnb-stderr-bg-color: #fdd;
  --mystnb-traceback-bg-color: #fcfcfc;
  --mystnb-source-border-color: #ccc;
  --mystnb-source-margin-color: green;
  --mystnb-stdout-border-color: #f7f7f7;
  --mystnb-stderr-border-color: #f7f7f7;
  --mystnb-traceback-border-color: #ffd6d6;
  --mystnb-hide-prompt-opacity: 70%;
  --mystnb-source-border-radius: .4em;
  --mystnb-source-border-width: 1px;
}

making it easier to do e.g.

body[data-theme="dark"] {
  --mystnb-source-bg-color: #202020;
  --mystnb-stdout-bg-color: #202020;
  --mystnb-stderr-bg-color: #ee0000;
  --mystnb-traceback-bg-color: #202020;
}

[eltos]

It would be really nice to have these darkmode definitions mentioned above included, currently it's hard to read the text with e.g. pydata-sphinx-theme with darkmode: