# Highlight styles (/docs/customizing/highlight-styles)

During a walkthrough, Skavelo marks the element the user should click next. On the **Appearance** tab, under **Highlight**, choose one of four styles. Selecting a style switches the preview to the walkthrough view so you can see it in action.

| Style | What it looks like | Best for |
| --- | --- | --- |
| **Beacon** (default) | A ring around the element, with a dot on its corner that sends out ripples | Most products. Easy to spot, even on small icons. |
| **Spotlight** | Dims the rest of the page around the element | Onboarding, where you want the user's full attention |
| **Trace** | Draws an outline around the element, then glows softly | A polished look that stands out without dimming the page |
| **Ring** | A plain ring that pulses twice | The most subtle option |

All styles use your **Accent** color.

## How highlights behave [#how-highlights-behave]

- **Motion pauses while the user interacts.** The animation pauses while the pointer or keyboard focus is on the element, and resumes when it leaves.
- **Clicks always pass through.** Highlights never block the page, including the dimmed area of Spotlight.
- **The widget stays readable.** Spotlight never dims the walkthrough instructions in the widget.
- **Reduced motion is respected.** Users who turn on reduced motion in their operating system see a still version of each style.

You can also set the style in code with `theme: { highlight: 'spotlight' }`; see the [SDK reference](/docs/developers/sdk-reference).