"Next" button not visible under flashcards in Dark Mode

[0AhmadKhan]

I was doing the preparations and noticed that in the Quiz section for the "flashcard" there is a Next button to click that is invisible in dark-mode, Quiz Link

On further investigation it seems that the 'next' class:

<div class="next" id="oazbfMMjgvHs-next" onclick="window.checkFlip('oazbfMMjgvHs')">Next &gt;</div>

has the following the css style-tab:

.next {
    color: var(--rich-black-fogra-39);
}

which has a #090c08ff hex defined in the corresponding css ':root' selector.
A quick solution, by changing it to a #198754 hex it works "well-enough" in both dark and light mode

A better solution might be to redefine it as following:

:next {
	color: var(--pst-color-text-muted);
}

where --pst-color-text-muted is already defined for both dark and light data-themes and is being used in the Next and Previous buttons at the end of the page.

Thank You.

[hmgaudecker]

Thanks for this great report!!! Unfortunately, that setting seems to be buried quite deep inside the jupytercards package. I hoped that changing it in our own css would have some effect, but that does not seem to be the case.

The only idea I would have to fix it would be to fork jupytercards and fix it for our purposes. Right now, I don't have the bandwidth for that. This said, I have no idea of CSS and there may well be a better solution.

[0AhmadKhan]

Thank you for the feedback. I looked again and you are absolutely right the problem is being imported with the jupytercards package. There seem to me two solutions that should be not too complicated to implement:

1. The solution that almost surely works:

The following class appears to set the background for the Quiz:

<div class="output text_html" </div>

and it has the following css style rule:

which is defined in custom.css line 42.
Changing there hsl(0, 0%, 7%) to hsl(216, 20%, 10%) to be exactly the same color as the rest of the body, or to hsl(30, 10%, 25%) to still have some contrast with the background.

2. Changing the color of the "Next" button, which might work:

adding the following to custom.css;

.next {
    color: var(--pst-color-text-base) !important;
}

I believe the last commit trying this did not work because it lacked the !important flag, and since styles.css is loading after custom.css, it takes precedence due to the cascade.
To my understanding to avoid a later rule overriding earlier ones we can either use the !important flag or increase specificity.

Thank You.

[hmgaudecker]

Suggestion 2 worked -- many thanks!!!