Add functionality to dark/light mode toggle button

[seanmturley]

Description

The user will be able to switch between dark and light colour themes (dark is the default).

Implementation

• [x] A data-theme attribute on div.app will be used to switch the colour theme
• [x] Local storage will be used to persist the user's preference

See this CSS Tricks article for an example of the above approach.

[seanmturley]

The lightTheme is now controlled by App state, and can be toggled by the ToggleSwitch in the DropdownMenu

To avoid an extra layer of prop drilling and reduce overall complexity, the NavBar component was removed. Instead, the PageHeadings, SearchBar, and DropdownMenu are now directly rendered inside the MainLayout.

There may be room for further refinement by lifting components all the way up to the App level, but this is somewhat limited by the need for useNavigation inside the MainLayout (useNavigation has to be called within a Router).

[seanmturley]

There may be room for further refinement by lifting components all the way up to the App level...

Upon further investigation, this turns out not to be practical as useLocation and useNavigate are used in PageHeadings and SearchBar respectively, both of which must be called within the context of a Router.

[seanmturley]

Installed useLocalStorage custom React Hook (repo, npm).

It's very easy to use and appears to work right out the box.

The user's theme selection is now persisted in local storage.