Fix colour palette in docs

[menghif]

Issue This PR Addresses

Fixes #2938

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

This PR fixes the missing colours for the palette in the docs and reorganizes it with tabs for Light and Dark mode.

Steps to test the PR

• Change directory to /src/docs: cd src/docs
• Start the server: pnpm start
• Visit localhost:4631 in browser

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)

[gitpod-io]

[cindyorangis]

Very cool way of displaying the colours here. I didn't think of using a React component

[cindyorangis]

Side note: how come Prettier doesn't complain about the formatting? For example, I can see the indents are off

[menghif]

I don't know