Fixed#77: Added Dark theme

[tonyvugithub]

Issue This PR Addresses

Fixed #77

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

I made some change to ensure we have the same UI as before with Gatsby and added the dark mode option. Since we have not had the header merged yet, I created a temporary toggle button to test the switch mode feature. The button can be found top right when you first load the page.

Light mode

Dark mode

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[tonyvugithub]

I am currently working on it.

[PedroFonsecaDEV]

LGTM

[humphd]

This works well, but there are some follow-up issues we need to do. At the very least, we need to better integrate this theme switching, and probably serialize the value to localStorage for the user with a hook.

Can you file an issue on this? Approved with that filed.

[tonyvugithub]

@humphd : filed the issue #1641