<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.