Skip to content
Logo dark Logo

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 (rp-variables.css) can be found in our GitHub.

Default variables

/* global */
--rp-font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
--rp-primary-color: #34affc;
--rp-border-radius: 4px;
--rp-text-color: #1c2024;
--rp-outline-color: #34affc;
--rp-font-size: 16px;
/* dropdown mask */
--rp-drop-mask-background-color: #fafafa;
/* loader */
--rp-loader-backdrop-color: #ffffffcc;
/* icon */
--rp-icon-disabled: #c6ccd2;
--rp-icon-font-size: calc(var(--rp-font-size) * 1.25);
/* toolbar */
--rp-toolbar-background: #e2e6e9;
--rp-toolbar-border-color: #c6ccd2;
--rp-toolbar-padding: .25rem;;
--rp-toolbar-gap: 0.25rem;
--rp-toolbar-size: 48px;
/* sidebar */
--rp-sidebar-width: 48px;
/* thumbnail */
--rp-thumbnail-border-color: #e2e6e9;
--rp-thumbnail-background-color: #ffffff;
--rp-thumbnail-active-color: #00000033;
--rp-thumbnail-padding-y: 16px;
/* button */
--rp-button-hover-background: #0000001a;
--rp-button-padding: 4px;
/* input */
--rp-input-padding: 8px;
--rp-input-border-radius: 6px;
--rp-input-background-color: #ffffff;
--rp-input-placeholder-color: #C6CCD2;
/* pages */
--rp-pages-background-color: #ffffff;
--rp-annotation-layer__link-hover-background: rgba(255, 255, 0, 0.2);
/* dropdown */
--rp-dropdown-background-color: #f1f2f4;
--rp-dropdown-padding: 4px;
--rp-dropdown-hover-background-color: #0000001a;
--rp-dropdown-separator-color: #e2e6e9;
--rp-dropdown-separator-margin: 4px;
--rp-dropdown-padding-menu-item: 8px;
--rp-dropdown-font-size: calc(var(--rp-font-size) * 0.875);
--rp-search-tool-dropdown-padding: 8px;
/* popover */
--rp-popover-font-size: calc(var(--rp-font-size) * 0.875);
--rp-popover-background-color: #f1f2f4;
--rp-popover-color: #1c2024;
--vpv-popover-border-color: #e2e6e9;
/* dialog */
--rp-overlay-background-color: #000000cc;
--rp-dialog-background-color: #f1f2f4;
--rp-properties-divider-color: #e2e6e9;
--rp-properties-divider-margin: 16px;
--rp-property-item-gap: 12px;
--rp-dialog-title-color: #1c2024;
--rp-property-item-label-color: #596673;
--rp-property-close-icon-size: calc(var(--rp-font-size) * 1.25);
--rp-property-item-font-size: calc(var(--rp-font-size) * 0.875);
--rp-property-item-font-weight: 400;
--rp-dialog-title-font-size: calc(var(--rp-font-size) * 1.125);
--rp-dialog-title-font-weight: 600;
--rp-menu-item-icon-size: 16px;
/* modal of print progress */
--rp-print-progress-background: #f1f2f4ff;
--rp-print-progress-color: #1c2024ff;
/* Drop zone  */
--rp-drop-zone-border: #c6ccd2;
--rp-drop-zone-font-color: #8c99a6;
--rp-drop-zone-font-size: calc(var(--rp-font-size) * 1.125);
--rp-drop-zone-background-color: #fafafa;
/* checkbox */
--rp-checkbox-border-radius: 4px;
--rp-checkbox-border-color: #E2E6E9;
/* highlight */
--rp-highlight-background-color: rgba(255, 255, 0, 1);
--vpv-text-layer-highlight-border-radius: var(--rp-border-radius);
--rp-current-highlight-background-color: rgba(255, 0, 0, 1);
/* tooltip */
--rp-tooltip-background-color: #1C2024;

How to override the default styles

To override default CSS styles, you may pass your own style into the RPTheme components. Here are a few examples:

Changing the toolbar’s background and text color

import { RPProvider, RPConfig, RPTheme, RPDefaultLayout, RPPages } from '@pdf-viewer/react'


export const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPTheme
          // Set your styles to the CSS variables
          customVariables={{
            '--rp-text-color': 'blue',
            '--rp-toolbar-background': '#434343'
          }}
          // Set your dark mode styles to the CSS variables
          customDarkVariables={{
            '--rp-text-color': 'green'
          }}
        >
          <RPDefaultLayout>
            <RPPages />
          </RPDefaultLayout>
        </RPTheme>
      </RPProvider>
    </RPConfig>
  )
}

Changing the toolbar’s icon color by overriding the parent RPTheme

  1. Create a ParentPdfViewer component that passes the RPTheme component to its children.
import { RPConfig, RPTheme, RPProvider } from '@pdf-viewer/react'


export const ParentPdfViewer = ({ children }) => {
  return (
    <RPConfig>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPTheme
          // Set your style to the CSS variable
          customDarkVariables={{
            '--rp-text-color': 'yellow'
          }}
        >
          {{ children }}
        </RPTheme>
      </RPProvider>
    </RPConfig>
  )
}
  1. Create a ChildPdfViewer component that passes the ParentPdfViewer component to its children.
import { RPTheme, RPDefaultLayout, RPPages } from '@pdf-viewer/react'
import { ParentPdfViewer } from './ParentPdfViewer'


export const ChildPdfViewer = () => {
  return (
    <ParentPdfViewer>
      <RPTheme
        // Override the parent by setting your style to the CSS variable
        customDarkVariables={{
          '--rp-text-color': 'yellow'
        }}
      >
        <RPDefaultLayout>
          <RPPages />
        </RPDefaultLayout>
      </RPTheme>
    </ParentPdfViewer>
  )
}

In the example above, the layout will read the variable --rp-text-color from the RPTheme component from the nearest parent component. As for the dark mode, the layout will read the variable --rp-text-color which is yellow from the RPTheme component.