RPTheme
The RPTheme
component is an optional component which allows you to customize the appearance of React PDF 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> <RPPages /> </RPDefaultLayout> </RPTheme> </RPProvider> </RPConfig> );};