<ToggleThemeButton>
The <ToggleThemeButton>
component lets users switch from light to dark mode, and persists that choice by leveraging the store.
Usage
You can add the <ToggleThemeButton>
to a custom App Bar:
import React from 'react';
import { ToggleThemeButton, AppBar, defaultTheme } from 'react-admin';
import { Typography } from '@mui/material';
const darkTheme = {
palette: { mode: 'dark' },
};
export const MyAppBar = (props) => (
<AppBar {...props}>-
<Typography flex="1" variant="h6" id="react-admin-title"></Typography>
<ToggleThemeButton
lightTheme={defaultTheme}
darkTheme={darkTheme}
/>
</AppBar>
);
Then, pass the custom App Bar in a custom <Layout>
, and the <Layout>
to your <Admin>
:
import { Admin, Layout } from 'react-admin';
import { MyAppBar } from './MyAppBar';
const MyLayout = (props) => <Layout {...props} appBar={MyAppBar} />;
const App = () => (
<Admin dataProvider={dataProvider} layout={MyLayout}>
...
</Admin>
);
darkTheme
Required: A theme object to use when the user chooses the dark mode. It must be serializable to JSON.
const darkTheme = {
palette: { mode: 'dark' },
};
<ToggleThemeButton darkTheme={darkTheme} />
Tip: React-admin calls MUI’s createTheme()
on this object.
lightTheme
A theme object to use when the user chooses the light mode. It must be serializable to JSON.
const darkTheme = {
palette: { mode: 'dark' },
};
const lightTheme = {
palette: {
type: 'light',
primary: {
main: '#3f51b5',
},
secondary: {
main: '#f50057',
},
},
};
<ToggleThemeButton lightTheme={lightTheme} darkTheme={darkTheme} />
React-admin uses the <Admin theme>
prop as default theme.
Tip: React-admin calls MUI’s createTheme()
on this object.