Overriding Style

CSS variables are provided to enable developers to overwrite them.

Listed below are some of the most commonly used variables. All other variables can be found at Github

--vpv-container-border-color: rgba(0, 0, 0, 0.3);
--vpv-toolbar-background-color: rgba(226, 230, 233, 1);
--vpv-toolbar-color: rgba(28, 32, 36, 1);
--vpv-toolbar-border-color: rgba(198, 204, 210, 1);
--vpv-loader-backdrop-color: rgba(255, 255, 255, 0.8);
--vpv-loader-animation-name: spin;
--vpv-icon-active-background: rgba(0, 0, 0, 0.1);
--vpv-sidebar-content-background: rgba(250, 250, 250, 1);
--vpv-sidebar-thumbnail_page-number-font-size: 12px;
--vpv-sidebar-thumbnail_focused-border-color: rgba(0, 0, 0, 0.2);
--vpv-pages-container-background: rgba(250, 250, 250, 1);

1. How to customize the color of VPV’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-variables) {
  --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-variables.vpv-variables__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>

2. How to adjust sm of the component container for web responsiveness

<style scoped>
  :deep(.vpv-variables) {
    --vpv-container-width-sm: 375px;
  }
</style>

Remark: If you don't want VPV to trigger the view change, you may set --vpv-container-width-sm to 0px.

3. How to change loader progress

Method 1: Override the loader image and/or the progress percentage

<template>
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
      <template #loaderImage>
        <!-- you can use image or svg tag -->
        <svg width="40px" height="40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
          <path
            fill="white"
            stroke="white"
            stroke-width="15"
            transform-origin="center"
            d="m148 84.7 13.8-8-10-17.3-13.8 8a50 50 0 0 0-27.4-15.9v-16h-20v16A50 50 0 0 0 63 67.4l-13.8-8-10 17.3 13.8 8a50 50 0 0 0 0 31.7l-13.8 8 10 17.3 13.8-8a50 50 0 0 0 27.5 15.9v16h20v-16a50 50 0 0 0 27.4-15.9l13.8 8 10-17.3-13.8-8a50 50 0 0 0 0-31.7Zm-47.5 50.8a35 35 0 1 1 0-70 35 35 0 0 1 0 70Z"
          ></path>
        </svg>
      </template>
      <template #loaderProgress="{ progress }">
        <div style="color: white">
          {{ progress }} % loading
        </div>
      </template>
    </VPdfViewer>
  </div>
</template>

<style scoped>
/* to replace the default mask color */
:deep(.vpv-variables) {
    --vpv-loader-backdrop-color: #7862ff;
    /* if you want to change the animation, you may set the name of "--vpv-loader-animation-name" css variable */
}
:deep(.vpv-variables__dark) {
    --vpv-loader-backdrop-color: white;
}
</style>

Method 2: Customize all elements of the progress loader

<template>
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
      <template #loader="{ loaded, progress }">
        <div v-if="!loaded" class="wrapper">
          {{ progress }}%
        </div>
      </template>
    </VPdfViewer>
  </div>
</template>
<style scoped>
  .wrapper {
    inset: 0;
    position: absolute;
    background: white;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

4. How to change font style

/* in component file that uses VPV */
<style>
:deep(.vpv-variables) {
    --vpv-font-family: Arial, Helvetica, sans-serif;
}
</style>