Skip to content
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

Open
earlbellinger opened this issue Jun 13, 2024 · 9 comments
Labels
bug Something isn't working

Comments

@earlbellinger
Copy link

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
Copy link

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
Copy link

Further information:

@earlbellinger
Copy link
Author

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
Copy link
Contributor

This breaks ipywidgets in dark mode:

image image

@agoose77
Copy link
Collaborator

agoose77 commented Aug 5, 2024

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
Copy link
Contributor

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

@agoose77
Copy link
Collaborator

agoose77 commented Aug 5, 2024

@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
Copy link
Contributor

OK, done: #618

@bsipocz
Copy link
Collaborator

bsipocz commented Sep 19, 2024

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

Screenshot 2024-09-19 at 16 27 16

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

5 participants