Skip to main content
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:
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:
PlayPauseButton.js

​
Dark mode

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

​
Where to go deeper

The React track has a full worked example, the 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.