# Hooks (/themes/sdk/reference/settings/hooks)

```ts
import { … } from '@poltura/theme-sdk/settings';
```

## `useThemeSettings` [#usethemesettings]

The theme settings in the page language, live while the merchant edits them in the customizer.

```ts
useThemeSettings(): ThemeSettings
```

The host merges the customizer draft, the language overlay and the store brand; themes never coerce values.

**Returns:** The settings document, with the platform groups typed.

**Example**

```tsx
import { useThemeSettings } from '@poltura/theme-sdk/settings';

export function Tagline() {
  const settings = useThemeSettings();
  return <p>{settings.tagline}</p>;
}
```

## `useTemplateSettings` [#usetemplatesettings]

The settings of a template's own section, for an element placed elsewhere on the page.

```ts
useTemplateSettings<T extends TemplateId>(template: T): TemplateSettings<T>
```

**Parameters**

- `template: T`: The template whose locked section is read, such as `products`.

**Returns:** The section's settings in the page language; a setting the merchant never saved is absent.

**Example**

```tsx
import { useTemplateSettings } from '@poltura/theme-sdk/settings';

export function GridColumns() {
  const grid = useTemplateSettings('products');
  return <span>{grid.columns_mobile ?? '2'}</span>;
}
```

## `useColorScheme` [#usecolorscheme]

The colour scheme the component renders in: the nearest section's or block's scheme, live while the merchant edits it.

```ts
useColorScheme(): ColorScheme | null
```

The platform already remaps the colour roles (`--background`, `--foreground`, `--primary`, `--button`, …) inside a box drawn in a scheme, so read this only to style by the scheme itself.

**Returns:** The scheme, or null where everything inherits the page's colours.

**Example**

```tsx
import { useColorScheme } from '@poltura/theme-sdk/settings';

export function Ribbon() {
  const scheme = useColorScheme();
  return <span data-tone={scheme?.id ?? 'page'}>New</span>;
}
```