README
Brightlayer UI themes for React applications
This package provides theming support for Eaton applications using the Brightlayer UI design system. It includes resources for developers using React w/ Material UI version 4+ (prior versions of this package will work with Material UI version 3 - check the Changelog for details). This package comes with two theme options: a Blue theme (standard) and a Dark theme.
For other frameworks, check out our related packages:
Installation
Install with npm
npm install --save @brightlayer-ui/react-themes
or yarn
yarn add @brightlayer-ui/react-themes
Usage
To use these themes in your application, simply wrap the app in a ThemeProvider
and pass in your desired theme (blue
or blueDark
). You'll also need to include the Open Sans font resources (included with the themes):
import {
ThemeProvider,
createMuiTheme
} from '@material-ui/core/styles';
import * as BLUIThemes from '@brightlayer-ui/react-themes';
import "@brightlayer-ui/react-themes/open-sans";
...
<ThemeProvider theme={createMuiTheme(BLUIThemes.blue)}>
<App />
</ThemeProvider>
Updating From Version 5 ~> 6
In version 6, we have migrated from the deprecated typeface-open-sans
package to @fontsource/open-sans
(bundled with the Brightlayer UI themes). You'll need to update your Open Sans import references in your root file:
Before:
require('typeface-open-sans');
After:
import '@brightlayer-ui/react-themes/open-sans';
Demo
Common Overrides
See the Common Overrides for react themes.