Better colour schemes

[linear]

There are a few issues with the way we currently handle colour schemes:

1. There's no way to use the system colour scheme after you have selected either light or dark mode.
   We have the inferDarkMode prop, which infers the system colour scheme, but only until you choose light or dark mode. After that you are stuck to manually selection. There's no way of going back to system theme.
2. It doesn't really work as expected
   It does not update when the system colour scheme updates (it's not reactive). In fact it can get quite confusing since changes to other user preferences can trigger the change. See how we only pick up the change after the reduce motion change.

CleanShot.2024-05-06.at.17.10.41.mp4

3. It's also a bit confusing that you need to understand two pieces of state to understand what colour scheme will be used: isDarkModefrom user's preferences and inferDarkMode from the Editor props.

What if replaced isDarkMode property on TLUserPreferences with colorScheme which would allow (at least) the following properties: dark, light, system.

We can also use change event listener on the prefer-color-scheme media query to listen for changes.

Here's PR that explores the suggestion.

[linear]

TLD-2498 Better colour schemes