Call us: (407) 567-0096
Open a ticket
Chat with us
USA flag German flag Spanish flag
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
Copy
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:

  1. Directly in HTML

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

    Example:

    HTML example
    Copy
    <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
    Copy
    <link rel="stylesheet" href="{URL_TO_YOUR_CSS_FILE}" id="tw-web-theme" />

  2. 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
Copyright © 2024 Terminalworks. All Rights Reserved

This website uses cookies to improve user experience. By using our website you consent to all cookies in accordance with our Cookie Policy. Privacy details