> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Introduction

## Article: Introduction

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/site-settings/site-theme/introduction.md

## Article Content:

# About the Site Theme API

The Site Theme API gives you the colors and fonts of the site's theme, which a Wix user sets in the editor. Use it to draw a component in the site's own colors, including colors that the component's settings refer to by theme color ID. The theme belongs to the whole site, so the values are the same on every page.

With the Site Theme API, you can:

- Resolve a theme color ID to its color value.
- Retrieve the site's theme colors as a list.
- Retrieve the site's theme fonts.

## Before you begin

It's important to note the following points before starting to code:

- The values can change while the page is open, for example when a Wix user changes the site's theme in the editor. Read them while a component renders, so the component updates when they change, rather than keeping an object you read earlier.
- A site's theme doesn't have every theme color and font ID. Looking up an ID or index that the theme doesn't have gives `undefined`, so handle the missing case with a fallback.

## Use cases

- [Resolve a theme color ID to a color value](https://dev.wix.com/docs/sdk/site-sdk/site-settings/site-theme/sample-flows.md)
- [Draw a chart in the site theme colors](https://dev.wix.com/docs/sdk/site-sdk/site-settings/site-theme/sample-flows.md)

## Terminology

- **Theme color ID**: The ID of a color in the site's theme, in the form `color_<n>`, such as `color_4`.
- **Theme font ID**: The ID of a font in the site's theme, in the form `font_<n>`, such as `font_1`.

## SDK setup

@package_metadata:@wix/site-service-site-theme

To use the API, install the `@wix/site-service-site-theme` package:

```bash
npm install @wix/site-service-site-theme
```

#### Import the package

```ts
import { SiteThemeDefinition } from '@wix/site-service-site-theme/definition'
```

#### Import types

Import any type shown in these docs from `@wix/site-service-site-theme/types`:

```ts
import type { <TypeName> } from '@wix/site-service-site-theme/types'
```

#### Resolve the service

In a React component, resolve the service with the `useService` hook:

```tsx
import { useService } from '@wix/services-manager-react'
import { SiteThemeDefinition } from '@wix/site-service-site-theme/definition'

function BrandSwatch() {
    const siteThemeService = useService(SiteThemeDefinition)

    return <div className="swatch" style={{ backgroundColor: siteThemeService.colors['color_4'] ?? '#1F1F1F' }} />
}
```