RPTheme

The RPTheme component is an optional component which allows you to customize the appearance of React PDF viewer by overriding default theme variables. It is particularly useful when you need different stylings for multiple PDF viewer instances in your application.

Props

Name	Type	Description
customDarkVariables	Record<string, string>	(optional) An object of CSS variables list for the dark theme
customVariables	Record<string, string>	(optional) An object of CSS variables list for the light theme

For a complete list of available CSS variables, please refer to our Overriding Styles tutorial.

Usage

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

  const customLightTheme = {
    '--rp-text-color': '#2563eb',
    '--rp-toolbar-background': '#ffffff',
    // Add more CSS variables as needed
  };
  const customDarkTheme = {
    '--rp-text-color': '#60a5fa',
    '--rp-toolbar-background': '#1f2937',
    // Add more CSS variables as needed
  };

  export const AppPdfViewer = () => {
    return (
      <RPConfig licenseKey={YOUR_LICENSE_KEY}>
        <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
          <RPTheme customVariables={customLightTheme} customDarkVariables={customDarkTheme}>
            <RPDefaultLayout style={{ height: '600px' }}>
              <RPPages />
            </RPDefaultLayout>
          </RPTheme>
        </RPProvider>
      </RPConfig>
    );
  };