# rpv-theme-dark reference

Dark preset: add `className="rpv-theme-dark"` to the viewer to apply these values.

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