Changing Viewer Appearance

How to customize the color of Vue PDF Viewer’s appearance

To overwrite default styles, you can utilize :deep with the VPdfViewer wrapper CSS class, as demonstrated below:

<script setup>
    ...
</script>
<style scoped>
:deep(.vpv-container) {
    --vpv-container-border-color: lightblue;
    --vpv-toolbar-background-color: mintcream;
    --vpv-toolbar-color: black;
    --vpv-toolbar-border-color: lightblue;
    --vpv-icon-active-background: grey;
    --vpv-sidebar-content-background-color: mintcream;
    --vpv-sidebar-content_thumbnail-page-number-font-size: 10px;
    --vpv-sidebar-content_thumbnail-focused-border-color: darkslategrey;
    --vpv-pages-container-background: mintcream;
}

/* To override variables in dark mode */
:deep(.vpv-container__dark) {
    --vpv-container-border-color: blue;
    --vpv-toolbar-background-color: darkgrey;
    --vpv-toolbar-color: white;
    --vpv-toolbar-border-color: blue;
    --vpv-icon-active-background: grey;
    --vpv-sidebar-content-background-color: darkgrey;
    --vpv-sidebar-content_thumbnail-focused-border-color: white;
    --vpv-pages-container-background: darkgrey;
}
</style>

How to handle PDF Viewer's appearance from that of the parent's application

The Vue PDF Viewer's appearance is designed to be independent from a parent application's appearance.

The library provides the darkMode property as a two-way binding, using the v-model property. There is an @update:darkMode event for emitting theme changes from the library, allowing developers to update the parent application's appearance accordingly.

<script setup lang="ts">
    import { VPdfViewer } from '@vue-pdf-viewer/viewer'
    const src = '/your-pdf.pdf'
    const isDark = ref(true)
    const handleDarkModeChanged = (dark: boolean) => {
    isDark.value = dark
    // TODO: your logic
    }
</script>

// Using v-model as two-way binding
<template>
    <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer
        :src="src"
        v-model:darkMode="isDark"
    />
    </div>
</template>

// without v-model
<template>
    <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer
        :src="src"
        :darkMode="isDark"
        @update:darkMode="handleDarkModeChanged"
    />
    </div>
</template>