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.

Example

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

import(
  "{CDNLinkToLibrary}"
).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:

Element	Property Name
Default color	primaryColor
Default color for selection	primaryColorSelected
Default color for highlight	primaryColorHighlight
Widget container	widget
Inline player container	inlinePlayer
Inline player play button	inlinePlayerPlayButton
Inline player header	inlinePlayerHeader
Widget play button	playButton
Skip buttons	skipButtons
Voice button	voiceButton
Speed button	speedButton
Seekbar	seekbar
Seekbar thumb	seekbarThumb
Timings text (ex: 0:05 and 3:35)	timingsText
Minimize/Maximize button	minimizeMaximizeButton
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 voice	voiceSelected
Speed slider	speedSlider
Speed slider thumb	speedSliderThumb
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 prompt	feedbackButtons