Customization and labels

Brand the default card, own the complete card body, and translate controls.

Brand the card and translate labels

Start with CSS variables. This keeps the tested layout, focus behavior, and responsive rules.

css

[data-tour-part='root'] {
  --tour-accent: #0f766e;
  --tour-accent-hover: #115e59;
  --tour-card-radius: 1rem;
  --tour-overlay-color: rgb(2 6 23 / 64%);
  --tour-spotlight-padding: 10px;
}

The default theme follows the system scheme. It also recognizes .light, .dark, [data-theme="light"], and [data-theme="dark"].

Translate the controls

vue

<TourHost
  :labels="{
    previous: 'Zurück',
    next: 'Weiter',
    finish: 'Fertig',
    skip: 'Tour überspringen',
    close: 'Tour schließen',
    pending: 'Nächster Schritt wird geladen',
    progress: (current, total) => `Schritt ${current} von ${total}`,
  }"
/>

Connect these values to the application translation system when the locale can change at runtime.

Replace the complete card body

Use the #card slot when variables are not sufficient.

vue

<script setup lang="ts">
import { TourContent } from '@lupinum/nuxt-tour/vue'
</script>

<template>
  <TourHost>
    <template #card="{ step, controller, titleId, descriptionId, pending }">
      <h2
        v-if="step.title"
        :id="titleId"
      >
        {{ step.title }}
      </h2>
      <div :id="descriptionId">
        <TourContent :step="step" />
      </div>
      <button
        :disabled="pending"
        @click="controller.next()"
      >
        Continue
      </button>
    </template>
  </TourHost>
</template>

The host still owns the dialog wrapper, positioning, focus scope, Escape, and cleanup. Use the supplied IDs so assistive technology receives the correct title and description.