Theming

Theming in Guideway is free and complete: switch between built-in light and dark, override individual tokens, localize the button labels, or replace the tooltip entirely.

Light and dark

Set colorScheme on the provider. 'auto' follows the device.

<TourProvider tours={tours} colorScheme="auto">{/* ... */}</TourProvider>

The built-in lightTheme and darkTheme are exported if you want to read or extend them.

Override tokens

Pass a partial theme (a ThemeOverride); it is deep-merged over the chosen base, so you only set what you want to change.

<TourProvider
  tours={tours}
  theme={{
    accent: '#397fbc',
    overlayColor: 'rgba(11,13,18,0.8)',
    tooltip: { borderRadius: 20, maxWidth: 300, fontFamily: 'Hanken Grotesk' },
  }}
>
  {/* ... */}
</TourProvider>

Available tokens: overlayColor, accent, tooltip (backgroundColor, textColor, titleColor, borderRadius, padding, maxWidth, fontFamily), and labels. See GuidewayTheme.

Localize the labels

The built-in tooltip’s buttons are tokens too:

theme={{ labels: { next: 'Suivant', back: 'Retour', skip: 'Passer', done: 'Terminer' } }}

Custom tooltip

For full control, render your own tooltip. Provide tooltipComponent on the provider (applies to every step) or render on a single step (takes precedence). Your component receives the entire TooltipRenderProps contract.

import type { TooltipRenderProps } from 'guideway';

function MyTooltip({ step, stepIndex, totalSteps, isLast, next, skip }: TooltipRenderProps) {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>{step.title}</Text>
      <Text style={styles.body}>{step.body}</Text>
      <View style={styles.row}>
        <Pressable onPress={skip}><Text>Skip</Text></Pressable>
        <Pressable onPress={next}>
          <Text>{isLast ? 'Done' : `Next (${stepIndex + 1}/${totalSteps})`}</Text>
        </Pressable>
      </View>
    </View>
  );
}

<TourProvider tours={tours} tooltipComponent={MyTooltip}>{/* ... */}</TourProvider>

A custom tooltip controls only the popover; Guideway still measures the target and draws the spotlight.