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

[bbye98]

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

[welcome[bot]]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! :hugs:
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! :tada:

[wragge]

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;
}