---
updatedAt: 2026-08-24T17:23:55.000Z
agentTools:
  projectIndex: https://docs.trybadge.com/llms.txt
---

# Styling the Embed

You can customize the embed's appearance, including fonts and brand colors.

<Callout icon="📘" theme="info">
  You can test and experiment with different settings using the [SDK Playground](https://sdk-playground.trybadge.com/).
</Callout>

# Appearance

## Colors

You can configure the primary and neutral colors in the Badge embed. This can be achieved by setting the color attributes on the `appearance` object.

```typescript
badge.embedTemplatePage(sdk, element, {
  templateId,
  appearance: {
    colors: {
      primary: "#7A5AF8",
      neutral: "#667085",
    },
  },
});
```

## Mode

You can render the embed in light or dark mode by setting the `mode` attribute on the `appearance` object. By default the embed renders in light mode, `"light"`; dark mode can be rendered with `"dark"`.

```typescript
badge.embedTemplatePage(sdk, element, {
  templateId,
  appearance: {
    mode: "dark",
  },
});
```

## Fonts

The font used within the embed can be changed to match your application. There are two steps to configuring the font. The first is providing details on how to load the font and the second is setting the font family.

There are two options for loading font files, providing a CSS file that has `@font-face` declarations or providing font files and how they should be treated.

Once font loading is complete, the `fontFamily` can be set in the `appearance` object:

```typescript
badge.embedTemplatePage(sdk, element, {
  templateId,
  fonts: [
    {cssSrc: `https://fonts.googleapis.com/css2?family=Montserrat&display=swap`},
  ],
  appearance: {
    fontFamily: "Montserrat",
  },
});
```

### CSS Font

If you have a CSS file that loads your fonts, such as Google Fonts, you can directly use it for font loading by providing an object with the `cssSrc` attribute to the `font` list. See above example for including a font using this mechanism.

### Font Files

You can also load multiple font files by providing an object to the `font` list. This object supports the following format:

| Name                | [CSS `@font-face` Descriptor](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#descriptors) |
| :------------------ | :----------------------------------------------------------------------------------------------------- |
| `family` (required) | `font-family`                                                                                          |
| `src` (required)    | `src` the value provided will be wrapped in `url(...)`                                                 |
| `weight`            | `font-weight`                                                                                          |
| `style`             | `font-style`                                                                                           |
| `unicodeRange`      | `unicode-range`                                                                                        |

```typescript
badge.embedTemplatePage(sdk, element, {
  templateId,
  fonts: [
    {
      family: "Indigo",
      src: "https://example.com/indigo-light.woff2",
      weight: "300"
    },
    {
      family: "Indigo",
      src: "https://example.com/indigo-normal.woff2",
      weight: "500"
    },
  ],
  appearance: {
    fontFamily: "Montserrat",
  },
});
```