Skip to main content

Colors & Styles

Customizing the design, styles, and theme of the widget player and inline player in the Speechify API is a common use-case for publishers. We make it super simple to customize the styles of elements in the Speechify API and add your own custom designs to the player.

Customizing Colors & Styles

For customizing colors and styles, we allow you to inject custom CSS for each element in the configuration using the styles property.

This property represents an object where each property is the property name of an element and the value is in React.js's CSS-in-JS format. An example and tables of styleable elements and their property names are below.

Note: since the Speechify API runs in a shadow DOM, CSS variables defined in your site's DOM cannot be used in the Speechify API since they will be out of scope.


Here's a quick example that makes the background color of the play button a shade of light blue:

).then(async (speechifyWidget) => {
// widget configuration
const config = {
rootElement: document.getElementById("article"),
useSpeechifyRoot: true,
// all your styles go in this object
customStyles: {
// each property key is the name of a Speechify API element
playButton: {
// include a React.js CSS-in-JS style object here
backgroundColor: "#2188ff",
transform: "scale(1.1)",
// initialize the widget with config and mount it on the page
const widget = speechifyWidget.makeSpeechifyExperience(config);
await widget.mount();

Styleable Elements

Here's a quick table of elements that can accept custom styles in the Speechify API configuration and their corresponding property names:

ElementProperty Name
Default colorprimaryColor
Default color for selectionprimaryColorSelected
Default color for highlightprimaryColorHighlight
Widget containerwidget
Inline player containerinlinePlayer
Inline player play buttoninlinePlayerPlayButton
Inline player headerinlinePlayerHeader
Widget play buttonplayButton
Skip buttonsskipButtons
Voice buttonvoiceButton
Speed buttonspeedButton
Seekbar thumbseekbarThumb
Timings text (ex: 0:05 and 3:35)timingsText
Minimize/Maximize buttonminimizeMaximizeButton
Drawer header (ex: Choose your listening speed)drawerHeader
Drawer description (ex: Get through articles 2-3x faster)drawerDescription
Voice option button (ex: Matthew)voiceOptionButton
Selected voicevoiceSelected
Speed sliderspeedSlider
Speed slider thumbspeedSliderThumb
Speed header (ex: Speed Reader)speedHeader
Speed description (ex: 90% productivity boost)speedDescription
Speed multiplier text (ex: 1.5x speed)speedMultiplier
Speed WPM text (ex: 200 WPM)speedWPM
Buttons on Feedback promptfeedbackButtons