Implement dark and light theme toggling with React context

[tien-han]

Description

This PR implements "theme" toggling, better known as light/dark mode toggling. Dark mode has become a standard option for many websites and products, this change aims to bring this feature to OED.

Fixes #876

To Do's that have to be done before this PR is complete and ready to merge

Note: Fixing one item under a category will likely fix the rest of the items in that category (for "fixes").

Changes that need to be made

• OED logo has to be updated for dark mode (create/find an inverse of the logo)
• Help button for theme drop down has to be added
• Theme toggling documentation has to be created and added to the OED website for reference
• Add in theme name translations for other languages
• Stretch goal: implement a way to pick up on the user's preferred them based on their system settings

Single Drop Down Fixes

• More Options>Rate drop down styling

Multi-select Drop Down Fixes

• Groups selection drop down styling
• Meters selection drop down styling
• Units selection drop down styling
• Pages>Upload readings>Create a Meter> Time Zone styling
• Pages>Groups>Create a Group> Child Meters styling
• Pages>Groups>Create a Group> Child Groups styling
• Pages>Groups>Edit Group> Child Meters styling
• Pages>Groups>Edit Group> Child Groups styling
• Pages>Meters>Create a Meter> Time Zone styling
• Pages>Meters>Details/Edit Meter> Time Zone styling
• Pages>Admin Setting> Default Time Zone styling

Calendar Fixes

• More Options>Date Range>calendar view styling

Input Field Fixes

• More Options>Normalize by Area>Area Unit input styling

Card Fixes

• Pages>Conversions> cards styling
• Pages>Groups> cards styling
• Pages>Meters> cards styling
• Pages>Units> cards styling
• Pages>Users> cards styling
  
  
  Note: To select the dark mode title coloring, I used this online tool to find a darker shade: https://colorkit.co/color/add8e6/

Type of change

• Note merging this changes the database configuration.
• This change requires a documentation update

Checklist

• I have followed the OED pull request ideas
• I have removed text in ( ) from the issue request
• You acknowledge that every person contributing to this work has signed the OED Contributing License Agreement and each author is listed in the Description section.

Limitations

(Describe any issues that remain or work that should still be done.)

[tien-han]

@huss I'm having a lot of fun with figuring out this issue (learning how to use React's context was really difficult but I get it now!), but I have two questions for you. No rush on answering, they're not immediately important.

1. Do you have other OED logo's available? I'm looking for an inverse logo (black to white, white to black). With the current logo in dark mode, the edges of the logo look very pixelated. No worries if not, I can look into options.

2. I would like to add in a Help Page to the OED website to explain how the theme toggling works (like how there's one for Languages). How would I go about this?

Not a question, but I think the OED website's V1.0.0 documentation is missing a page for Language Settings.
When clicking on the Help button for the Language Settings, I get routed to https://openenergydashboard.org/v1.0.0/language.html. However, this is a dead link as the language documentation appears to be located at https://openenergydashboard.org/helpV0_8_0/language/.

[huss]

@tien-han Thanks for working on this and asking these questions.

1. Do you have other OED logo's available? I'm looking for an inverse logo (black to white, white to black). With the current logo in dark mode, the edges of the logo look very pixelated. No worries if not, I can look into options.

I don't have it now but I think the art person who has helped before would be willing to do this. I'll start the process and let you know when it is done.

2. I would like to add in a Help Page to the OED website to explain how the theme toggling works (like how there's one for Languages). How would I go about this?

I have it all set up on my machine to capture the images correctly. Generally, the developer just notes there is a documentation change and I/the project makes it happen. In this case you simply put in a new link address (maybe darkmode/ in the help popup and then the page is created there. If you personally want to do it then we can discuss the details. It isn't too hard but there are some details. Also note we often delay updating the help until later because there may be other changes in how a page looks that is outside the work done.

Not a question, but I think the OED website's V1.0.0 documentation is missing a page for Language Settings. When clicking on the Help button for the Language Settings, I get routed to https://openenergydashboard.org/v1.0.0/language.html. However, this is a dead link as the language documentation appears to be located at https://openenergydashboard.org/helpV0_8_0/language/.

Good catch. I found this last week when working with someone. PR #1383 is supposed to fix the few links that were off. The page is there but the location moved for all pages with the website update. It is hoped to be reviewed relatively soon (someone has agreed to review it) and then it should be added into OED.

[tien-han]

Thank you @huss!

Re: Help Page
I'll tackle this once I wrap up more of the UI changes, thank you for explaining the process to me so that I understand.

(Heads up that I'll be updating the checkboxes in the PR description to show progress.)

[tien-han]

Single drop down menu fixed: