Hooks

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

useThemeSettingsCopy Anchor Link

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

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

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

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

useTemplateSettingsCopy Anchor Link

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

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

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

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

useColorSchemeCopy Anchor Link

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

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

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

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