CSS variables reference

Every custom property the stylesheet reads, with its fallback value. Set them on the viewer or any ancestor.

Used by

Theming

Import

import '@kingtech/react-pdf-viewer/styles.css';

Settings

Name	Type	Default	Required	Description
`--rpv-accent`	`CSS value`	`#1976d2`	No	Accent: focus outlines outside the toolbar, progress, the current thumbnail.
`--rpv-button-disabled-fg`	`CSS value`	`rgba(255, 255, 255, 0.3)`	No	Disabled button color.
`--rpv-button-hover-bg`	`CSS value`	`rgba(255, 255, 255, 0.1)`	No	Button hover background.
`--rpv-button-size`	`CSS value`	`34px`	No	Icon button size.
`--rpv-error-bg`	`CSS value`	`#fdeded`	No	Error view background.
`--rpv-error-fg`	`CSS value`	`#5f2120`	No	Error view text.
`--rpv-error-icon`	`CSS value`	`#d32f2f`	No	Error view icon.
`--rpv-focus-ring`	`CSS value`	`2px solid #ffffff`	No	Focus outline of toolbar controls.
`--rpv-focus-ring-offset`	`CSS value`	`2px`	No	Focus outline offset.
`--rpv-font-family`	`CSS value`	`inherit`	No	Font of all viewer text.
`--rpv-fullscreen-bg`	`CSS value`	`#ffffff`	No	Fullscreen background.
`--rpv-icon-size`	`CSS value`	`24px`	No	Icon size.
`--rpv-label-font-size`	`CSS value`	`14px`	No	Zoom and page labels.
`--rpv-label-font-weight`	`CSS value`	`600`	No	Zoom and page labels.
`--rpv-menu-bg`	`CSS value`	`#ffffff`	No	Menu surface.
`--rpv-menu-border`	`CSS value`	`rgb(0 0 0 / 0.08)`	No	Menu border color.
`--rpv-menu-fg`	`CSS value`	`#1f2a30`	No	Menu item text.
`--rpv-menu-hover-bg`	`CSS value`	`rgb(84 100 110 / 0.12)`	No	Hovered and focused item.
`--rpv-menu-icon-fg`	`CSS value`	`#54646e`	No	Menu item icons.
`--rpv-menu-shadow`	`CSS value`	`0 10px 28px rgb(15 23 42 / 0.18), 0 2px 6px rgb(15 23 42 / 0.12)`	No	Menu elevation.
`--rpv-muted-fg`	`CSS value`	`rgba(0, 0, 0, 0.6)`	No	Secondary text.
`--rpv-overlay-z-index`	`CSS value`	`1300`	No	Stacking order of `overlay` fullscreen.
`--rpv-page-bg`	`CSS value`	`#ffffff`	No	Page background (and thumbnail placeholders).
`--rpv-page-border`	`CSS value`	`1px solid #dddddd`	No	Page border.
`--rpv-page-gap`	`CSS value`	`16px`	No	Space between pages (`layout="continuous"`).
`--rpv-page-input-bg`	`CSS value`	`rgb(0 0 0 / 0.22)`	No	Page-number input fill (`pageInput`).
`--rpv-page-input-border`	`CSS value`	`rgb(255 255 255 / 0.35)`	No	Page-number input border color.
`--rpv-page-input-chars`	`CSS value`	`2`	No	Width of the page-number input in characters; set automatically.
`--rpv-page-radius`	`CSS value`	`4px`	No	Page corner radius.
`--rpv-page-shadow`	`CSS value`	`0 2px 8px rgba(0, 0, 0, 0.1)`	No	Page shadow.
`--rpv-search-bg`	`CSS value`	`#ffffff`	No	Search bar background.
`--rpv-search-fg`	`CSS value`	`#37474f`	No	Search bar text.
`--rpv-search-highlight`	`CSS value`	`rgb(255 213 0 / 0.5)`	No	Search matches.
`--rpv-search-highlight-selected`	`CSS value`	`rgb(255 111 0 / 0.6)`	No	The current match.
`--rpv-selection-bg`	`CSS value`	`rgb(0 0 255 / 0.25)`	No	Text selection (`textLayer`).
`--rpv-text-button-fg`	`CSS value`	`#1565c0`	No	Retry and Cancel text buttons.
`--rpv-thumbnails-width`	`CSS value`	`148px`	No	Thumbnails sidebar width.
`--rpv-toolbar-bg`	`CSS value`	`#54646e`	No	Toolbar background.
`--rpv-toolbar-fg`	`CSS value`	`#ffffff`	No	Toolbar icons and text.
`--rpv-toolbar-gap`	`CSS value`	`8px`	No	Space between controls within a group.
`--rpv-toolbar-group-gap`	`CSS value`	`16px`	No	Space between the zoom, page and action groups when `pageInput` or `zoomReset` is on.
`--rpv-toolbar-margin-bottom`	`CSS value`	`40px`	No	Space below the toolbar.
`--rpv-toolbar-max-width`	`CSS value`	`482px`	No	Width cap.
`--rpv-toolbar-min-height`	`CSS value`	`48px`	No	Minimum height.
`--rpv-toolbar-padding-x`	`CSS value`	`16px`	No	Horizontal padding.
`--rpv-toolbar-radius`	`CSS value`	`8px`	No	Corner radius.
`--rpv-viewport-margin-bottom`	`CSS value`	`64px`	No	Space between the document and the toolbar.
`--rpv-viewport-max-height`	`CSS value`	`800px`	No	Document area height cap.
`--rpv-viewport-max-width`	`CSS value`	`650px`	No	Document area width cap.
`--rpv-viewport-min-height`	`CSS value`	`712px`	No	Document area minimum height.
`--rpv-viewport-min-height-compact`	`CSS value`	`400px`	No	Minimum height in compact mode.
`--rpv-viewport-padding`	`CSS value`	`0px`	No	Document area padding.
`--rpv-viewport-padding-compact`	`CSS value`	`16px`	No	Padding in compact mode.
`--rpv-viewport-padding-fullscreen`	`CSS value`	`32px`	No	Padding in fullscreen.

Source

packages/react-pdf-viewer/src/styles/pdf-viewer.css

Generated from content/react-pdf-viewer/reference/css-variables.schema.json. Do not edit by hand.