Changing the Viewer's Appearance

Customize the color of the Viewer’s appearance

To override the default styles of the React PDF, you can set custom values for customVariables and customDarkVariables in RPTheme. These variables allow you to change various appearance aspects (e.g., text color) in both light and dark modes.

JSX

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

export const AppPdfViewer = () => {

  return (
      <RPConfig>
        <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
          <RPTheme
            // Set light mode text color
            customVariables={{ '--rp-text-color': 'green' }}
            // Set dark mode text color
            customDarkVariables={{ '--rp-text-color': 'yellow' }}
          >
            <RPDefaultLayout>
              <RPPages/>
            </RPDefaultLayout>
          </RPTheme>
        </RPProvider>
      </RPConfig>
    )
}

TSX

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

export const AppPdfViewer = () => {

  return (
      <RPConfig>
        <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
          <RPTheme
            // Set light mode text color
            customVariables={{ '--rp-text-color': 'green' }}
            // Set dark mode text color
            customDarkVariables={{ '--rp-text-color': 'yellow' }}
          >
            <RPDefaultLayout>
              <RPPages/>
            </RPDefaultLayout>
          </RPTheme>
        </RPProvider>
      </RPConfig>
  )
}

How to handle PDF Viewer’s appearance from that of the parent’s application

React PDF is designed to function independently of the parent application’s appearance. However, you can control its theme using the darkMode prop, which can be managed via state.

Example Implementation

JSX

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

// PDF Viewer component that supports light and dark modes
export const AppPdfViewer = ({ isDarkMode }) => {
  return (
    <RPConfig>
      <RPProvider
        src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf"
        darkMode={isDarkMode}
      >
        <RPDefaultLayout>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

TSX

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

// PDF Viewer component that supports light and dark modes
export const AppPdfViewer = ({ isDarkMode }: { isDarkMode: boolean }) => {
  return (
    <RPConfig>
      <RPProvider
        src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf"
        darkMode={isDarkMode}
      >
        <RPDefaultLayout>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

Parent Component

JSX

import { useState } from 'react'
import { AppPdfViewer } from './AppPdfViewer'

function App() {
  // State to manage light and dark mode
  const [isDarkMode, setIsDarkMode] = useState(false)

  return (
    <div className="container">
      <button onClick={() => setIsDarkMode(!isDarkMode)}>{isDarkMode ? 'light' : 'dark'}</button>
      <AppPdfViewer isDarkMode={isDarkMode} />
    </div>
  )
}

TSX

import { useState } from 'react'
import { AppPdfViewer } from './AppPdfViewer'

function App() {
  // State to manage light and dark mode
  const [isDarkMode, setIsDarkMode] = useState(false)

  return (
    <div className="container">
      <button onClick={() => setIsDarkMode(!isDarkMode)}>{isDarkMode ? 'light' : 'dark'}</button>
      <AppPdfViewer isDarkMode={isDarkMode} />
    </div>
  )
}

This approach allows you to toggle between light and dark themes dynamically while maintaining the viewer’s independence from the parent application’s styling.