useDarkModeContext

The useDarkModeContext hook provides access to the dark mode state and functions for controlling dark mode in the React PDF.

Return Type

Name	Type	Description
darkMode	boolean	The current dark mode state (true = dark, false = light)
setDarkMode	React.Dispatch<React.SetStateAction<boolean>>	Function to update the dark mode state

Usage

To ensure the dark mode context can be accessed, you will need to use useDarkModeContext inside a component which is a child of RPProvider.

Here’s an example of using this hook to create a custom dark mode toggle component:

JSX

import {
  RPConfig,
  RPProvider,
  RPPages,
  RPDefaultLayout,
  useDarkModeContext
} from '@pdf-viewer/react'

const MainPdfViewer = ({ children, pdfSrc }) => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src={pdfSrc}>{children}</RPProvider>
    </RPConfig>
  )
}

const DarkModeButton = () => {
  const { darkMode, setDarkMode } = useDarkModeContext()
  return <button onClick={() => setDarkMode((prev) => !prev)}>{darkMode ? 'Light' : 'Dark'}</button>
}

export const AppPdfViewer = () => {
  return (
    <MainPdfViewer pdfSrc="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
      <DarkModeButton />
      <RPDefaultLayout>
        <RPPages />
      </RPDefaultLayout>
    </MainPdfViewer>
  )
}

TSX

import { type PropsWithChildren, type FC } from 'react'
import {
  RPConfig,
  RPProvider,
  RPPages,
  RPDefaultLayout,
  useDarkModeContext
} from '@pdf-viewer/react'

type MainPdfViewerProps = PropsWithChildren<{ pdfSrc: string }>

const MainPdfViewer = ({ children, pdfSrc }: MainPdfViewerProps) => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src={pdfSrc}>{children}</RPProvider>
    </RPConfig>
  )
}

const DarkModeButton: FC = () => {
  const { darkMode, setDarkMode } = useDarkModeContext()
  return <button onClick={() => setDarkMode((prev) => !prev)}>{darkMode ? 'Light' : 'Dark'}</button>
}

export const AppPdfViewer: FC = () => {
  return (
    <MainPdfViewer pdfSrc="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
      <DarkModeButton />
      <RPDefaultLayout>
        <RPPages />
      </RPDefaultLayout>
    </MainPdfViewer>
  )
}