Advanced
Custom Styling
Customize the appearance of Nuxt PDF Kit.
Nuxt PDF Kit is built with Nuxt UI.
CSS Variables (Nuxt UI)
Nuxt PDF Kit follows Nuxt UI’s design tokens. You can theme the viewer by overriding Nuxt UI CSS variables globally or per-container. Dark mode is handled automatically by Nuxt’s color mode (useColorMode()), so you don’t need to add a dark class manually.
assets/css/main.css
/* Global theme */
:root, .light {
/* Brand color */
--ui-primary: var(--ui-color-primary-500);
/* Surface */
--ui-bg: var(--color-white);
--ui-bg-muted: var(--ui-color-neutral-50);
--ui-bg-elevated: var(--ui-color-neutral-100);
/* Borders */
--ui-border: var(--ui-color-neutral-200);
/* Text */
--ui-text: var(--ui-color-neutral-700);
--ui-text-muted: var(--ui-color-neutral-500);
--ui-text-highlighted: var(--ui-color-neutral-900);
}
.dark {
--ui-primary: var(--ui-color-primary-500);
--ui-bg: var(--ui-color-neutral-900);
--ui-bg-muted: var(--ui-color-neutral-800);
--ui-bg-elevated: var(--ui-color-neutral-800);
--ui-border: var(--ui-color-neutral-800);
--ui-text: var(--color-white);
--ui-text-muted: var(--ui-color-neutral-400);
--ui-text-highlighted: var(--color-white);
}
/* Per-viewer overrides */
.my-viewer {
/* Example: slight tinted elevated background and primary */
--ui-primary: var(--ui-color-primary-600);
--ui-bg-elevated: color-mix(in oklab, var(--ui-primary) 6%, var(--ui-bg));
}
Tailwind Classes
Apply Tailwind classes to the container:
<template>
<div class="rounded-xl overflow-hidden shadow-2xl">
<NuxtPdfKit src="/document.pdf" />
</div>
</template>
Toolbar Styling
.npk-toolbar {
height: 56px !important;
background: linear-gradient(to right, #667eea, #764ba2);
}
Page Styling
.npk-page {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
Scoped Styling
<template>
<div class="my-viewer">
<NuxtPdfKit src="/document.pdf" />
</div>
</template>
<style scoped>
.my-viewer :deep(.npk-toolbar) {
/* Use brand color or any custom background */
background: var(--ui-primary);
}
</style>