How to apply themes in React PDF Viewer?

Essential JS 2 PDF Viewer 

The Syncfusion PDF Viewer in React is a modern enterprise UI toolkit that has been built from the ground up to be lightweight, responsive, modular, and touch-friendly. It is also available in other frameworks such as JavaScript, Angular, ASP.NET MVC, and ASP.NET Core.

Refer to the following UG link for getting started with the React PDF Viewer.

https://ej2.syncfusion.com/react/documentation/pdfviewer/getting-started/

You can create the PDF Viewer web service project using the following KB link and provide that project URL to the serviceUrl property of the PDF Viewer.

Applying themes in PDF Viewer

The Syncfusion® React library has provided the following list of built-in themes:

• Google’s Material
• Microsoft Office’s Fabric
• Bootstrap
• High Contrast

Refer to the following link for more details.

https://ej2.syncfusion.com/react/documentation/appearance/theme/

Applying Themes from Node Modules

You can add the PDF Viewer component styles from the node modules as given below in App.css.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import "../node_modules/@syncfusion/ej2-react-pdfviewer/styles/material.css";
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; 
@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';
@import '../node_modules/@syncfusion/ej2-drawings/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inplace-editor/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css';

You can also refer to the following link:

https://ej2.syncfusion.com/react/documentation/pdfviewer/getting-started/#adding-css-reference

Applying Themes from CDN Links:

You can apply the PDF Viewer themes from the CDN links in Index.html. Refer to the following code for the same.

<link href=" https://cdn.syncfusion.com/ej2/bootstrap.css " rel="stylesheet">

You can refer the CDN links with specific version as given below.

<link href=" https://cdn.syncfusion.com/ej2/17.2.46/bootstrap.css" rel="stylesheet">

Go through the documentation link to get more details about CDN link.

Sample link:

https://www.syncfusion.com/downloads/support/directtrac/general/ze/PDF_Viewer_Themes1127428984

Conclusion:

I hope you enjoyed learning about how to apply themes in React PDF Viewer.