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

# Embed Theming

Embed can be customized to match your brand using the `theme` property. The
theme property allows you to set common styles such as the font, color, and
border styles.

## Overview

Embed is a composition of UI components such as a *Payment Header*, *Content*
and *Lists*. These components can change over time and so direct styling of these is not
supported. The following diagram shows an example of how
basic theming is applied. **Embed styles are derived from the theme values you
provide.**

<Frame>
  <img src="https://mintcdn.com/gr4vy/jCFeFdffXM43huI0/assets/images/embed/theming.png?fit=max&auto=format&n=jCFeFdffXM43huI0&q=85&s=d3aee879fbb316fd6eda20c40bbfcfa9" alt="Theming options" width="532" height="559" data-path="assets/images/embed/theming.png" />
</Frame>

<Warning>
  When customizing the visual appearance using theming options, please ensure your design meets accessibility standards set by the [European Accessibility Act (EAA)](https://commission.europa.eu/strategy-and-policy/policies/justice-and-fundamental-rights/disability/union-equality-strategy-rights-persons-disabilities-2021-2030/european-accessibility-act_en). Make sure your color choices have enough contrast and your text is easy to read for all users.
</Warning>

## Usage

To apply a theme, embed can be passed an Object containing
[Theme Options](#options).

**The theme options override the default theme**.

<CodeGroup>
  ```js React theme={"system"}
  <Embed
    currency="AUD"
    amount="2300"
    theme={{
      colors: {
        primary: "green",
        text: "black",
      },
      borderWidths: {
        input: "thick",
      },
      radii: {
        input: "none",
      },
    }}
  />
  ```

  ```js CDN theme={"system"}
  setup({
    gr4vyId: "example",
    element: ".container",
    amount: 1299,
    country='AU'
    currency: "AUD",
    token: token,
    theme: {
      colors: {
        primary: "green",
        text: "black",
      },
      borderWidths: {
        input: "thick",
      },
      radii: {
        input: "none",
      },
    }
  });
  />
  ```
</CodeGroup>

## Options

### Fonts

Fonts can be customized with a valid CSS property.

```js theme={"system"}
{
  fonts: {
    /**
     * Body - Used for all text
     */
    body: "google:Lato, Tahoma, Arial";
  }
}
```

<Tip>
  **Using Google Fonts**

  Fonts prefixed with `google:` are downloaded automatically from
  [Google Fonts](https://fonts.google.com/). This allows you to choose the closest
  font to your brand. We recommend choosing a font with support for the weights
  `400`, `600` and `700`.
</Tip>

### Colors

Colors are named semantically, for example `primary` or `danger`. This allows new features or UI elements to be introduced without explicitly requiring you
to update your theme. As an example, a 'Default Card' button may be introduced at
a later stage that would be based on the `danger` set of colors.

```js theme={"system"}
{
  colors: {
    /**
     * Text - Main body text, labels and headers
     */
    text: "#0f0f0f",
    /**
     * Subtle Text - Hints and Smaller text, for example Card Expiry
     */
    subtleText: "#434343",
    /**
     * Label Text - Labels for inputs can be a different color
     */
    labelText: "#0f0f0f",
    /**
     * Primary - Interactive elements or Brand
     */
    primary: "#006cd0",
    /**
     * Page - The main body/page of the Embed iFrame
     */
    pageBackground: "#ffffff",
    /**
     * Container - Used for bounding elements, for example an individual payment option
     */
    containerBackgroundUnchecked: "#fcfcfc",
    containerBackgroundHover: "#eeeeee",
    containerBackground: "#ffffff",
    containerBorder: "#f2f2f2",
    /**
     * Input - Used for inputs
     */
    inputBorder: "#b6b6b6",
    inputBackground: "#ffffff",
    inputText: "#0f0f0f",
    inputRadioBorder: "#ddd", // defaults to containerBorder
    inputRadioBorderChecked: "#ddd", // default to primary
    /**
     * Danger - Used for Error states or Destructive Action
     */
    danger: "#d82121",
    dangerBackground: "#fbf7f7",
    dangerText: "#b81010"
    /**
     * Info - Used for information / loading states
     */
    info: "#3ea2ff",
    infoBackground: "#e7f2fb",
    infoText: "#0367c4",
    /**
     * Focus - Color of the focus ring if shadows.focus is not set.
     */
    focus: "#4844ff",
    /**
     * Badge - Color of badge background.
     */
    badgeBackground: "transparent",
  }
}
```

### Borders Widths

Borders can be set using an alias of `thin` for a `1px` border width or `thick`
for a `2px` border width.

```js theme={"system"}
{
  borderWidths: {
    /**
     * Container - A bounding layout element
     */
    container: 'thin', // 'thin', 'thick' or 'none'
    /**
     * Input - A Form Input, for example Card Number
     */
    input: 'thin' // 'thin' or 'thick'
  }
}
```

### Radii

Radii can be set to either `none`, `subtle` or `rounded`. These aliases
correspond to `0`, `2px` and `4px`. Setting the radii to `none` removes it
entirely.

```js theme={"system"}
{
  radii: {
    /**
     * Container - A bounding layout element
     */
    container: "subtle"; // 'subtle', 'rounded' or 'none'
    /**
     * Input - A Form Input, for example Card Number
     */
    input: "subtle"; // 'subtle', 'rounded' or 'none'
  }
}
```

### Focus Ring

The focus ring is set using a CSS `box-shadow` instead of the default browser
focus ring. It can be overridden, but keeping a visible focus
ring for accessibility is advised. This overrides any focus styles set elsewhere in the
theme.

```js theme={"system"}
{
  shadows: {
    /**
     * Focus Ring - Surrounds an element that is currently focused
     */
    focusRing: "0 0 0 2px #ffffff, 0 0 0 4px #4844ff";
  }
}
```

## FAQ

<AccordionGroup>
  <Accordion title="How do I load my own CSS files?">
    Adding your own styles directly via CSS is currently not supported. Using a
    theme allows updates to be rolled out and ensures compatibility with new
    features.
  </Accordion>

  <Accordion title="What browsers are supported?">
    Theming is currently supported in all modern browsers including Microsoft
    Edge. Some browsers like Internet Explorer 11 are not supported, and in these
    the default theme is used.
  </Accordion>

  <Accordion title="What values can be set?">
    Values can be a valid CSS property value. for example `colors.primary` could be a
    hex, RGB or HSL. You can also have multiple shadows for a focus ring, for example `0
          0 0 2px white, 0 0 0 4px green`
  </Accordion>
</AccordionGroup>