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;
/* dropdown mask */
--rp-drop-mask-background-color: #fafafa;
/* icon */
--rp-icon-disabled: #c6ccd2;
--rp-icon-font-size: 20px;
/* toolbar */
--rp-toolbar-background: #e2e6e9;
--rp-toolbar-border-color: #c6ccd2;
--rp-toolbar-padding: 8px;
--rp-toolbar-gap: 0.25rem;
/* 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;
/* 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;
/* 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-item-font-size: 14px;
--rp-property-item-font-weight: 400;
--rp-dialog-title-font-size: 18px;
--rp-dialog-title-font-weight: 600;
--rp-menu-item-icon-size: 16px;

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

JSX

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 style={{ height: '660px' }}>
            <RPPages />
          </RPDefaultLayout>
        </RPTheme>
      </RPProvider>
    </RPConfig>
  )
}

TSX

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 style={{ height: '660px' }}>
            <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.

JSX

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>
  )
}

TSX

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>
  )
}

2. Create a ChildPdfViewer component that passes the ParentPdfViewer component to its children.

JSX

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 style={{ height: '660px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPTheme>
    </ParentPdfViewer>
  )
}

TSX

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 style={{ height: '660px' }}>
          <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.