Make all your Material UI components consistent with the Borealis design language
yarn add @borealisgroup/mui-theme @material-ui/core
import { createMuiTheme, ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
import borealisMaterialUiTheme from '@borealisgroup/mui-theme';
const muiTheme = createMuiTheme(borealisMaterialUiTheme);
export const App = () => (
<MuiThemeProvider theme={muiTheme}>
{/* all your Material UI components here will be Borealis themed */}
</MuiThemeProvider>
);
If you want to update the theme for all our projects, follow the next steps:
- Go to the Material UI Theme Designer
- Make changes to the theming object
- Verify in the preview panel that your changes look good
- Hit the save icon
- Trigger a new build on BitBucket pipelines
- Once the build is done, this package is automatically updated with your theme adjustments
Making changes for your own project
You can easily make changes to the theme that will only effect your own project
import { createMuiTheme, ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
import borealisMaterialUiTheme from '@borealisgroup/mui-theme';
import {
ThemeOptions,
} from "@material-ui/core";
const customizedBorealisTheme: ThemeOptions = {
...borealisMaterialUiTheme,
palette: {
...borealisMaterialUiTheme.palette,
primary: {
...borealisMaterialUiTheme.palette?.primary,
main: 'red'
}
}
}
const muiTheme = createMuiTheme(customizedBorealisTheme);
export const App = () => (
<MuiThemeProvider theme={muiTheme}>
{/* all your Material UI components here will be Borealis themed and also include your project customizations */}
</MuiThemeProvider>
);