donnemartin/system-design-primer

Anki cards unreadable in nightmode; all Anki cards contain colors declared in HTML, should have colors in styles

Trotter-Wiz-Kiwanis opened this issue · 3 comments

Trotter-Wiz-Kiwanis commented

Anki cards in day mode looks ok:
image

…but are unreadable in night mode:
image

The only workaround for all cards is to force white background in night mode:
image

…but this remains a broken night mode.

Looking at individual cards source, we can see that colors are declared directly in them:
image

It would be much better to have styling in one place (styling), then add dedicated .nightMode colors there.

I cannot find flashcards sources in this repository, so I don't know how provide a patch for that.

jasneetsingh6114 commented

I noticed that Anki cards are unreadable in night mode because their colors are declared directly in the HTML. To improve compatibility, it would be better to move the color declarations to CSS styles instead. This approach would allow dynamic styling adjustments for night mode, ensuring better readability.

If this issue is unassigned, I’d be happy to contribute a fix. Let me know your thoughts!

GabrielDougherty commented

I use this style template, and it fixed the issue for me.

.card, .card * {
    font-family: arial;
    font-size: 20px;
    color: var(--text-fg) !important;
}