Skip to content

MyST-nb injects CSS for ipywidgets that ignores dark mode #618

@flying-sheep

Description

@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.

image image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions