Customize the tour

The default theme is intentionally useful without configuration. It follows the system color scheme and recognizes .light, .dark, [data-theme="light"], and [data-theme="dark"].

Theme variables

Override variables on the tour root from application 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;
}

Import structure.css instead of style.css when your design system owns all visual rules. Set nuxtTour.css to false when application CSS imports an entry itself.

Replace card content

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

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

Import TourContent from @lupinum/nuxt-tour/vue. The host keeps ownership of the dialog wrapper, name fallback, focus scope, Escape, positioning, and cleanup. Use the supplied IDs so custom content remains correctly described.