[DashboardLayout] Add theme palette mode switcher

Summary

Currently the DashboardLayout component comes with a default light theme. We should add the possibility for different color schemes and if multiple are defined, we should add a theme switcher.

API proposal:

type AtLeastOne<T> = { [K in keyof T]: Pick<T, K> }[keyof T];

interface AppProviderProps {
  // ...
  themes?: AtLeastOne<{
    light: Theme;
    dark: Theme;
  }>;
  // unstable_adoptPaletteMode?: boolean;
}

themes undefined => provide default light and dark themes + add theme switcher
themes defined, only one provided => use only the provided theme + remove theme switcher
themes defined, both provided => set both themes + add theme switcher

Additional suggestion:

Add unstable_adoptPaletteMode, if it's true, we hide the theme switcher and we adopt the mode from the surrounding theme. This could be useful for the docs to remove the iframe from the demos.

Examples

No response

Motivation

No response

Search keywords: theme switcher

Some benchmarking:

Refine (https://refine.dev/docs/3.xx.xx/api-reference/mui/customization/mui-custom-theme/#dark-mode-toggle) - single theme passed as a prop to ThemeProvider, logic must be manually created by the user with React state to select light or dark theme.
Clerk - could not find a theme switcher utility.
React-admin (https://marmelab.com/react-admin/AppTheme.html) - takes theme and darkTheme as props of the root component.
Vuetify (https://vuetifyjs.com/en/features/theme/#typescript) - function that takes an object with a theme property and nested themes where multiple themes can be added as object properties, and a default theme can be set.

These were the first solutions that came to mind for me for this problem: https://github.com/mui/mui-toolpad/pull/3343#discussion_r1598691276

In conclusion, I think the initially proposed solution with

interface AppProviderProps {
  // ...
  themes?: AtLeastOne<{
    light: Theme;
    dark: Theme;
  }>;
  // unstable_adoptPaletteMode?: boolean;
}

seems fine and intuitive to use, and it's possibly the one that abstracts away the most / the simplest. It's very literal and would work with the theme switcher seamlessly.

themes defined, only one provided => use only the provided theme + remove theme switcher

What about passing just one theme directly? I feel like this would be more natural, but on the other hand it does create 2 quite different ways to define the theming (it's less consistent).

Add unstable_adoptPaletteMode, if it's true, we hide the theme switcher and we adopt the mode from the surrounding theme. This could be useful for the docs to remove the iframe from the demos.

This sounds good, we can try it!

mui / mui-toolpad