-
Notifications
You must be signed in to change notification settings - Fork 84
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Code blocks have unreadable white text on white backgrounds in dark mode #607
Comments
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 |
Further information:
|
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 |
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. |
Ah sorry, makes sense, code blocks are no output. Should I make a new issue for my problem? |
@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! |
OK, done: #618 |
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 |
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
The text was updated successfully, but these errors were encountered: