Theming

React Native has no CSS, so the kit keeps its colors in a ListensTheme object. It's the same palette as the web kits' --listens-* tokens, with camelCase keys: --listens-text-secondary is textSecondary. Every control reads it, the provider takes your overrides, and useListensTheme() hands it to your own components.

Change a color

Pass the keys you want to change to the provider's theme prop. They're merged over the defaults for the device's light or dark setting, so every key you leave out keeps its usual value.

import { ListensProvider } from '@listenssoft/speechui-react-native';

const theme = {
  // Labels and content while the mic is open.
  accent: '#7c3aed',
  // Focus, highlighted options, and checkbox, radio and slider fills.
  interactive: '#7c3aed',
};

export default function App() {
  return (
    <ListensProvider licenseKey="YOUR_LICENSE_KEY" theme={theme}>
      {/* …the rest of your app */}
    </ListensProvider>
  );
}

These values apply in light and dark mode alike. To give dark mode its own values, 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, pass LISTENS_DARK_THEME or LISTENS_LIGHT_THEME as the provider's theme, and leave theme out to follow the device again.

The React Native 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

Spread your keys over a full theme for each mode, then pick one. Here the device decides; for an in-app switch, use your own state instead of scheme.

import {
  LISTENS_DARK_THEME,
  LISTENS_LIGHT_THEME,
  ListensProvider,
} from '@listenssoft/speechui-react-native';
import { useColorScheme } from 'react-native';

const light = { ...LISTENS_LIGHT_THEME, accent: '#7c3aed' };
const dark = { ...LISTENS_DARK_THEME, accent: '#a78bfa' };

export default function App() {
  const scheme = useColorScheme();
  return (
    <ListensProvider
      licenseKey="YOUR_LICENSE_KEY"
      theme={scheme === 'dark' ? dark : light}
    >
      {/* …the rest of your app */}
    </ListensProvider>
  );
}

Match your own components

Native text is black unless you give it a color, so text you render next to the controls can disappear in dark mode. useListensTheme() returns the active theme, with the provider's overrides already merged in, so your own views can use the same colors as the controls in either mode:

import { useListensTheme } from '@listenssoft/speechui-react-native';
import { Text, View } from 'react-native';

export function OrderTotal({ total }: { total: string }) {
  const theme = useListensTheme();
  return (
    <View
      style={{
        backgroundColor: theme.surface,
        borderColor: theme.border,
        borderWidth: 1,
        borderRadius: 8,
        padding: 12,
      }}
    >
      <Text style={{ color: theme.label }}>Total</Text>
      <Text style={{ color: theme.text, fontSize: 18 }}>{total}</Text>
    </View>
  );
}

Outside a provider, it returns the defaults for the device's setting.

Style one control

The theme restyles every control at once. React Native has no classes, so there's no className: to change just one control, pass it a style. Some controls also take narrower props, such as the label button's textStyle. Each control's page lists its style props and the theme keys it reads under Styling hooks, for example the label button's.

The listening bar and popup

The bar and the popup take their colors from the theme's barBackground and barText, so forcing a theme flips them too. To change one surface only, use its props: waveColor on both, and backgroundColor and textColor on the popup. See the listening bar and popup page.

Theme reference

Every key in ListensTheme, with its light and dark default. The first four groups match the web kits' tokens.