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

# Theming

> Style the custom elements to match your brand with plain CSS or by editing the code you own.

The elements are deliberately minimal and unopinionated. There's no `theme`
attribute and no set of CSS variables to override. You have two ways to make
them yours. **Style them with ordinary CSS** from your page, or **edit the
source** the CLI copied into your project.

## Style with CSS

The elements render into the light DOM (no shadow root), so your page's CSS
reaches their internals directly, with no source edits required. Target the
element or the `<button>` it renders:

```css theme={null}
/* The elements ship without default styles, so add your own here. */
bw-player-provider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #111811;
  border-radius: 1rem;
  padding: 0.25rem;
}

/* The play/pause element renders a <button> child. */
bw-play-pause-button button {
  display: flex;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #6dbe47;
  color: white;
  cursor: pointer;
}
```

This is the quickest path. Rebrand the player without touching the copied
source at all.

## Edit the source

For changes CSS can't reach (different markup, custom icons, different default
layout), edit the files in your project (by default under
`@/registry/html/`).

`<bw-player-provider>` mounts the player but applies no styling of its own, so
its appearance is entirely up to your CSS (see above). Reach for the source when
CSS alone can't do it, for example to change an element's markup or its icons.

Each element renders a **default inline SVG** icon (the same art the real
BeyondWords player uses), pulled in from `icons.js`. To swap the icons, edit
them there, or change what the button renders in `PlayPauseButton.js`:

```js PlayPauseButton.js theme={null}
// Instead of the default icons:
// this._btn.innerHTML = isPlaying ? pauseCircleSvg(40) : playCircleSvg(40);
this._btn.innerHTML = isPlaying ? "<svg ...>…pause…</svg>" : "<svg ...>…play…</svg>";
```

## Dark mode

There's no dark-mode toggle baked in. Follow your app's scheme with ordinary
CSS, for example `prefers-color-scheme`:

```css theme={null}
@media (prefers-color-scheme: dark) {
  bw-player-provider {
    background: #111811;
    color: white;
  }
}
```

## Where to go deeper

The React track has a full worked example, the
[Minimal Player](/player-ui/react/minimal-player). It's the same components restyled
and recomposed into a clean, minimal bar. The same idea applies here. Change the
colors, icons and layout, and you have a custom player without touching
playback, analytics, ads or segments.