363 enable light/dark mode with a preference for user system settings

[tylers-username]

How to test locally

Start the demo app locally

1. (optional) Start the python backend server using npm run start:backend
2. Start the frontend: REACT_APP_ENABLE_DESIGN_DEBUG=true npm run start:frontend
   • The ENABLE_DESIGN_DEBUG variable enables you to emulate each step of the demo app

Test this MR

This MR adds light/dark mode functionality to the demo app to support developers who may have a preference or struggle to read in one mode or the others. By default, the mode will default to the system preference provided by the operating system of the user.

Once the user overrides with their preference, it is stored in a local storage key named theme.

Testing system mode

1. Open the demo app
2. It should match your operating system preference.
3. Change your operating system preference, the app should update to match (sometimes a page refresh is needed).

Testing preferred setting

1. Select "light" or "dark" mode.
2. Refresh the page
3. The selection should persist despite your OS preference.

[github-actions]

Hello, and thank you for contributing to the Upsun demo project!

Setting up tests

Until all tests pass, a pull request will not be merged.

Build tests for combinations of Python and Node.js will happen automatically, and must pass in order to merge.
Another test will actually runthrough all steps of the demo on a new project, but requires a repository admin to add the runthrough label to the pull request.

Failing tests

If your PR is failing, see the Running tests section of the README for troubleshooting details.

Reviewing these changes locally:

1. Clone this repo

   git clone -b 363-enable-lightmode-dark-mode-with-a-preference-for-user-system-settings [email protected]:platformsh/demo-project.git demo-test-363-enable-lightmode-dark-mode-with-a-preference-for-user-system-settings && cd demo-test-363-enable-lightmode-dark-mode-with-a-preference-for-user-system-settings

2. Create a project on Upsun:

   upsun project:create --title "Demo Project test (pr-364/merge)" --default-branch 363-enable-lightmode-dark-mode-with-a-preference-for-user-system-settings

   This command will set the local repository remote automatically, but you will need to specify the organization and region.

3. Push to Upsun:

   upsun push

[tylers-username]

Closing in favor of #365 to support demo-runthrough check being able to pass with a shorter default branch name