# @spark-web/theme

> --- title: Theme isExperimentalPackage: true ---

Latest version **5.13.3** (published 2026-06-15) · 0 weekly downloads

## Install

```sh
npm install @spark-web/theme
pnpm add @spark-web/theme
yarn add @spark-web/theme
bun add @spark-web/theme
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.13.3 |
| Published | 2026-06-15 |
| First published | 2022-04-20 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 7 |
| Unpacked size | 225.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | brighte, brighte-release-bot |

## Links

- npm: https://www.npmjs.com/package/@spark-web/theme
- Repository: https://github.com/brighte-labs/spark-web
- Homepage: https://github.com/brighte-labs/spark-web#readme
- Issues: https://github.com/brighte-labs/spark-web/issues
- npm.io page: https://npm.io/package/@spark-web/theme

## Dependencies (7)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [polished](https://npm.io/package/polished.md) ^4.2.2
- [facepaint](https://npm.io/package/facepaint.md) ^1.2.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.25.0
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.14.0
- [@capsizecss/core](https://npm.io/package/@capsizecss/core.md) ^3.0.0
- [@spark-web/utils](https://npm.io/package/@spark-web/utils.md) ^5.1.0

## Recent versions

- 5.13.3 (latest) — 2026-06-15
- 0.0.0-snapshot-release-20260827022754 (snapshot-release) — 2026-08-27
- 5.12.0-rc.0 (rc) — 2025-07-24
- 5.7.0 (next) — 2025-03-15
- 0.0.0-snapshot-release-20260612062809 — 2026-06-12
- 5.13.2 — 2026-05-08
- 5.13.1 — 2026-03-06
- 5.13.0 — 2026-01-15
- 5.12.9 — 2025-12-09
- 5.12.8 — 2025-11-23
- 5.12.7 — 2025-11-18
- 5.12.6 — 2025-11-13
- 5.12.5 — 2025-10-31
- 5.12.4 — 2025-10-24
- 5.12.3 — 2025-10-24
- … 72 more at https://npm.io/package/@spark-web/theme/versions

## README

---
title: Theme
isExperimentalPackage: true
---

🚧 — Under construction

The theme packages exports a set of objects and utilities that are used
internally to create Spark Web components as well as for consumers to be able to
override

## useGlobalTheme

The `useGlobalTheme` hook returns the name of the theme set in the
`GlobalThemeProvider`. It defaults to _`brighte`_ if there's no value provided.

## useTheme

The `useTheme` hook returns an object with our theme tokens along with a set of
styling utilities.

The theme will always be in the same shape, but the values can be overridden by
[passing in a custom theme to the SparkProvider](/package/core).

Theme tokens differ slightly from the values passed into the provider (or the
defaultTokens if you don't provide a theme) as they are run through the
[decorateTokens](https://github.com/brighte-labs/spark-web/blob/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5/packages/theme/src/make-theme.ts#L101)
function which add some extra values that should never change (and therefore
aren't themeable) as well as using
[Capsize](https://seek-oss.github.io/capsize/) to add tokens we need to trim
space above capital letters and below the baseline so spacing between elements
is consistent and doesn't vary depending on line-height, font-size etc.

For more documentation about our tokens, please see the
[tokens reference page](/reference/tokens).

#### mapResponsiveProp

Returns either the string value of the token provided to it, or an array which
maps to [our breakpoints](/reference/tokens#breakpoint) (where index 0 refers to
the mobile breakpoint, 1 is the tablet breakpoint and so on).

### Theme utils

#### mapResponsiveScale

Helper for mapping keys/breakpoint map to a theme scale e.g.

```jsx
mapResponsiveProp('small', { small: 8, large: 16 }); // 8
mapResponsiveProp(
  { mobile: 'small', tablet: 'large' },
  { small: 8, medium: 12, large: 16 }
); // [8, 16]
```

#### optimizeResponsiveArray

TODO

#### responsiveRange

Designed to be used alongside `optimizeResponsiveArray`.

#### responsiveStyles

TODO

#### resolveResponsiveProps

TODO

## defaultTokens

This is the default tokens for the Brighte theme _before_ they've been
decorated.

## makeSparkTheme

This function

- decorates to passed in tokens
- decorates them
- works out if the background tokens are dark or light
- adds the [theme utils](#theme-utils)

Pass the result of this function into the
[SparkProvider](/package/core#sparkprovider) if you want to override the default
theme.

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