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

1. Import the plugin
import { themePlugin } from '@react-pdf-viewer/theme';
2. 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
3. Register the plugin
Register the theme plugin instance:
<Viewer 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

See also

Changelog

v2.6.0
  • First release