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: #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