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

Incorrect "show/hide code cell output" background in dark mode #523

Open
bbye98 opened this issue Jun 12, 2023 · 2 comments
Open

Incorrect "show/hide code cell output" background in dark mode #523

bbye98 opened this issue Jun 12, 2023 · 2 comments
Labels
bug Something isn't working

Comments

@bbye98
Copy link

bbye98 commented Jun 12, 2023

Describe the bug

context
When dark mode is toggled, the "show/hide code cell output" button's text is updated to a light color, but the background stays light, making the text nearly impossible to see.

expectation
The "show/hide code cell output" text should turn light while the background should turn dark.

bug
But instead the background stays the same color.

problem
The "show/hide code cell output" text is now impossible to see on top of the light background. Furthermore, the light background of the "show/hide code cell output" strip severely contrasts against the overall dark background.

Reproduce the bug

I noticed this issue when building the documentation for my personal project. Here's a rendered version clearly showing the issue: https://bbye98.github.io/minim/guides/qobuz.html

List your environment

❯ conda -V
conda 23.5.0

❯ python3 -V
Python 3.9.16

❯ conda list myst-nb
# packages in environment at /home/bye/miniconda3/envs/minim:
#
# Name                    Version                   Build  Channel
myst-nb                   0.17.2             pyhd8ed1ab_0    conda-forge
@bbye98 bbye98 added the bug Something isn't working label Jun 12, 2023
@welcome
Copy link

welcome bot commented Jun 12, 2023

Thanks for opening your first issue here! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! 🎉

@wragge
Copy link

wragge commented Mar 28, 2024

Here's a possible workaround. Not sure if it's the best solution, but it seems to work in JupyterBook...

Include the following in a custom CSS file:

div.cell details.hide > summary {
    background-color: var(--pst-color-surface);
}

I also found that the border between the toggle button and the code source was looking odd, so I added this as well:

div.cell details[open].above-input div.cell_input {
    border-top: None;
}

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

2 participants