# 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>
```