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
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> )}
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
- Create a
ParentPdfViewer
component that passes theRPTheme
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> )}
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> )}
- Create a
ChildPdfViewer
component that passes theParentPdfViewer
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 style={{ height: '660px' }}> <RPPages /> </RPDefaultLayout> </RPTheme> </ParentPdfViewer> )}
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.