Theming

Every color the Angular components 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, src/styles.css. 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 components, 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 components only read the attribute there, so it has no effect on an inner element.

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

The Angular setup has a dark mode switch built from a <listens-toggle>, 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 component inside it, including through Angular's style scoping. Give a section a class and set its tokens there, in styles.css or in that component's own styles:

import { Component } from '@angular/core';

@Component({
  selector: 'app-checkout',
  template: `
    <section class="checkout">
      <!-- …every component in here uses the green -->
    </section>
  `,
  styles: `
    .checkout {
      --listens-accent: #0a7c42;
      --listens-interactive: #0a7c42;
      --listens-success: #0a7c42;
    }
  `,
})
export class Checkout {}

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 component

Tokens restyle every component at once. To change just one, give it a class. Angular components have no className input; the ordinary class attribute does the same job, and Angular keeps the kit's own classes beside yours. Because tokens are inherited, a class can retheme that one component:

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

<listens-toggle
  class="danger-toggle"
  label="Delete my data"
  command="delete my data"
/>

To restyle a component's parts, target the kit's CSS classes, which plain CSS also overrides without a fight. Each component's page lists its classes, state attributes and tokens under Styling hooks, for example the label button's. Those parts belong to the kit's components, so put rules for them in styles.css, where Angular's scoping doesn't apply.

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 components do. Their colors are inputs 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 Angular and React.