> ## Documentation Index
> Fetch the complete documentation index at: https://docs.encorekit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Sheet Variants

> Which sheet a Web SDK placement draws when Encore serves a variant, and which of your appearance and copy options it honors.

<Note>
  New in `2.4.0`.
</Note>

The sheet a placement presents can be a variant Encore serves for your app (the served
variant), so Encore can change the sheet or test variants against each other without a
release of your site. When Encore serves no variant, or the served one can't run on the web,
the SDK draws its built-in sheet instead.

## When to use this

* An `appearance` option has no visible effect on the sheet.
* You need to know when the sheet turns dark, or how it fits a phone and a desktop.
* Your `headline` or `subheadline` doesn't appear, or the sheet isn't the one you expected.

For the claim result and when it arrives, see
[The Claim Flow](/publishers/web/concepts/claim-flow).

## Which sheet draws

| What Encore serves for the use case | What draws |
| - | - |
| A variant that runs on the web | That variant |
| A reward variant Encore maps to one of the SDK's own reward screens | That screen, a built-in sheet |
| A variant this SDK can't read, or one that needs an in-app purchase or a lead form | The built-in sheet for the use case |
| No variant | The built-in sheet for the use case |

The built-in sheet for each [`useCase`](/publishers/web/sdk-reference/placement#field-reference):

| `useCase` | Built-in sheet |
| - | - |
| `'reduceChurn'` (default) | The offer carousel: a save attempt at a moment the user is leaving. |
| `'rewardUsers'` | Its own headline chrome around a paged carousel, for a moment the user just accomplished something. Claim-only, with no purchase ask anywhere in it. |

## Your appearance options

A served variant brings its own layout and colors, and reads four of your
[`appearance`](/publishers/web/guides/advanced-ui) options. Three of them apply wherever the
variant uses the matching theme color, and a color the variant fixes for itself stays as
designed.

```javascript theme={null}
const result = await Encore.placement('cancel_flow', {
  appearance: {
    accentColor: '#6743F5',
    backgroundColor: '#101014',
  },
}).show();
```

The full `appearance` contract: [Advanced UI](/publishers/web/guides/advanced-ui#the-two-tiers).

| Option | What it moves on a served variant |
| - | - |
| `accentColor` | The variant's accent color. |
| `backgroundColor` | The variant's canvas. A `#`-prefixed 3- or 6-digit hex value (such as `#101014`) also re-derives the surfaces, borders, and text from it. |
| `textColor` | The variant's text. |
| `modalBackgroundColor` | The sheet's frame, behind the variant, in place of the variant's own frame color. |

The [reward sheet overrides](/publishers/web/guides/advanced-ui#the-two-tiers) in
`appearance` (the slot fields and the dot colors) and the
[`statusIcon`](/publishers/web/sdk-reference/placement#field-reference) option style the
built-in sheets only, never a served variant.

## Your copy options

The `headline` and `subheadline` options on
[`placement()`](/publishers/web/sdk-reference/placement#field-reference) apply to the built-in
sheets, and to a served variant wherever it shows your headline. A variant with fixed copy
keeps it.

## Dark mode

A served variant renders in light, dark, or automatic appearance, following the appearance
mode Encore sets for your app. To change it for a web app, contact Encore.

| Appearance mode | The sheet |
| - | - |
| Light | Light on every page. |
| Dark | Dark on every page. |
| Automatic (the default) | Dark only when your page declares dark support and the device prefers dark. |

The SDK picks light or dark when the sheet opens, and an open sheet keeps it. A hex
`backgroundColor` sets the palette in either mode.

A page declares dark support with a `color-scheme` that includes `dark`, set in a meta tag or
in CSS on the root or `body` element:

```html theme={null}
<meta name="color-scheme" content="light dark">
```

A page that declares none keeps the light sheet, so a light-only site never shows a dark one
by surprise. The built-in sheets stay light.

## Screen size

* **Narrower than 768px:** a full-screen variant fills the screen. A variant made for part of
  the screen opens as a bottom sheet. The user can drag it between its heights, or down to
  close it, the same as the close button.
* **768px wide or wider:** a full-screen variant draws in a square of up to 720px, smaller in
  a short or narrow window, on a backdrop in the variant's canvas color, not a dimmed page.
  A variant made for part of the screen keeps the square's width and takes
  the height of its content, and keeps the square when its content doesn't fit.

## Related

* [`placement()`](/publishers/web/sdk-reference/placement): the options a presentation takes.
* [Advanced UI](/publishers/web/guides/advanced-ui): the full `appearance` contract.
* [The Claim Flow](/publishers/web/concepts/claim-flow): what happens when the user claims.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.