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 6+ (prior versions of this package will work with Material UI version 5 - check the Changelog for details). This package now comes with a single theme option that supports both light mode and dark mode.

For other frameworks, check out our related packages:

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

Installation

Install with npm

``shell
npm install --save @brightlayer-ui/react-themes
`

or yarn

`shell
yarn add @brightlayer-ui/react-themes
`

Usage

To use these themes in your application, simply wrap the app in a ThemeProvider and pass in the theme:

`tsx
import { ThemeProvider } from "@mui/material/styles";
import { theme } from "@brightlayer-ui/react-themes";



;
`

The theme will default to light/dark mode based on the user's system preference. To manually toggle the theme mode (e.g., from settings), you will need to use the useColorScheme hook (see below).

Changing the default mode

If you do not want to use the system setting as the default, you can set the defaultMode on the ThemeProvider:

`tsx
or 'light' /}>
`

Manually toggling the mode

You can manually toggle the theme mode using the useColorScheme hook:

`tsx
import { useColorScheme } from "@mui/material/styles";
import InvertColors from "@mui/icons-material/InvertColors";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";

const ToggleComponent = () => {
const { mode, setMode } = useColorScheme();

return (

onClick={() => {
setMode(mode === "light" ? "dark" : "light");
}}
>



);
};
`

For more information on toggling modes, refer to the MUI docs.

For more detailed information about the BLUI themes, refer to our developer documentation site.

Migration from v8 to v9

In version 9, the theme now follows the standard from MUI v7. In order to use the new version, you will need to:

$3

Ensure you have updated your Material UI dependencies to version 7 (this includes @mui/material, @mui/icons-material, etc.). Refer to the official MUI migration docs for more details.

Migration from v7 to v8

In version 8, the theme now follows the standard from MUI v6, which combines light and dark theme into a single theme object. In order to use the new version, you will need to:

$3

Ensure you have updated your Material UI dependencies to version 6 (this includes @mui/material, @mui/icons-material, etc.). Refer to the official MUI migration docs for more details.

$3

If you were previously switching between blue and blueDark themes in your ThemeProvider, this should be replaced with the single theme object.

`diff
- import { blue, blueDark } from '@brightlayer-ui/react-themes';
+ import { theme } from '@brightlayer-ui/react-themes';

-
+
`

$3

Instead of swapping entire theme objects, you will now make use of the useColorScheme hook to toggle between light and dark mode. Refer to the usage instructions above or the MUI docs for more details.

> Note: For few cases some styles may not apply correctly, hence they need to be declared explicitly for specific mode.

`tsx
sx={{
backgroundColor: statusColor || Colors.black[500],
color: getIconColor(),
...theme.applyStyles('dark', {
color: getIconColor(),
backgroundColor: statusColor || Colors.black[500],
}),
}}
``