#1 Add the ability for users to change between light and dark mode.

[WebDevSimplified]

Feature Description

Currently light/dark mode is automatically assigned based on a user's system preferences when the page loads. This behavior should stay, but users should also have the option to toggle between light/dark/system mode from within the UI. This theme should be persisted so when the user comes back to the site it will load whatever theme they selected. If no theme has been selected (or it is the users first time on the site) the user's system preferences should be used which is how the system currently works. This theme toggle should be added into a navbar at the top of the page.

Tasks

• [ ] Add a theme toggle
• [ ] Persist the selected theme between browser sessions
• [ ] Add a navbar

Designs

Dark Mode

Light Mode

Open Dropdown

Mobile View

Mobile View Open Dropdown

[WebDevSimplified]

Team Lead: The current theme code is inside the index.html file.

<script>
  const theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
  document.documentElement.classList.toggle("dark", theme === "dark")
</script>

Also, whoever tackles this should make sure that the theme for the user is applied before the React code loads so the page doesn't load with the wrong theme at first.

Lastly, the designs for this section include links to many pages that do not exist yet. Just ignore those links for now.