Add dark mode & refactor styling

[js0mmer]

Description

• Created darkMode state in App.tsx
• Created ThemeContext in style/theme-context.ts
• Implemented ThemeContext in App.tsx to provide theme and toggleTheme functions to child components
• Change data-theme attribute on body tag from 'dark' to 'light' on theme toggle
  • Used for styling with [data-theme='dark'] css selector
• Refactored css to use variables for most colors
• Created style/theme.scss with variables defining colors for light theme and dark theme
• Added additional overrides for bootstrap and semantic-ui styles when using dark theme
• Added a theme toggle to the expanded user sidebar
• Save and load theme preferences from local storage when not signed in
• Added preferences collection to MongoDB
• Added user preferences endpoint to backend (/api/users/preferences)
• Save and load theme preferences from MongoDB when user is signed in and toggles their theme
  • Fall back to local preferences if user has no theme preference saved to their account
• Use user's system theme preferences if the user has no locally saved preferences

Other changes

• Also cleaned up some styling in AppHeader.scss. There was some unused stuff and there and also some stuff that shouldn't be in there like styles that unintentionally selected every icon and shifted them 2px right. If you compare the arrows for the gradedist dropdown on here to prod, you'll noticed those were one of the affected icons by this.
• Made a few other miscellaneous styling fixes. e.g. The blue box shadow when the search box is focused was cut off on the home page. Fixed that by unhiding overflow for the container (compare with prod to see difference).
• Attempted to remove the white background from searching.png. It has a jagged look to it though. Also moved it to the asset folder with the rest of the images.

Future changes to implement

• Make searching.png (search image on home page) look less jagged (Add new search graphic #376)
• Make dark theme compatible gif for 404 page
• Also maybe make a dark guest icon

Additional information on the implementation can be found on the styling wiki page.

Closes #9.

Screenshots

Steps to verify/test this change:

• Verify changes work as expected on staging instance
• Make sure styling looks right for both dark mode and light mode. I think I got all the modals, dropdowns, etc. without breaking anything for light mode but please make sure I'm not missing anything

Final Checks:

• Verify successful deployment
• Delete branch

(optional)

• Write tests
• Write documentation

[Awesome-E]

Fun little thing that you don't have to do – if you want to make the captcha respect dark mode, you can apply the following style to the Recaptcha's iframe:

#some-identifier {
  filter: invert(1) hue-rotate(180deg);
}

This only changes the I'm not a robot dialog and won't affect the actual image selector

[Awesome-E]

This text/button looks to be a little bit low contrast. I know not all of the buttons follow the "proper contrast ratios" (I don't really care too much for that tbh 🙃), but since this one uses that color for just text it makes it a little bit harder to see than I'd like.

The borders here should have a dark mode equivalent; having light gray instead of a darker variant makes it a little jarring

Current:

Using Dark reader chrome extension:

Also noticed the extra whitespace with Google Recaptcha not following theme, which is annoying. Not sure if you'd want to implement a monkeypatch for that though

---

Course planner looks fine except for the same thing with borders as mentioned above.

---

Reviews and verify reviews look good

[github-actions]

Deployed staging instance to https://staging-323.peterportal.org