Add ToggleThemeButton

docs/Reference.md

@@ -133,7 +133,7 @@ title: "Reference"
 * [`<TextField>`](./TextField.md)
 * [`<TextInput>`](./TextInput.md)
 * `<Title>`
-* [`<ToggleThemeButton>`](https://marmelab.com/ra-enterprise/modules/ra-preferences#togglethemebutton-store-the-theme-in-the-preferences)<img class="icon" src="./img/premium.svg" />
+* [`<ToggleThemeButton>`](./ToggleThemeButton.md)
 * [`<TourProvider>`](https://marmelab.com/ra-enterprise/modules/ra-tour)<img class="icon" src="./img/premium.svg" />
 * [`<TranslatableFields>`](./TranslatableFields.md)
 * [`<Tree>`](https://marmelab.com/ra-enterprise/modules/ra-tree#tree-component)<img class="icon" src="./img/premium.svg" />

docs/Theming.md

@@ -775,32 +775,36 @@ To make it easier to customize, we export some components and hooks used by the
 
 ## Adding Dark Mode Support
 
-The `<ToggleThemeButton>` component is part of `ra-preferences`, an [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" src="./img/premium.svg" /> module. It lets users switch from light to dark mode, and persists that choice in local storage so that users only have to do it once.
+The `<ToggleThemeButton>` component lets users switch from light to dark mode, and persists that choice by leveraging the [store](./Store.md).
 
-![Dark Mode support](https://marmelab.com/ra-enterprise/modules/assets/ra-preferences-overview.gif)
+![Dark Mode support](./img/ToggleThemeButton.gif)
 
 You can add the `<ToggleThemeButton>` to a custom App Bar:
 
 ```jsx
 import * as React from 'react';
-import { Layout, AppBar } from 'react-admin';
-import { Box, Typography } from '@mui/material';
-import { ToggleThemeButton } from '@react-admin/ra-preferences';
+import { defaultTheme, Layout, AppBar, ToggleThemeButton } from 'react-admin';
+import { createTheme, Box, Typography } from '@mui/material';
+
+const darkTheme = createTheme({
+    palette: { mode: 'dark' },
+});
 
 const MyAppBar = props => (
     <AppBar {...props}>
         <Box flex="1">
             <Typography variant="h6" id="react-admin-title"></Typography>
         </Box>
-        <ToggleThemeButton />
+        <ToggleThemeButton
+            lightTheme={defaultTheme}
+            darkTheme={darkTheme}
+        />
     </AppBar>
 );
 
 const MyLayout = props => <Layout {...props} appBar={MyAppBar} />;
 ```
 
-Check [the `ra-preferences` documentation](https://marmelab.com/ra-enterprise/modules/ra-preferences#togglethemebutton-store-the-theme-in-the-preferences) for more details.
-
 ## Using a Custom Menu
 
 By default, React-admin uses the list of `<Resource>` components passed as children of `<Admin>` to build a menu to each resource with a `list` component. If you want to reorder, add or remove menu items, for instance to link to non-resources pages, you have to provide a custom `<Menu>` component to your `Layout`.

docs/ToggleThemeButton.md

@@ -0,0 +1,64 @@
+---
+layout: default
+title: "ToggleThemeButton"
+---
+
+# `<ToggleThemeButton>`
+
+The `<ToggleThemeButton>` component lets users switch from light to dark mode, and persists that choice by leveraging the [store](./Store.md).
+
+![Dark Mode support](./img/ToggleThemeButton.gif)
+
+## Usage
+
+You can add the `<ToggleThemeButton>` to a custom App Bar:
+
+```tsx
+import React from 'react';
+import {
+    Admin,
+    Resource,
+    ToggleThemeButton,
+    List,
+    SimpleList,
+    Layout,
+    AppBar,
+} from 'react-admin';
+import { createTheme, Box, Typography } from '@mui/material';
+
+const darkTheme = createTheme({
+    palette: { mode: 'dark' },
+});
+
+const MyAppBar = (props) => (
+    <AppBar {...props}>
+        <Box flex="1">
+            <Typography variant="h6" id="react-admin-title"></Typography>
+        </Box>
+        <ToggleThemeButton
+            lightTheme={defaultTheme}
+            darkTheme={darkTheme}
+        />
+    </AppBar>
+);
+
+const MyLayout = (props) => (
+    <Layout {...props} appBar={MyAppBar} />
+);
+
+const App = () => (
+    <Admin
+        dataProvider={dataProvider}
+        layout={MyLayout}
+    >
+        <Resource name="posts" list={PostList} />
+    </Admin>
+);
+```
+
+## API
+
+* [`ToggleThemeButton`]
+
+[`ToggleThemeButton`]: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/button/ToggleThemeButton.tsx
+

packages/ra-ui-materialui/src/button/ToggleThemeButton.stories.tsx

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { Admin } from 'react-admin';
+import { Resource } from 'ra-core';
+import fakeRestDataProvider from 'ra-data-fakerest';
+import { createMemoryHistory } from 'history';
+import { Box, Typography } from '@mui/material';
+
+import { List, Datagrid } from '../list';
+import { TextField } from '../field';
+import { AppBar, Layout } from '../layout';
+import { ToggleThemeButton } from './ToggleThemeButton';
+import { defaultTheme } from '..';
+
+export default { title: 'ra-ui-materialui/button/ToggleThemeButton' };
+
+const dataProvider = fakeRestDataProvider({
+    books: [
+        {
+            id: 1,
+            title: 'War and Peace',
+            author: 'Leo Tolstoy',
+            year: 1869,
+        },
+        {
+            id: 2,
+            title: 'Pride and Predjudice',
+            author: 'Jane Austen',
+            year: 1813,
+        },
+        {
+            id: 3,
+            title: 'The Picture of Dorian Gray',
+            author: 'Oscar Wilde',
+            year: 1890,
+        },
+        {
+            id: 4,
+            title: 'Le Petit Prince',
+            author: 'Antoine de Saint-Exupéry',
+            year: 1943,
+        },
+        {
+            id: 5,
+            title: "Alice's Adventures in Wonderland",
+            author: 'Lewis Carroll',
+            year: 1865,
+        },
+        {
+            id: 6,
+            title: 'Madame Bovary',
+            author: 'Gustave Flaubert',
+            year: 1856,
+        },
+        {
+            id: 7,
+            title: 'The Lord of the Rings',
+            author: 'J. R. R. Tolkien',
+            year: 1954,
+        },
+        {
+            id: 8,
+            title: "Harry Potter and the Philosopher's Stone",
+            author: 'J. K. Rowling',
+            year: 1997,
+        },
+        {
+            id: 9,
+            title: 'The Alchemist',
+            author: 'Paulo Coelho',
+            year: 1988,
+        },
+        {
+            id: 10,
+            title: 'A Catcher in the Rye',
+            author: 'J. D. Salinger',
+            year: 1951,
+        },
+        {
+            id: 11,
+            title: 'Ulysses',
+            author: 'James Joyce',
+            year: 1922,
+        },
+    ],
+    authors: [],
+});
+
+const history = createMemoryHistory({ initialEntries: ['/books'] });
+
+const BookList = () => {
+    return (
+        <List>
+            <Datagrid>
+                <TextField source="id" />
+                <TextField source="title" />
+                <TextField source="author" />
+                <TextField source="year" />
+            </Datagrid>
+        </List>
+    );
+};
+
+const MyAppBar = props => (
+    <AppBar {...props}>
+        <Box flex="1">
+            <Typography variant="h6" id="react-admin-title"></Typography>
+        </Box>
+        <ToggleThemeButton
+            lightTheme={defaultTheme}
+            darkTheme={{
+                palette: { mode: 'dark' },
+            }}
+        />
+    </AppBar>
+);
+const MyLayout = props => <Layout {...props} appBar={MyAppBar} />;
+
+export const Basic = () => (
+    <Admin dataProvider={dataProvider} history={history} layout={MyLayout}>
+        <Resource name="books" list={BookList} />
+    </Admin>
+);

packages/ra-ui-materialui/src/button/ToggleThemeButton.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Tooltip, IconButton } from '@mui/material';
+import Brightness4Icon from '@mui/icons-material/Brightness4';
+import Brightness7Icon from '@mui/icons-material/Brightness7';
+import { useTranslate } from 'ra-core';
+import { useTheme } from '../layout';
+import { RaThemeOptions } from '..';
+
+/**
+ * Button toggling the theme (light or dark).
+ *
+ * @example
+ *
+ *     const MyAppBar = props => (
+ *         <AppBar {...props}>
+ *             <Box flex="1">
+ *                 <Typography variant="h6" id="react-admin-title"></Typography>
+ *             </Box>
+ *             <ToggleThemeButton />
+ *         </AppBar>
+ *     );
+ *
+ *     const MyLayout = props => <Layout {...props} appBar={MyAppBar} />;
+ */
+export const ToggleThemeButton = (props: ToggleThemeButtonProps) => {
+    const translate = useTranslate();
+    const { darkTheme, lightTheme } = props;
+    const [theme, setTheme] = useTheme(lightTheme);
+
+    const handleTogglePaletteType = (): void => {
+        setTheme(theme?.palette.mode === 'dark' ? lightTheme : darkTheme);
+    };
+    const toggleThemeTitle = translate('ra-preferences.action.toggle_theme', {
+        _: 'Toggle Theme',
+    });
+
+    return (
+        <Tooltip title={toggleThemeTitle} enterDelay={300}>
+            <IconButton
+                color="inherit"
+                onClick={handleTogglePaletteType}
+                aria-label={toggleThemeTitle}
+            >
+                {theme?.palette.mode === 'dark' ? (
+                    <Brightness7Icon />
+                ) : (
+                    <Brightness4Icon />
+                )}
+            </IconButton>
+        </Tooltip>
+    );
+};
+
+export interface ToggleThemeButtonProps {
+    darkTheme?: RaThemeOptions;
+    lightTheme?: RaThemeOptions;
+}