Consistent dark and light theme throughout app

[joriordan332]

Description

Code now allows for consistency with the users dark/light theme preference so that when they log in and go to the home page and if they have selected dark for example the theme will stay dark and vice versa.

Related Issue

Closes #43

Acceptance Criteria

• Lift the state to the App and add the toggle button on the Login view.
• Fix the back ground colour to be the app's background colour.

Type of Changes

Enhancement

Updates

Before

After

Light


Dark

Testing Steps / QA Criteria

• Do a git pull and then git checkout jo-dark-light-login
• Open the login page by running npm start
• Once there test out the dark/light mode consistency by logging in and out to see if the theme stays the same when navigating back and forth between each page

[github-actions]

Visit the preview URL for this PR (updated for commit 71e6303):

https://tcl-79-smart-shopping-list--pr52-jo-dark-light-login-e8ro5t2v.web.app

_{(expires Sun, 20 Oct 2024 12:20:01 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: d91d9ddbda780208241c52942f544acf8e81407a}

[marshjaja]

Great job!

[Hudamabkhoot]

Well done @joriordan332 👏 i think saving the mode choice in local storage in the context would be great here since now it wont save if the page is reloaded.