https://github.com/guoyunhe/mui-palette-mode
Toggle dark or light mode for your MUI apps
https://github.com/guoyunhe/mui-palette-mode
Last synced: 3 months ago
JSON representation
Toggle dark or light mode for your MUI apps
- Host: GitHub
- URL: https://github.com/guoyunhe/mui-palette-mode
- Owner: guoyunhe
- License: mit
- Created: 2023-06-23T10:16:46.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-02T12:05:36.000Z (almost 2 years ago)
- Last Synced: 2025-02-15T15:11:17.611Z (4 months ago)
- Language: TypeScript
- Homepage: https://guoyunhe.github.io/mui-palette-mode/
- Size: 230 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# mui-palette-mode
Toggle dark or light mode for your MUI apps
## Install
```bash
npm i mui-palette-mode
```
## Usage
```jsx
import { AppBar, Toolbar, Typography, createTheme } from '@mui/material';
import { DualThemeProvider, PaletteModeButton } from 'mui-palette-mode';
const lightTheme = createTheme();
const darkTheme = createTheme({ palette: { mode: 'dark' } });
export default function App() {
return (
Click the button on the right 👉
);
}
```
## API
### ``
Provider to support dark/light theme switching.
#### `lightTheme: Theme`
MUI theme for light mode.
#### `darkTheme: Theme`
MUI theme for dark mode.
#### `defaultPaletteMode: 'light' | 'dark' | 'auto'`
Default value: `'auto'`
Default palette mode if user hasn't choose one. Palette mode is saved in localStorage (key: `theme_palette_mode`).
#### `icons: Record<'light' | 'dark' | 'auto', ReactNode>`
Default value:
```jsx
{
auto: ,
light: ,
dark: ,
};
```
Customize palette mode menu text.
#### `messages: Record<'light' | 'dark' | 'auto', ReactNode>`
Default value:
```js
{
auto: 'Auto',
light: 'Light',
dark: 'Dark',
}
```
Customize palette mode menu text.
### ``
The icon button to toggle color modes. Support all MUI `` component props.
### ``
The button to toggle color modes. Support all MUI `` component props.
### ``
The icon button to toggle color modes. Support all MUI `` component props.
### `usePaletteMode()`
The hook to get and set color mode.
```ts
const {
paletteMode,
userPaletteMode,
setUserPaletteMode,
toggleUserPaletteMode,
icon,
icons,
message,
messages,
} = usePaletteMode();
```