# @carbon/themes

> Themes for applying color in the Carbon Design System

Latest version **11.83.0** (published 2026-10-07) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @carbon/themes
pnpm add @carbon/themes
yarn add @carbon/themes
bun add @carbon/themes
```

## Health

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

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 11.83.0 |
| Published | 2026-10-07 |
| First published | 2019-01-10 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22 |
| Dependencies | 5 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 9518 |
| Maintainers | carbon-design-system, carbon-bot, leechase, jeffreychew, sstrubberg |
| Keywords | ibm, elements, carbon, carbon-elements, carbon-design-system, components, react |

## Links

- npm: https://www.npmjs.com/package/@carbon/themes
- Repository: https://github.com/carbon-design-system/carbon
- Homepage: https://github.com/carbon-design-system/carbon#readme
- Issues: https://github.com/carbon-design-system/carbon/issues
- npm.io page: https://npm.io/package/@carbon/themes

## Dependencies (5)

- [color](https://npm.io/package/color.md) ^4.0.0
- [@carbon/type](https://npm.io/package/@carbon/type.md) ^11.69.0
- [@carbon/colors](https://npm.io/package/@carbon/colors.md) ^11.60.0
- [@carbon/layout](https://npm.io/package/@carbon/layout.md) ^11.61.0
- [@ibm/telemetry-js](https://npm.io/package/@ibm/telemetry-js.md) ^1.5.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 11.83.0 (latest) — 2026-10-07
- 11.83.0-rc.0 (next) — 2026-10-05
- 12.0.0-alpha.3 (v12-alpha) — 2026-10-01
- 10.55.6 (v10-next) — 2025-05-14
- 10.25.0-alpha.0 (nightly) — 2020-12-03
- 10.7.0-alpha.5727 (canary) — 2019-09-09
- 0.0.1-beta.5 (beta) — 2019-03-25
- 0.0.1-alpha.32 (alpha) — 2019-02-12
- 12.0.0-alpha.2 — 2026-09-30
- 12.0.0-alpha.1 — 2026-09-30
- 12.0.0-alpha.0 — 2026-09-29
- 11.82.0 — 2026-09-23
- 11.82.0-rc.0 — 2026-09-21
- 11.81.0 — 2026-09-09
- 11.81.0-rc.0 — 2026-09-08
- … 359 more at https://npm.io/package/@carbon/themes/versions

## README

# @carbon/themes

> Themes for applying color in the Carbon Design System

## Getting started

To install `@carbon/themes` in your project, you will need to run the following
command using [npm](https://www.npmjs.com/):

```bash
npm install -S @carbon/themes
```

If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
instead:

```bash
yarn add @carbon/themes
```

## Usage

You can use `@carbon/themes` in JavaScript or Sass by including this package in
your project. By default, `@carbon/themes` provides a set of color tokens that
are pre-defined for a specific theme. Currently, we offer the following color
themes: white, gray 10, gray 90, gray 100 .

You can preview all of the token values for this on the
[Carbon Design System website](https://carbondesignsystem.com/elements/color/usage/).

### Sass

If your project is using Sass, you can include this package and the
corresponding default theme by writing the following in your Sass file:

```scss
@use '@carbon/themes/scss/themes';
```

By default, the white theme will be initialized. If you would like to include
another theme, you can do so by setting the global theme variable in the import.
For example:

```scss
@use '@carbon/themes/scss/themes' as *;
@use '@carbon/themes' with (
  $theme: $g100
);
```

Inline theming can be done by using the mixin. For example:

```scss
@use '@carbon/themes/scss/themes';
@use '@carbon/themes/scss/theme';

// Uses the default white theme here

.my-dark-theme {
  @include theme.theme(themes.$g90);
}

.my-darker-theme {
  @include theme.theme(themes.$g100);
}
```

### JavaScript

If you're looking to use these themes in JavaScript, we export a variety of
bindings for you to use, including:

```js
import {
  // An object of all themes
  themes,

  // Direct theme values
  white,
  g10,
  g90,
  g100,

  // Specific token values
  background,
  interactive,
  textPrimary,
} from '@carbon/themes';
```

### Component tokens

The DTCG migration introduced per-component token sets. They are exported as
named objects:

> **Breaking change (11.78.0):** Prior to 11.78.0 these objects were
> double-nested (e.g. `buttonTokens.buttonTokens`). The repeated property is now
> `undefined` — drop it to get the flat object directly.

```js
import {
  buttonTokens,
  tagTokens,
  notificationTokens,
  statusTokens,
  contentSwitcherTokens,
} from '@carbon/themes';
```

Each object contains the token values for all four themes. The corresponding
Sass output is available via `@use '@carbon/themes/scss/component-tokens'`.

### Modifying token values

Token values are defined in [`src/dtcg/themes.json`](./src/dtcg/themes.json)
(theme tokens) and [`src/dtcg/components/`](./src/dtcg/components/) (component
tokens) using the [DTCG token format](https://tr.designtokens.org/format/).
These are the single source of truth — **do not edit generated files directly**.

To add or update a token:

1. Edit `src/dtcg/themes.json` (or the relevant `src/dtcg/components/*.json`
   file for component tokens)
2. Run `yarn build` in this package to regenerate all outputs
3. Run `yarn test --testPathPatterns=packages/themes` from the repo root to
   confirm nothing regressed

## 📖 API Documentation

If you're looking for `@carbon/themes` API documentation, check out:

- [Sass](./docs/sass.md)

## 📚 Examples

If you're looking for more examples on how to use `@carbon/themes`, we have some
examples that you can check out:

- [preview](./examples/preview)
- [sass-modules](./examples/sass-modules)

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).

## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry

This package uses IBM Telemetry to collect de-identified and anonymized metrics
data. By installing this package as a dependency you are agreeing to telemetry
collection. To opt out, see
[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
For more information on the data being collected, please see the
[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).

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