Build re-usable themes for mui
npm install material-themerLightweight theme builder for the material-ui V5 library.
- No dependencies 📦
- Tiny (1kb) 🦐
- Builder pattern API 🏗️
- Use dynamic variables in your theme config
- Opinionated structure for theming
```
npm i material-themer
Checkout the examples for in-depth example.
`ts
import { ThemeBuilder } from "material-themer";
import { ThemeProvider } from "@mui/material";
// Values passed to the themer will be shared across all themes
const themer = new ThemeBuilder({
typography: {
fontFamily: Poppins,0px 2px 6px #0000000A
},
shadows: [, 0px 2px 6px #0000000A],
});
// Create your light palette
themer.setLightColors({
primary: {
main: #438AFF,#FFFFFF
contrastText: ,
},
grey: {
100: #F5F6FA,
},
secondary: {
main: #70F649,#000000
contrastText: ,#F0F0F7
},
background: {
default: ,#FFFFFF
paper: ,
},
});
// Create your dark palette
themer.setDarkColors({
primary: {
main: #83b9ff,#a8ff7d
},
secondary: {
main: ,#1e1e2f
},
background: {
default: ,#27293d
paper: ,
},
});
// Build your theme
const { light, dark } = themer.build();
// In your app somewhere
`
You can override a component by using the themed function.
`tsMuiButton
// Use a simple object if you don't need to reference the current theme
export const SimpleButton = themed(, {contained
defaultProps: {
variant: ,small
size: ,
},
});
// Or you can pass a function that will receive the theme config
export const DynamicallyThemedButton = themed(MuiButton, (theme) => ({`
defaultProps: {
variant: theme.palette.mode === "dark" ? "contained" : "text",
},
styleOverrides: {
root: {
color: theme.palette.primary.main,
fontFamily: "Poppins",
},
},
}));
Then simply pass the themed functions to the setComponents function
`ts
const themer = new ThemeBuilder();
// Setup light and dark themes as above...
// Pass all your component overrides as spread arguments to this function
themer.setComponents(SimpleButton);
// We recommend exporting each themed function as an element in an array
// For example
// import ComponentOverrides from './components'
// themer.setComponents(...ComponentOverrides)
// See the examples for more info
// Then build
const { light, dark } = themer.build();
`
##### Share common values across all themes easily
With vanilla mui combining a shared base theme with your main themes is a real pain, you have to deep merge nested properties and it can be very error prone.
With material-themer this is all handled for you.
##### Re-use your theme config variables when overriding components
One of the limitations with the default way of creating a theme in mui is that you cannot easily reference colors and variables set on your current theme.
For example.
If you want to create a themed button that has a border-color of the primary palette color, how would you do this?
#### The default way
You would probably mantain a large colors file with all your theme colors defined.
`ts`
export const PRIMARY = '#edf123'
... All your other colors
Then you would import these colors in your theme
`ts`
createTheme({
palette: {
primary: {
main: PRIMARY_MAIN,
},
},
});
And again in your component overrides
`ts`
{
components: {
MuiButton: {
styleOverrides: {
borderColor: PRIMARY_MAIN;
}
}
}
}
Why not just use the default palette as your source of truth?
#### With material-themer
You can mantain a single source of truth for your theme config, including all palettes and component overrides.
`ts`
{
palette: {
primary: {
main: "#eaeaea";
}
}
}
You can then reference this value in your component overrides with the themed function util
`ts
import { themed } from "material-themer";
export const MuiButton = themed(MuiButton, (theme) => ({``
styleOverrides: {
root: {
borderColor: theme.palette.primary.main,
},
},
}));