Advanced
Kustomisasi Tampilan
Kustomisasi tampilan Nuxt PDF Kit.
Nuxt PDF Kit dibangun menggunakan Nuxt UI.
Variabel CSS (Nuxt UI)
Nuxt PDF Kit mengikuti token desain Nuxt UI. Kamu bisa mengubah tema viewer dengan menimpa (override) variabel CSS Nuxt UI secara global atau per-container. Mode gelap (Dark mode) ditangani secara otomatis oleh mode warna Nuxt (useColorMode()), jadi kamu tidak perlu menambahkan class dark secara manual.
assets/css/main.css
/* Tema Global */
:root, .light {
/* Warna brand */
--ui-primary: var(--ui-color-primary-500);
/* Permukaan / Latar */
--ui-bg: var(--color-white);
--ui-bg-muted: var(--ui-color-neutral-50);
--ui-bg-elevated: var(--ui-color-neutral-100);
/* Garis batas (Borders) */
--ui-border: var(--ui-color-neutral-200);
/* Teks */
--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);
}
/* Override per-viewer */
.my-viewer {
/* Contoh: latar elevated dengan sedikit tint brand dan warna primary */
--ui-primary: var(--ui-color-primary-600);
--ui-bg-elevated: color-mix(in oklab, var(--ui-primary) 6%, var(--ui-bg));
}
Class Tailwind
Terapkan class Tailwind pada container:
<template>
<div class="rounded-xl overflow-hidden shadow-2xl">
<NuxtPdfKit src="/document.pdf" />
</div>
</template>
Kustomisasi Toolbar
.npk-toolbar {
height: 56px !important;
background: linear-gradient(to right, #667eea, #764ba2);
}
Kustomisasi Halaman
.npk-page {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
Kustomisasi Scoped
<template>
<div class="my-viewer">
<NuxtPdfKit src="/document.pdf" />
</div>
</template>
<style scoped>
.my-viewer :deep(.npk-toolbar) {
/* Gunakan warna brand atau background kustom apa pun */
background: var(--ui-primary);
}
</style>