Code blocks have unreadable white text on white backgrounds in dark mode

[earlbellinger]

Describe the bug

context
When I switch to dark mode, code becomes unreadable.

expectation
I expect either the background or the text to turn white in code blocks, but not both.

bug
But instead the text and background both turn white in code blocks in dark mode.

Reproduce the bug

Go to https://mesagrid.readthedocs.io/en/latest/quickstart.html and click on dark mode in the top right

List your environment

https://github.com/earlbellinger/mesagrid/blob/main/requirements_dev.txt

[sstroemer]

I encountered the same issue. My current workaround is a custom CSS with the following content:

/*
    Format code related blocks from MyST-NB
        - Standard background color
        - stderr and similar blocks with accent color
        - Stream and text blocks with muted color
*/
div.cell_input.docutils.container {
    background-color: hsl(var(--background)) !important;
}
div.output.stderr > div.highlight, div.output.stdout > div.highlight {
    background-color: hsl(var(--accent)) !important;
}
div.output.stream, div.output.text_plain, div.output.text_html {
    background-color: hsl(var(--muted)) !important;
}

/*
    Format tables (needed to render pd.DataFrames):
        - Standard background color
        - Alternate row background color (odd rows)
        - Text color to foreground color
        - Hover row background color based on destructive color (50% opacity)
*/
div.cell_output tbody {
    background: hsl(var(--background)) !important;
}
div.cell_output tbody tr:nth-child(odd) {
    background: hsl(var(--muted)) !important;
}
div.cell_output table {
    color: hsl(var(--foreground)) !important;
}
div.cell_output tbody tr:hover {
    background: hsl(var(--destructive) / 0.5) !important;
}

This probably misses a few stylings, and is too simplified, but it works for my current use-case (catching code blocks and their basic output, as well as pd.DataFrames with row highlighting).

[sstroemer]

Further information:

• Similar issue: Incorrect "show/hide code cell output" background in dark mode #523
• Another workaround (from the mentioned issue): GlacioHack

[earlbellinger]

This mostly fixed it, thank you!

The only issue that still remains is that some outputs now have black text on black background. See for example the output from tqdm here: https://mesagrid.readthedocs.io/en/latest/plotting.html

[flying-sheep]

This breaks ipywidgets in dark mode:

[agoose77]

Could people here confirm whether they still see this with the latest version of packages? I think @flying-sheep is seeing a different issue related to our output styling.

[flying-sheep]

Ah sorry, makes sense, code blocks are no output. Should I make a new issue for my problem?

[agoose77]

@flying-sheep that would be really useful! I haven't done a pass to see if its been reported before, but it might have been!

[flying-sheep]

OK, done: #618

[bsipocz]

While the original issue seems to be resolved, there are still some outputs that are wrong, as demonstrated in the myst docs; light background with very light text. I'm adding the link, as well as the screenshot to help triaging in the future.

https://myst-nb.readthedocs.io/en/latest/render/format_code_cells.html