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

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 the theme:

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

<ThemeProvider theme={theme}>
    <App />
</ThemeProvider>;

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:

<ThemeProvider theme={theme} defaultMode={'dark' /* or 'light' */}></ThemeProvider>

Manually toggling the mode

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

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 (
        <Tooltip title={'Toggle Theme'}>
            <IconButton
                onClick={() => {
                    setMode(mode === 'light' ? 'dark' : 'light');
                }}
            >
                <InvertColors />
            </IconButton>
        </Tooltip>
    );
};

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:

Update Material UI

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:

Update Material UI

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.

Consolidate themes

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

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

- <ThemeProvider theme={isDark ? blueDark : blue}></ThemeProvider>
+ <ThemeProvider theme={theme}></ThemeProvider>

Update logic to toggle the theme mode

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.

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