This repo has been archived and moved here.

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>

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

View on Code Sandbox

Common Overrides

See the Common Overrides for react themes.