# @brightlayer-ui/react-themes 中文文档

规范地址：https://npmcn.com/package/%40brightlayer-ui/react-themes/

版本：9\.1\.1
npm 元数据更新时间：2026-10-16T10:22:16.920Z
中文译文更新时间：2026-11-08T15:21:52.965Z
软件包许可：BSD-3-Clause

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40brightlayer-ui/react-themes
原文对照：https://npmcn.com/package/%40brightlayer-ui/react-themes/?lang=original
项目主页：https://github.com/etn-ccis/blui-react/blob/dev/packages/themes/README.md
源码仓库：https://github.com/etn-ccis/blui-react#dev

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：123 kB，107 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：@mui/material ^7\.1\.1
- 首次发布：2021-11-03T14:24:11.264Z
- 最新版本发布：2026-10-16T10:22:16.641Z
- 近 30 天下载量：17855（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：32（近 12 个月 9 个）

## 中文简介

Blightlayer UI 应用程序的反应主题

## 安装

```sh
npm install @brightlayer-ui/react-themes
```

也可以使用：`pnpm add @brightlayer-ui/react-themes`、`yarn add @brightlayer-ui/react-themes`、`bun add @brightlayer-ui/react-themes`

## README

# React 应用程序的亮层UI主题

[![Build](https://github.com/etn-ccis/blui-react-themes/actions/workflows/blui-ci.yml/badge.svg?branch=master)](https://github.com/etn-ccis/blui-react-themes/actions/workflows/blui-ci.yml) [![](https://img.shields.io/npm/v/@brightlayer-ui/react-themes.svg?label=@brightlayer-ui/react-themes&style=flat)](https://www.npmjs.com/package/@brightlayer-ui/react-themes)

这个软件包为使用Brightlayer UI设计系统的Eaton应用程序提供主题支持. 它包括使用 React w/ 开发者的资源 [材料界面](https://www.npmjs.com/package/@mui/material) 版本 6+(本套件的先发版本将与 Material UI 版本 5 工作 - 请检查 [更改日志](https://github.com/etn-ccis/blui-themes/blob/master/CHANGELOG.md) 详细情况请查阅。 这个软件包现在有一个支持光模式和暗模式的单一主题选项.

关于其他框架,请检查我们的有关包:

-   [@ brightlayer-ui/angular-主题](https://www.npmjs.com/package/@brightlayer-ui/angular-themes)
-   [@brightlayer-ui/反应-本土主题](https://www.npmjs.com/package/@brightlayer-ui/react-native-themes)

## 安装

用 npm 安装

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

线条

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

# 使用量

要在应用程序中使用这些主题,只需将应用程序包入 `ThemeProvider` 并通过主题:

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

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

主题将根据用户的系统偏好默认为光/暗模式. 要手动切换主题模式( 如从设置), 您需要使用 `useColorScheme` 钩子 (见下文).

## 更改默认模式

如果您不想将系统设置作为默认设置, 您可以设置 `defaultMode` 编辑 `ThemeProvider`数字 :

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

## 手动旋转模式

您可以手动切换主题模式 `useColorScheme` 钩:

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

欲了解更多关于拼接模式的信息,请参见: [MUI 文档](https://mui.com/material-ui/customization/dark-mode/)。 。 。 .

关于BLUI主题的更详细资料,请参见我们 [开发者文档](https://brightlayer-ui-components.github.io/react/themes/overview) 网站.

## 从v8到v9的迁移

在第九版中,主题现在遵循了来自MUI v7的标准. 为了使用新版本,您需要:

### 更新材料UI

请确保您将您的材料用户界面依赖性更新到第7版(包括@mui/材料、@mui/icons-材料等)。 参见官方MUI [迁移文件](https://mui.com/material-ui/migration/upgrade-to-v7/) 更多细节.

## 从v7到v8的迁移

在8版中,主题现在遵循了从MUI v6中将光和暗的主题合并为一个主题对象的标准. 为了使用新版本,您需要:

### 更新材料UI

请确保您将您的材料用户界面依赖性更新到版本 6 (包括 @ mui/ material, @ mui/icons- material等) 。 参见官方MUI [迁移文件](https://mui.com/material-ui/migration/upgrade-to-v6/) 更多细节.

### 合并主题

如果您之前在切换 `blue` 财务报告和审定财务报表 `blueDark` 主题 `ThemeProvider`,这应当替换为单个 `theme` 对象.

```diff
- 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>
```

### 更新逻辑切换主题模式

您现在将不交换整个主题对象,而是使用 `useColorScheme` 钩到光和暗模式之间切换. 参见上文使用说明或 [MUI 文档](https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually) 更多细节.

> 注:在少数情况下,有些样式可能应用不正确,因此需要明确声明具体模式.

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

## 常见问题

### @brightlayer-ui/react-themes 是什么？

Blightlayer UI 应用程序的反应主题

### 如何安装 @brightlayer-ui/react-themes？

在项目目录运行 npm install @brightlayer-ui/react-themes，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@mui/material（^7\.1\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @brightlayer-ui/react-themes 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @brightlayer-ui/react-themes 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @brightlayer-ui/react-themes 可以商用吗？

@brightlayer-ui/react-themes 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。

### @brightlayer-ui/react-themes 的下载量有多少？

根据 npm 官方下载统计，@brightlayer-ui/react-themes 在 2026/10/09 – 2026/11/07 这 30 天内被下载 17,855 次，日均约 595 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @brightlayer-ui/react-themes 还在维护吗？

最新版本 9\.1\.1 发布于 2026/10/16（23 天前）；至今共发布 32 个版本，其中过去 12 个月发布了 9 个；首次发布于 2021/11/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。