# Parts (/themes/sdk/reference/chrome/parts)

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

## `Brand` [#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.

```ts
Brand(props: BrandProps): ReactElement
```

**Props:** [`BrandProps`](/themes/sdk/reference/chrome/types#brandprops)

**Example**

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

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

## `Logo` [#logo]

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

```ts
Logo(props: LogoProps): ReactElement | null
```

**Props:** [`LogoProps`](/themes/sdk/reference/chrome/types#logoprops)

**Example**

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

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

**See also:** [`Brand`](/themes/sdk/reference/chrome/parts#brand)

## `ColorModeToggle` [#colormodetoggle]

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

```ts
ColorModeToggle(props: ColorModeToggleProps): ReactElement
```

**Props:** [`ColorModeToggleProps`](/themes/sdk/reference/chrome/types#colormodetoggleprops)

**Example**

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

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