rpv-theme-auto reference
Automatic preset: add className="rpv-theme-auto" to apply the dark values only when the operating system prefers a dark color scheme.
Used by
Import
import '@kingtech/react-pdf-viewer/styles.css';Settings
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
--rpv-accent | CSS value | #90caf9 | No | Accent: focus outlines outside the toolbar, progress, the current thumbnail (dark value). |
--rpv-error-bg | CSS value | #160b0b | No | Error view background (dark value). |
--rpv-error-fg | CSS value | #f4c7c7 | No | Error view text (dark value). |
--rpv-error-icon | CSS value | #f44336 | No | Error view icon (dark value). |
--rpv-focus-ring | CSS value | 2px solid #90caf9 | No | Focus outline of toolbar controls (dark value). |
--rpv-fullscreen-bg | CSS value | #121212 | No | Fullscreen background (dark value). |
--rpv-menu-bg | CSS value | #2b363c | No | Menu surface (dark value). |
--rpv-menu-border | CSS value | rgb(255 255 255 / 0.08) | No | Menu border color (dark value). |
--rpv-menu-fg | CSS value | #eceff1 | No | Menu item text (dark value). |
--rpv-menu-hover-bg | CSS value | rgb(255 255 255 / 0.08) | No | Hovered and focused item (dark value). |
--rpv-menu-icon-fg | CSS value | #b0bec5 | No | Menu item icons (dark value). |
--rpv-muted-fg | CSS value | rgba(255, 255, 255, 0.7) | No | Secondary text (dark value). |
--rpv-page-border | CSS value | 1px solid #37474f | No | Page border (dark value). |
--rpv-page-shadow | CSS value | 0 2px 12px rgba(0, 0, 0, 0.6) | No | Page shadow (dark value). |
--rpv-text-button-fg | CSS value | #90caf9 | No | Retry and Cancel text buttons (dark value). |
--rpv-toolbar-bg | CSS value | #263238 | No | Toolbar background (dark value). |
--rpv-toolbar-fg | CSS value | #eceff1 | No | Toolbar icons and text (dark value). |
Source
packages/react-pdf-viewer/src/styles/pdf-viewer.css
Generated from content/react-pdf-viewer/reference/rpv-theme-auto.schema.json. Do not edit by hand.