Use the last chosen theme

Assume that whenever users switch themes, you want to store the current theme, and use it when users come back.

In order to track the current theme, we can use on the `onSwitchTheme` option which is called after switching theme:

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

const handleSwitchTheme = (theme: string) => {
    localStorage.setItem('current-theme', theme);
};

<Viewer onSwitchTheme={handleSwitchTheme} />;

As you see in the sample code above, we store the current theme in the local storage under the key `current-theme`.

The chosen theme then can be retrieved from the local storage, and be set as the initial theme:

const theme =
    typeof localStorage !== 'undefined' && localStorage.getItem('current-theme')
        ? localStorage.getItem('current-theme')
        : 'light';

<Viewer theme={theme} />;

In the following demo, you can click the Switch theme button in the toolbar, and then refresh the whole page to see that the last theme is used:

(The sample code)

Use the last chosen theme

See also