Theming

Every color the React controls draw comes from a --listens-* CSS custom property. The kit ships a light and a dark value for each one and switches between them on its own, so you only set the tokens you want to change.

Change a color

Set the token on :root in your global stylesheet. The kit's own styles sit in a cascade layer, @layer listens, and plain CSS always beats a layer, so your value wins without !important.

:root {
  /* Labels and content while the mic is open. */
  --listens-accent: #7c3aed;
  /* Focus, highlighted options, and checkbox, radio and slider fills. */
  --listens-interactive: #7c3aed;
}

A value set this way applies in light and dark mode alike. To give dark mode its own value, see different colors in light and dark.

Light and dark mode

The controls, the listening bar and the popup follow the device's light or dark setting automatically. To switch them yourself, set data-listens-theme to "dark" or "light" on the <html> element, and remove it to follow the device again. The controls only read the attribute there, so it has no effect on an inner element.

document.documentElement.setAttribute('data-listens-theme', 'dark');

The React setup has a dark mode switch built from a ListensToggle, so people can tap it or say "dark mode".

Different colors in light and dark

Dark mode turns on in two ways: the device is set to dark, or your app sets data-listens-theme="dark". Cover both with the same selectors the kit uses:

:root {
  --listens-accent: #7c3aed;
}

/* The device is dark, and the app hasn't forced light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-listens-theme='light']) {
    --listens-accent: #a78bfa;
  }
}

/* The app forced dark. */
:root[data-listens-theme='dark'] {
  --listens-accent: #a78bfa;
}

Theme one part of a page

Custom properties are inherited, so a token set on any element reaches every control inside it. Give a section a class and set its tokens there:

.checkout {
  --listens-accent: #0a7c42;
  --listens-interactive: #0a7c42;
  --listens-success: #0a7c42;
}

export function Checkout() {
  return (
    <section className="checkout">
      {/* …every control in here uses the green */}
    </section>
  );
}

This also keeps a section light on a dark page, or dark on a light one: set the whole palette on it, using the values in the token reference.

Style one control

Tokens restyle every control at once. To change just one, give it a className, which every control takes and merges onto its root element. Your class's rules beat the kit's layer, and because tokens are inherited, a class can also retheme that one control:

.danger-toggle {
  --listens-success: #e53935;
}

<ListensToggle
  className="danger-toggle"
  label="Delete my data"
  command="delete my data"
/>

Most controls also take classNames, which puts your classes on individual parts, such as a text field's label or input. Each control's page lists its classNames parts, CSS classes and the tokens it reads under Styling hooks, for example the label button's.

The listening bar and popup

The bar and the popup have their own stylesheet, with frosted light and dark backgrounds, so the tokens don't change them. They follow the device and data-listens-theme like the controls do. Their colors are props instead: waveColor on both, and backgroundColor and textColor on the popup. See the listening bar and popup page.

Token reference

The web kits share these tokens, so the same CSS restyles React and Angular.