Skip to content

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 in our GitHub

css
--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);

For example: How to change the font style

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

An image of Vue PDF Viewer with a different font style