Add `System` option to ThemeSwitcher

[aarontcannon]

Summary

Include a configurable option in the ThemeSwitcher to set the color mode to follow the system's/browser's color mode. Currently the ThemeSwitcher just toggles between light mode and dark mode. It would be useful to have the option to also include a system mode.

From investigation I noticed that upon a toolpad app first loading it checks if there is a toolpadMode variable in local storage. If not it sets it to system which makes the app follow the browser's color mode. But the moment you toggle the color mode it overwrites this variable with no way to return to "system".

For workarounds we have options but it would be cool to have this as a built-in feature.

• We could define our own color mode switcher and potentially use MUI's default theme provider rather than Toolpad's AppProvider and maintain a separate local storage variable.
• We could add another button/toggle or some other action that manually clears the local storage for toolpadMode to get it to reset back to system (seems a bit hacky)
• We could presumably try to remove the color mode switcher entirely so that the toolpadMode variable always stays as "system"

Examples

Given this it would seem this is primarily a UX feature request and a fairly low lift. Not sure if it would be better to have a dropdown for selecting color mode or to just be able to toggle to a third state (instead of just light/dark).

Motivation

Improve user UX by providing the ability to set the color mode to follow the system/browser instead of manually toggling light mode/dark mode.

Search keywords: theme, ThemeSwitcher, color mode,