chore: clean up theming

[SethFalco]

When I contributed before, and while reviewing the project now, dealing with the CSS has been very painful due to how theming is handled.

The way most projects handle theming, is using CSS variables on :root which can then be used throughout the site. Then overriding those variables either on a media query or a class.

Here are examples from the Exercism and Microsoft websites, respectively:

This offers a few benefits:

1. Cleaner and less CSS. Avoids overriding hell!
2. Semantic class/style names. Rather than having .white which, gets overridden to black in dark mode.
3. Consistent style. We won't accidentally have 5 different shades of a single color across the site.
4. Easier to determine what color/style to use for future components.
5. Easy to develop new themes. Just define a new class selector that overrides the vars.

This should avoid problems like this in future:

• Dark theme not properly applied to files interface #280
• Switch Languages Button not visible in Dark Mode #303

The goal is to leave the site the same (or better), but reduce CSS and make theming easier to maintain.

---

I've made some subtle changes, intentionally:

1. Use the same shade of blue for the navbar, buttons, and top-footer.
2. Make the inactive button (text/file) use white/black text instead of blue. The accent color shouldn't be used for text, imo.
3. Use a darker color for the inactive button, so it's more separable from the background.
4. Not sure why, but the dark theme had padding above the translation textareas before. I removed that to be consistent with the light theme.

Screenshots

Light Mode After (Left) and Before (Right)

Dark Mode After (Left) and Before (Right)

---

PS: I hope to polish the UI and improve accessibility soon, but before that, I'm doing chores to make the project easier to maintain.

[pierotofy]

This is great @SethFalco 👍 thanks for the contribution!