feat: Add Light / Dark mode toggle to the portal

[jcbcapps]

SC-968

Proposed changes

Adds ThemeToggle component for toggling light and dark mode

---

Reviewer notes

The ThemeToggle component is not being displayed anywhere in the portal yet, as we have yet to set up LaunchDarkly to hide it behind a feature flag. To review this, you'll need to view the component in Storybook or add it into the <Header /> component manually. See the instructions below.

Setup

Run yarn storybook in the portal client, navigate to localhost:6006 in your browser, and look at the ThemeToggle component

If you would like to see the component in the portal client, you'll need to manually add the ThemeToggle component into the <Header /> component after line 102. Then make sure to have both the CMS and the portal client running on your local machine. You can do this by

• Running yarn services:up && yarn dev in the CMS repo and
• Running yarn dev in the portal client with this branch checked out

---

Code review steps

As the original developer, I have

• Met the acceptance criteria, or will meet them in subsequent PRs or stories
• Created new stories in Storybook if applicable
  • Checked that all Storybook accessibility checks are passing
• Created/modified automated unit tests in Jest
  • Including jest-axe checks when UI changes
• Created/modified automated E2E tests in Cypress
  • Including cypress-axe checks when UI changes
  • Checked that the E2E test build is not failing
• Performed a11y testing:
  • Checked responsiveness in mobile, tablet, and desktop
  • Checked keyboard navigability
  • Tested with VoiceOver in Safari
  • Checked VO's rotor menu for landmarks, page heading structure and links
  • Used a browser a11y tool to check for issues (WAVE, axe, ANDI or Accessibility addon tab for Storybook)
• Requested a design review for user-facing changes
• For any new migrations/schema changes:
  • Followed guidelines for zero-downtime deploys

As code reviewer(s), I have

• Pulled this branch locally and tested it
• Reviewed this code and left comments
• Checked that all code is adequately covered by tests
  • Checked that the E2E test build is not failing
• Made it clear which comments need to be addressed before this work is merged
• Considered marking this as accepted even if there are small changes needed
• Performed a11y testing:
  • Checked responsiveness in mobile, tablet, and desktop
  • Checked keyboard navigability
  • Tested with VoiceOver in Safari
  • Checked VO's rotor menu for landmarks, page heading structure and links
  • Used a browser a11y tool to check for issues (WAVE, axe, ANDI or Accessibility addon tab for Storybook)

As a designer reviewer, I have

• Checked in the design translated visually
• Checked behavior
• Checked different states (empty, one, some, error)
• Checked for landmarks, page heading structure, and links
• Tried to break the intended flow
• Performed a11y testing:
  • Checked responsiveness in mobile, tablet, and desktop
  • Checked keyboard navigability
  • Tested with VoiceOver in Safari
  • Checked VO's rotor menu for landmarks, page heading structure and links
  • Used a browser a11y tool to check for issues (WAVE, axe, ANDI or Accessibility addon tab for Storybook)

As a test user, I have

• Run through the Test Script:
  • On commercial internet in IE11
  • On commercial internet in Firefox
  • On commercial internet in Chrome
  • On commercial internet in Safari
  • On NIPR in IE11
  • On NIPR in Firefox
  • On NIPR in Chrome
  • On NIPR in Safari
  • On a mobile device in Firefox
  • On a mobile device in Chrome
  • On a mobile device in Safari
• Added any anomalous behavior to this PR

[shortcut-integration]

This pull request has been linked to Shortcut Story #968: Add Light / Dark mode toggle to the portal.

[gidjin]

Now that I understand how it's supposed to work I can mark this approved