This package has been deprecated

Author message:

@pxblue/themes has been split into separate packages for each supported framework. Please update to @brightlayer-ui/angular-themes, @brightlayer-ui/react-themes, or @brightlayer-ui/react-native-themes to stay up to date with the latest updates

TypeScript icon, indicating that this package has built-in type declarations

3.0.2 • Public • Published

PX Blue themes for Eaton applications

This package provides theming support for Eaton applications using the PX Blue design system. It includes resources for developers using:

The PX Blue themes package comes with two theme options: a Blue theme (standard) and a Dark theme.


Install with npm

npm install --save @pxblue/themes

or yarn

yarn add @pxblue/themes


Depending on the framework that you are using, PX Blue themes are applied in different ways.

Angular w/ Angular Material

In order to use the PX Blue themes and font (Open Sans), you will need to modify your angular.json file "styles" entries (there is one under "build" and one under "test") to include the PX Blue themes and Open Sans reference:

"styles": [

Alternatively, you can also import the theme file in your top-level SCSS file.

// in styles.scss or your top-level scss file
import '~@pxblue/themes/angular/theme.scss'

You can then apply the theme to your application by adding the proper class to your application's top-level element:

// Default Theme
<app-root class="pxb-blue">

// Dark Theme
<app-root class="pxb-blue-dark">

If you do not specify a theme class, your application will use the default Material theme.

React w/ Material UI

import { 
} from '@material-ui/core/styles';
import * as PXBThemes from '@pxblue/themes/react';

// Default Theme
<MuiThemeProvider theme={createMuiTheme(}>
    <App />
// Dark Theme
<MuiThemeProvider theme={createMuiTheme(PXBThemes.blueDark)}>
    <App />

React Native w/ @pxblue/react-native-components

import { ThemeProvider } from '@pxblue/react-native-components';
import * as PXBThemes from '@pxblue/themes/react-native';
<ThemeProvider theme={}>
    <App />

NOTE: Using the PX Blue React Native theme requires that you add the Open Sans font to your application. You can learn how to do this by reading the instructions for Vanilla React Native or Expo.

When using Expo, you will need to specify the name for each font weight you load using the format OpenSans-<Weight>, e.g., OpenSans-SemiBold. Refer to one of our React Native demos for reference.


Framework Live Examples
Angular View on Stackblitz
React View on Code Sandbox
React Native Coming Soon

Package Sidebar


npm i @pxblue/themes

Weekly Downloads






Unpacked Size

38.2 kB

Total Files


Last publish


  • px-blue