# CSS variables reference

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

## Used by

- [Theming](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/customization/theming.md)

## Import

```ts
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](https://github.com/kiralygyula92/react-pdf-viewer/blob/main/packages/react-pdf-viewer/src/styles/pdf-viewer.css#L90)