fix: unreadable text in night mode

[FarisKarim]

Checklist:

• I have read and followed the contribution guidelines.
• I have read and followed the how to open a pull request guide.
• My pull request targets the main branch of freeCodeCamp.
• I have tested these changes either locally on my machine, or GitPod.

Closes #51785

New look (--tertiary-background):

[ghost]

👀 Review this PR in a CodeSee Review Map

View the CodeSee Map of this change

Legend

[naomi-lgbt]

Thanks for your interest in contributing.

The linked issue has not been triaged or opened for contribution yet.

[Sboonny]

@FarisKarim, the issue has been triaged, if you need help head to our discord.

---

Can you sync this branch with main, a commit that fix the failing test are in place there.

[lasjorg]

We still want the striped style right? Not sure if we want it to be the default or what?

client/src/components/layouts/global.css

.challenge-instructions table tr:nth-of-type(odd) {
  color: var(--secondary-color);
  background-color: var(--tertiary-background);
}

[FarisKarim]

^^^ Was also wondering that, are the above styles fine or did we want different shades depending on light and night mode. Think someone mentioned background-quaternary for night mode and background-tertiary for light?

[naomi-lgbt]

We could try --tertiary-background for both. It needs to meet WCAG contrast first and foremost, and look good in the process. 😁

[lasjorg]

The color contrast looks good as far as I can tell (Axe DevTools also do not complain).

[WilliamSpanfelner]

Just applied this rule locally. It also fixes a similar table issue at: Cash Register project. This stands to reason as the amendment is to global.css which intuitively, should apply to all tables sharing this styling. Nice work.

[Sboonny]

✨ 🎉 AWESOME! 🎉 ✨

Hi @FarisKarim, thanks for this pull request and for contributing to the code-base for the first time. We are looking forward to more contributions from you in the future.

Cheers & happy contributing!

[lasjorg]

LGTM