Open a ticket

Chat with us

Terminalworks ASP.NET Core PDF Viewer

Terminalworks ASP.NET Core PDF Viewer

Changing the theme

Creating custom CSS theme

Translating UI and mesages

Click or drag to resize

Changing the theme

You can use one of already built-in themes or you can create yours.

In current version, available built-in themes are:

blue-circle
blue-element
blue-grey
colorful-morphism
dark-cyan
dynamic-purple
light
purple-blue
red-purple
forest-brown
white-shapes

List of available built-in themes can be obtained by calling from Javascript:

Javascript example

window.TWPdfViewerUtil.getBuiltInThemes();

Must have id="tw-web-theme", otherwise it will not work changing theme through Javascript.

There are two ways to change the theme:

Directly in HTML

HTML example

<link rel="stylesheet" href="/_content/Terminalworks.PdfViewer.AspNetCore/css/themes/{THEME_NAME}/tw-pdf-viewer-theme.css" id="tw-web-theme" />

Example:

HTML example

<link rel="stylesheet" href="/_content/Terminalworks.PdfViewer.AspNetCore/css/themes/white-shapes/tw-pdf-viewer-theme.css" id="tw-web-theme" />

Or if you're using your custom theme:

HTML example

<link rel="stylesheet" href="{URL_TO_YOUR_CSS_FILE}" id="tw-web-theme" />

From Javascript
Using one of the built-in themes:
Javascript example
Copy
```
window.TWPdfViewerUtil.changeThemeByName("{THEME_NAME}");
```
Example:
Javascript example
Copy
```
window.TWPdfViewerUtil.changeThemeByName("blue-circle");
```
or if you are using your custom theme:
Javascript example
Copy
```
window.TWPdfViewerUtil.changeThemeBySrcUrl("{URL_TO_YOUR_CSS_FILE}");
```
example:
Javascript example
Copy
```
window.TWPdfViewerUtil.changeThemeBySrcUrl("/css/custom-theme.css");
```
In both ways, every instance of TWPdfViewer on-page will be affected.

See Also

Other Resources

How to apply license?

Creating custom CSS theme

Copyright © 2024 Terminalworks. All Rights Reserved