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>
);