Add ability to default to dark mode when users prefer it

[fzaninotto]

Problems

• When using an app with two themes, it defaults to the light theme even though the user has a system preference for dark theme
• When developers change the theme, if a user has used the theme toggle in the past, they won't get the theme change
• Themes must be serializable to JSON to use the ToggleThemeButton, which forbids themes with functions

Solution

• If the developer specifies an <Admin darkTheme> prop, and a user prefers dark mode, the app defaults to dark mode
• The useTheme hook now saves a theme mode ('light' or 'dark') in the preferences rather than a theme object
• <ToggleThemeButton> no longer needs theme props

The solution is made backwards compatible by keeping the old <ToggleThemeButton>.

Example

// in src/MyAppBar.js
import { AppBar, TitlePortal, ToggleThemeButton } from 'react-admin';

export const MyAppBar = () => (
    <AppBar>
        <TitlePortal />
        <ToggleThemeButton />
    </AppBar>>
);

// in src/App.js
import { Admin, Layout } from 'react-admin';
import { MyAppBar } from './MyAppBar';
import { darkTheme, lightTheme } from './themes';

const MyLayout = (props) => <Layout {...props} appBar={MyAppBar} />;

const App = () => (
    <Admin
        dataProvider={dataProvider}
        layout={MyLayout} 
        theme={lightTheme}
        darkTheme={darkTheme}
    >
        ...
    </Admin>
);

Closes #8670

• Add <Admin darkTheme> prop
• Add <Admin defaultToLighTheme> prop
• Create ThemesContext
• Update <ToggleThemeButton> to use it
• Update the AppBar to display the <ToggleThemeButton> by default when a dark mode is defined
• Use a media query to default to the user preferred theme
• Make it backwards compatible
• Write documentation
• Add tests
• Use the <ToggleThemeButton> in one of our demos (ecommerce)

[fzaninotto]

I moved and rewrote a lot of things in there. Best to read the new version rather than read the diff.

[fzaninotto]

I'm not fond of this syntax (ThemesContextProvider wraps ThemeProvider), but it's a good way to make the whole change backwards compatible.

[djhi]

Add a fixme in v5?

[fzaninotto]

I think the existing FIXMEs introduced in this PR will suffice

[fzaninotto]

This was making TS compilation fail in other tests

[fzaninotto]

Switching to RFR

[djhi]

Looks good!

[djhi]

Add a fixme in v5?

[djhi]

Why no a defaultTheme instead, allowing you to default to the dark theme if you want?

[fzaninotto]

👍 You're right, it's better. Added in the next commit.