Open WebDevSimplified opened 1 year ago
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.
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
Designs
Dark Mode
Light Mode
Open Dropdown
Mobile View
Mobile View Open Dropdown