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 5+ (prior versions of this package will work with Material UI version 4 - 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:

• @brightlayer-ui/angular-themes
• @brightlayer-ui/react-native-themes

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 } from '@mui/material/styles';
import * as BLUIThemes from '@brightlayer-ui/react-themes';
import "@brightlayer-ui/react-themes/open-sans";
...
<ThemeProvider theme={BLUIThemes.blue}>
    <App />
</ThemeProvider>

Usage

Read about the usage details at our developer documentation site.