Developers
Start building
Themes/Theme SDK/Modules/chrome/Parts

Parts

The parts of @poltura/theme-sdk/chrome.

On this page
import { … } from '@poltura/theme-sdk/chrome';

Brand

The store's logo linking home, with the dark-scheme logo under a dark colour scheme, or its initial and name when it has none.

Brand(props: BrandProps): ReactElement

Props: BrandProps

Example

import { Brand } from '@poltura/theme-sdk/chrome';

export function HeaderStart() {
  return <Brand priority classes={{ image: 'h-10' }} />;
}

The store's logo at a set width, with its dark-scheme variant, falling back to the store's name.

Logo(props: LogoProps): ReactElement | null

Props: LogoProps

Example

import { Logo } from '@poltura/theme-sdk/chrome';

export function FooterLogo() {
  return <Logo width={96} fallback='nameOnly' />;
}

See also: Brand

ColorModeToggle

Switches the storefront between light and dark, with the transition the theme sets.

ColorModeToggle(props: ColorModeToggleProps): ReactElement

Props: ColorModeToggleProps

Example

import { ColorModeToggle } from '@poltura/theme-sdk/chrome';

export function FooterEnd() {
  return <ColorModeToggle display='switch' />;
}
Last updated