# Appearance

## Theme

Player color theme can be set by using `theme` attribute. Each theme can be additionally customized by CSS variables.

Currently available themes are:

* `light`
* `dark` (default)
* `preferred` (alternates between light and dark based on user's OS preference)

Example:

```html
<fw-storyblock channel="firework" theme="light"></fw-storyblock>
```

## Custom UI icons

Certain UI elements can be configured from external sources by providing their public url location. This includes button icons and reaction animation (Firework uses [Lottie](https://lottiefiles.com/) player).

SVG images will be injected into player DOM so they have access to `currentColor` variable and are properly colored based on theme. SVG images location has to comply with [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) policy against your origin. Other image types are rendered as background images, can't use theme color and don't require special treatment.

List of supported custom UI assets:

General

| Assest              | Description                                                    |
| ------------------- | -------------------------------------------------------------- |
| `ui_asset_back`     | Back button asset. Defaults to "<"                             |
| `ui_asset_close`    | Close button asset. Defaults to "x"                            |
| `ui_asset_next`     | Next item button asset (video, product image). Defaults to ">" |
| `ui_asset_previous` | Previous item button asset. Defaults to "<"                    |

Player

|                                     |                                                      |
| ----------------------------------- | ---------------------------------------------------- |
| `ui_asset_closed_captions_disabled` | CC button asset to indicate disabled state           |
| `ui_asset_closed_captions_enabled`  | CC button asset to indicate enabled state            |
| `ui_asset_fullscreen`               | Fullscreen button enlarges player to maximal size    |
| `ui_asset_menu`                     | More actions menu button asset. Defaults to "3 dots" |
| `ui_asset_muted`                    | Muted state button asset.                            |
| `ui_asset_unmuted`                  | Unmuted state button asset.                          |
| `ui_asset_pause`                    | Pause button asset.                                  |
| `ui_asset_play`                     | Play button asset.                                   |

Livestream

|                               |                                                                           |
| ----------------------------- | ------------------------------------------------------------------------- |
| `ui_asset_reaction`           | Reaction button. Defaults to "Heart"                                      |
| `ui_asset_reaction_animation` | Reaction button Lottie animation json. Use any lottiefiles.com animation. |

Commerce

|                          |                                                        |
| ------------------------ | ------------------------------------------------------ |
| `ui_asset_shopping_bag`  | Shopping bag button asset.                             |
| `ui_asset_shopping_cart` | Shopping cart button asset.                            |
| `ui_asset_product_tag`   | Product tag displayed on embed feed carousel thumbnail |

Example of configuration:

```html
<fw-storyblock
    channel="firework"
    theme="light"
    ui_asset_shopping_bag="https://raw.githubusercontent.com/tailwindlabs/heroicons/master/optimized/24/outline/shopping-bag.svg"
></fw-storyblock>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.firework.com/firework-for-developers/web/integration-guide/player/player-attributes/appearance-configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.