Use the default button to switch themes

The theme plugin provides the `<SwitchThemeButton />` component that can be used to switch the current theme to the light or dark theme.

We can use it in the same way of using other plugins:

import { printPlugin } from '@react-pdf-viewer/print';

// Your render function
const themePluginInstance = themePlugin();
const { SwitchThemeButton } = themePluginInstance;

return (
    <div>
        <SwitchThemeButton />
        <Viewer plugins={[themePluginInstance]} />
    </div>
);

However, clicking the button does not change the viewer's theme. It is caused by the fact that the viewer's theme uses the `ThemeContext` to manage the theme, but it is not initialized yet.

In order to fix it, firstly we have to set the initial value for the context as following:

import { ThemeContext } from '@react-pdf-viewer/core';

const [currentTheme, setCurrentTheme] = React.useState('light');
const themeContext = { currentTheme, setCurrentTheme };

Then pass the initial value created above to the `ThemeContext`'s provider:

// Your render function
<ThemeContext.Provider value={themeContext}>
    <SwitchThemeButton />

    <Viewer plugins={[themePluginInstance]} theme={currentTheme} />
</ThemeContext.Provider>

It is worth noting that we also pass `currentTheme` to the `theme` option.

Updating the look and feel of the container

Assume that you also want to change the look and feel of the container based on the current theme. For example, the switching theme button is placed inside a custom toolbar, and we would like to change the toolbar styles depending on the current theme.

You can set the custom styles easily:

<div
    className={`rpv-core__viewer rpv-core__viewer--${currentTheme}`}
    style={{
        borderColor: currentTheme === 'dark' ? '#454647' : 'rgba(0, 0, 0, 0.3)',
    }}
>
    <SwitchThemeButton />

    <Viewer plugins={[themePluginInstance]} theme={currentTheme} />
</div>

(The sample code)

Use the default button to switch themes

Updating the look and feel of the container

See also