MUI Theme Pack
Language
🇪🇸 Español🇺🇸 English
MUI Theme Pack It is a package containing a variety of themes designed to be used in your Material UI projects. In addition, you can easily switch the mode between light and dark using the hook provided. Each theme has been carefully created to bring a visually appealing and consistent look to your project. Simplify your project design with this set of preset themes and give your application a professional touch!
Installation
To install the package, simply run:
npm:
npm install mui-theme-pack
yarn:
yarn add mui-theme-pack
Usage
Add Theme
To use the themes in your project, you must first import the ThemeContextProvider:
import { ThemeContextProvider } from 'mui-theme-pack';
Then, select your preferred theme:
import { ThemeContextProvider } from 'mui-theme-pack';
import { FormWithEntries } from './sample';
function App() {
return (
<ThemeContextProvider nameTheme="navy-blue">
<FormWithEntries />
</ThemeContextProvider>
);
}
export default App;
Change mode
Each theme comes with two modes: light and dark. You can change the mode of your application using the hook useColorMode():
import { Stack, TextField, Button } from '@mui/material';
import { useColorMode } from 'mui-theme-pack';
const FormCustom = () => {
const { mode, toggleColorMode } = useColorMode();
return (
<Stack
direction="column"
spacing={2}
sx={{
paddingY: '2rem',
paddingX: '3rem',
bgcolor: 'secondary.main',
}}
>
<TextField label="Your name" />
<Button onClick={toggleColorMode}>Change Theme: {mode}</Button>
</Stack>
);
};
export default FormCustom;
Available Themes
The package currently includes the following themes:
- navy-blue: This is a custom variant with colors ranging from dark blue to white.
- light-orange: This is a custom variant with colors ranging from yellow to orange.
Contribution
Welcome to contribute! If you wish to add a new theme, please follow these steps:
Create a new branch. Add the new theme in src/styles/theme. Update the README.md file with information about the new theme. Make a pull request.
License
This package is licensed under the MIT License.