# Dialogs

Dialogs are overlay windows used throughout your storefront, for example, quick-view modals, cart drawers, and other popup-style components. 

Pebble lets you customize the appearance of these dialogs so they match your store’s brand and design system.

## How to edit Dialogs

{% hint style="success" %}
Steps:

1. In the theme editor (**Customize**), click **Theme settings**.
2. Locate **Dialogs**.
3. Make necessary changes.
4. Click **Save**.
   {% endhint %}

## Dialogs settings options

### Appereance

#### Inherit color scheme

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FIfFcavYNoxlntxCOz6wE%2Fimage.png?alt=media&#x26;token=75b725d4-772e-4e4a-8750-395cd2dc1d58" alt=""><figcaption></figcaption></figure>

Determines whether dialogs use the global theme color settings or a custom scheme.

* **ON:**
  * Dialogs automatically inherit the theme’s global color scheme.
  * The **Color scheme** selector is hidden
* **OFF:**
  * Reveals the **Color scheme** dropdown
  * Let you choose a specific color scheme only for dialogs, for example, a dark modal on a light storefront.

Use this when you want the dialog to stand out, match a specific section, or improve contrast.

#### Color scheme&#x20;

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FEPYOGD4inrZw8tlJsijo%2Fimage.png?alt=media&#x26;token=4119a798-695e-4a09-8a17-7e96acc6f517" alt=""><figcaption></figcaption></figure>

*(visible only when “Inherit color scheme” is OFF)*

Allows you to choose a specific color scheme for all dialogs.

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FsfVPSM1cIOvijbNOmQqN%2Fimage.png?alt=media&#x26;token=09eb985f-e27e-4ccc-b139-054946411b73" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To edit the color schemes, go to **Theme settings** > [Colors](https://docs.foxecom.com/pebble-theme/theme-settings/colors)
{% endhint %}

#### Corner radius

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FeCswwcIIjMrO72aYWPqO%2Fimage.png?alt=media&#x26;token=db298d87-3846-494f-8924-4b0d7e8bb4d2" alt=""><figcaption></figcaption></figure>

Controls how rounded the dialog’s corners appear.

* Move the slider to change from 0px (sharp corners) to 32px (fully rounded).