@spark-web/theme

---
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.

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
function which add some extra values that should never change (and therefore
aren't themeable) as well as using
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.

#### mapResponsiveProp

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

$3

#### 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

Pass the result of this function into the
SparkProvider if you want to override the default
theme.