# @fluentui/react-theme

> Fluent UI themes

Latest version **9.2.2** (published 2026-08-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui/react-theme
pnpm add @fluentui/react-theme
yarn add @fluentui/react-theme
bun add @fluentui/react-theme
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.2.2 |
| Published | 2026-08-11 |
| First published | 2021-02-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 58.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | uifabricteam, uifrnbot, microsoft1es, microsoft-oss-releases |

## Links

- npm: https://www.npmjs.com/package/@fluentui/react-theme
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui#readme
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@fluentui/react-theme

## Dependencies (2)

- [@swc/helpers](https://npm.io/package/@swc/helpers.md) ^0.5.1
- [@fluentui/tokens](https://npm.io/package/@fluentui/tokens.md) 1.0.0-alpha.24

## Recent versions

- 9.2.2 (latest) — 2026-08-11
- 0.0.0-nightly-20260929-0404.1 (nightly) — 2026-09-29
- 9.74.5-experimental.tabster-v9.20260804-bb909442fe.0 (experimental) — 2026-08-04
- 9.0.0-rc.10 (rc) — 2022-06-21
- 9.0.0-beta.4 (beta) — 2021-11-25
- 9.0.0-alpha.26 (alpha) — 2021-10-01
- 0.0.0-nightly-20260928-0404.1 — 2026-09-28
- 0.0.0-nightly-20260925-0403.1 — 2026-09-25
- 0.0.0-nightly-20260924-0403.1 — 2026-09-24
- 0.0.0-nightly-20260923-0404.1 — 2026-09-23
- 0.0.0-nightly-20260922-0403.1 — 2026-09-22
- 0.0.0-nightly-20260917-0408.1 — 2026-09-17
- 0.0.0-nightly-20260916-0409.1 — 2026-09-16
- 0.0.0-nightly-20260915-0407.1 — 2026-09-15
- 0.0.0-nightly-20260914-0407.1 — 2026-09-14
- … 1225 more at https://npm.io/package/@fluentui/react-theme/versions

## README

# @fluentui/react-theme

**React Theme for [Fluent UI React](https://react.fluentui.dev)**

## Usage

Import a theme and tokens:

```jsx
import { webLightTheme, tokens } from '@fluentui/react-components';
```

Pass the theme to the `FluentProvider`:

```jsx
<FluentProvider theme={webLightTheme}>
  <App />
</FluentProvider>
```

Use the `tokens` in your styles:

```jsx
const useStyles = makeStyles({
  root: {
    color: tokens.colorNeutralForeground1,
  },
});
```

### Using a custom brand ramp

To use a theme based on a custom brand ramp, use the `createXXXTheme` function:

```jsx
import { createWebLightTheme } from '@fluentui/react-components';

const customBrandRamp: BrandVariants = {
  10: `#2b2b40`,
  // ...
  160: `#e8ebfa`,
};

const customTheme = createWebLightTheme(customBrandRamp);
```

## Contributing

### Updating colors in the theme

The color tokens are generated by token pipeline. Do not edit colors directly. Instead, update the token pipeline first and once the changes are merged there, run:

```sh
yarn token-pipeline
```

### Adding new color tokens

To add a new color token, besides updating the token pipeline, you also need to update corresponding typings and the `tokens` object in `src/tokens.ts`.

### Updating other tokens

To update any tokens not related to colors, update the values directly in this package.

---
_Source: https://npm.io/package/@fluentui/react-theme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._