Theme plugin

The theme plugin provides components that can be used to switch between the light and dark themes.

Install

npm install '@react-pdf-viewer/theme';
The theme plugin is included in the toolbar and default-layout plugins

Usage

  • Import the plugin:
import { themePlugin } from '@react-pdf-viewer/theme';
  • Create the plugin instance:
const themePluginInstance = themePlugin();
The plugin instance themePluginInstance provides the following properties:
PropertyTypeDescriptionFrom
SwitchThemeReactElementCustomizable component to switch themes2.6.0
SwitchThemeButtonReactElementThe default button to switch themes2.6.0
SwitchThemeMenuItemReactElementThe default menu item to switch themes2.6.0
  • Finally, register the theme plugin instance:
<Viewer fileUrl="..." plugins={[themePluginInstance]} />

Properties

The theme plugin provides other properties as following:
import { DarkIcon, LightIcon } from '@react-pdf-viewer/theme';
PropertyTypeDescriptionFrom
DarkIconReactElementThe dark theme icon2.6.0
LightIconReactElementThe light theme icon2.6.0

Examples