Dark mode color updates

[c0deswitch]

Proposing the following edits to improve readability:

Dark Mode

Make background color darker to increase contrast between text and bg
.primaryBg { background: #191919; }

Change nav bar color
.secondaryBg { background: #2E2E2E; }

[shushugah]

I believe this is done with #360. But if you have more/further light/dark theme improvements to suggest, let's discuss them here. In general, I noticed with black on white, it's important to have more bold typefaces to make the light colors easier to read on a dark background.

[c0deswitch]

thanks, it's looking better! i had indicated for the primary Bg to be the darker gray so it got implemented in reverse but it's still better than the light gray it was before.

for best legibility the contrast between the background color and text color should be as high as possible. you'll notice when you switch between light and dark mode on websites or apps like Slack, the text weight typically doesn't change, just the colors do. i do agree that we can make other typographic improvements like adjusting font weights across both - light and dark mode.

[shushugah]

Pending tasks

• Switch grey and grey2 color variables
• Add make a:hover black in light-theme mode
• Make a light-theme related css for mobile nav links (see image below)
• Make event-cards in /events h3 tags instead of h2. See Create /events tab #350 for further event improvements