MyST-nb injects CSS for ipywidgets that ignores dark mode

[flying-sheep]

Describe the bug

context

When adding a output to a ipywidgets widget, e.g. a <table class=table>…</table> to a VBox, the resulting style partially ignores dark mode.

expectation I expected tables and ipywidget UI to be dark-mode aware.

I expect CSS for cell output to never use hardcoded colors, but always CSS variables.

bug But instead light-on-dark elements appear in the cell output

problem This is a problem because it’s ugly and every second line is unreadable.

Reproduce the bug

See https://github.com/flying-sheep/session-info2/blob/da3827c26259211e3a0d2effa9695422436fe562/src/session_info2/_widget.py#L39-L43

Which results in this HTML: https://session-info2.readthedocs.io/en/latest/

Specifically this applies:

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

Please never use hardcoded colors in CSS, only variables

List your environment

• Python 3.12
• myst-nb 1.1.1

[flying-sheep]

Hi @agoose77 do you have any ideas how the maintenance situation here can be improved? I’d like to try my hand at fixing this, but my experience with https://github.com/executablebooks/MyST-NB/pull/597 is suggesting that doing so would need a lot of prodding and patience on my part.

I’d love to contribute if feedback, PR merges, and releases would be halfway quick. Is there a way we can make that happen?

[bsipocz]

I’d love to contribute if feedback, PR merges

I haven't dived into all the open PRs, but will definitely keeping an eye open to all new incoming bugfixes which we hope takes off some bites from the other maintainers' plates. Therefore bugfix releases can become more timely.

So please keep that PR coming.

[flying-sheep]

OK, I was confused, but I think I got it: that CSS should just go I think.

• some themes add a white background for cell outputs (because they don’t bother to style ipywidgets)
• some themes don’t (and either style ipywidgets or not)

but your partial CSS here interferes with both. For which situation did you add it? Themes usually style pandas dataframes in the output.

#693 should improve the situation.