react-material-ui-theme is a part of the Material-UI theme to React. Using which you can add a Material-UI theme to your React app instantly without an extra build efforts. It will provide you theme toggle button to change dark and light theme and also can switch color theme. It use locolstorage to remember last theme and color of site
npm install react-material-ui-theme --save
// or
yarn add react-material-ui-theme
You can apply theme to your any react material ui app in 2 easy steps
import AppThemeProvider, {
ThemeColorPalette,
ThemeTogglerButton,
ThemeController,
} from "react-material-ui-theme";
-
Wrap your component with
AppThemeProvider
<AppThemeProvider defaultColorPalette="Green yellow" defaultThemeMode="darkblue" > // your comoponents </AppThemeProvider>```
-
Add theme controller anywhere in your app to change theme and color
// Provide theme toggler button to change dark and light theme <ThemeTogglerButton /> // Provivde color palette to chagne color <ThemeColorPalette /> // Provide the both theme toggler and color palette <ThemeController />
<AppThemeProvider
defaultColorPalette="Green yellow"
defaultThemeMode="darkblue"
>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<ThemeTogglerButton />
<ThemeColorPalette />
<ThemeController />
</AppThemeProvider>
Parameter | Type | Description | Options |
---|---|---|---|
defaultColorPalette | String | Default color palette of your site. You can use color palette provided in options as default color palette for your site | Green yellow, Blue pink, Pink purple, Cyon yellow, Purple orange, Red blue " |
defaultThemeMode | String | Default theme mode of your site. You can use theme mode provided in options as default theme for your site | darkblue, dark, light |
- use
useThemeType
hook to get theme type
import { useThemeType } from "react-material-ui-theme";
const [themeType, setThemeType] = useThemeType();
setThemeType("light");
console.log(themeType); // returns light)
- use
useColorPalette
hook to get color palette
import { useColorPalette } from "react-material-ui-theme";
const [colorPalette, setColorPalette] = useColorPalette();
setColorPalette("Blue pink");
console.log(colorPalette); // returns Blue pink