React themes for PX Blue applications

Usage no npm install needed!

<script type="module">
  import pxblueReactThemes from 'https://cdn.skypack.dev/@pxblue/react-themes';


PX Blue themes for React applications

This package provides theming support for Eaton applications using the PX Blue 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:


Install with npm

npm install --save @pxblue/react-themes

or yarn

yarn add @pxblue/react-themes


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 {
} from '@material-ui/core/styles';
import * as PXBlueThemes from '@pxblue/react-themes';
import "@pxblue/react-themes/open-sans";
<ThemeProvider theme={createMuiTheme(PXBlueThemes.blue)}>
    <App />

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 PX Blue themes). You'll need to update your Open Sans import references in your root file:




import '@pxblue/react-themes/open-sans';


View on Code Sandbox