<ToggleThemeButton>

The <ToggleThemeButton> component lets users switch from light to dark mode, and persists that choice by leveraging the store.

It is enabled by default in the <AppBar> as React-admin provides a built-in dark theme.

Usage

You can add the <ToggleThemeButton> to a custom <AppBar toolbar>:

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

export const MyAppBar = () => (
    <AppBar toolbar={<ToggleThemeButton />} />
);

Then, pass the custom App Bar in a custom <Layout>, and the <Layout> to your <Admin>. The <Admin> must define a darkTheme prop for the button to work:

import { Admin, Layout } from 'react-admin';
import { MyAppBar } from './MyAppBar';

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

const App = () => (
    <Admin
        dataProvider={dataProvider}
        layout={MyLayout} 
        darkTheme={{ palette: { mode: 'dark' } }}
    >
        ...
    </Admin>
);

Removing The Button From The AppBar

The <ToggleThemeButton> appears by default in the <AppBar>. If you want to remove it, you have two solutions:

• you can set the <Admin> darkTheme prop to null:

// in src/App.tsx
const App = () => (
    <Admin darkTheme={null}>
        // ...
    </Admin>
);

• or you can set a custom <AppBar toolbar> prop:

// in src/MyAppBar.tsx
import { AppBar, LocalesMenuButton, RefreshIconButton } from 'react-admin';

export const MyAppBar = () => (
    <AppBar toolbar={
        <>
            <LocalesMenuButton />
            {/* no ToggleThemeButton here */}
            <RefreshIconButton />
        </>
    } />
);

Creating A Dark Theme

For this button to work, you must provide a dark theme to the <Admin> component. React-admin provides a built-in dark theme, but you can override it according to your needs.

The darkTheme should be a JSON object that follows the Material UI theme specification.

You can create such a theme from scratch:

const darkTheme = {
    palette: { mode: 'dark' },
};

Of you can override react-admin’s default dark theme:

import { defaultDarkTheme } from 'react-admin';

const darkTheme = {
    ...defaultDarkTheme,
    palette: {
        ...defaultDarkTheme.palette,
        primary: {
            main: '#90caf9',
        },
    },
};

Tip: React-admin calls Material UI’s createTheme() on the <Admin darkTheme> prop - don’t call it yourself.