> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/ui-customization/customizing-styles.md).
# Customize WebViewer JavaScript PDF Viewer UI Styles: Buttons, Panels, and Modals
Learn how to customize WebViewer UI with Modular UI, change color themes, CSS properties, and access DOM elements for a seamless user experience. Explore styling options and enhance your WebViewer int
WebViewer UI supports style customizations using an API, through a CSS file or using the Modular UI.
## Modular WebViewer UI
See [this guide](/web/ui-customization/modular-ui/getting-started.md) for more information about styling WebViewer with Modular UI.
## Changing color theme
See [this guide](/web/ui-customization/themes.md) for more information about changing the theme.
## Changing CSS properties
If you want to change more CSS properties, you can use a custom stylesheet to define them using normal CSS selectors.
To make the customization easier and consistent, WebViewer UI provides 5 top level classes:
* Button
* Panel
* Overlay
* Popup
* Modal
**Example**
WebViewer({
licenseKey: 'visitor.claims.wvKey || "YOUR_LICENSE_KEY"',
path: 'lib',
css: 'path/to/stylesheet.css'
}, document.getElementById('viewer'));
{% tabs %}
{% tab title="CSS" %}
{% code lineNumbers="true" %}
```css
.Button.Icon {
color: red;
}
.Panel.open {
transition: all ease 0.5s;
}
```
{% endcode %}
{% endtab %}
{% endtabs %}
## Accessing DOM directly
In WebViewer 11.0 and later, Web Components with the Modular UI is the default. However, WebViewer can still be loaded using an iframe, if desired. In versions prior to 11.0, the iframe-based implementation was the default.
Direct DOM access is supported in both approaches, but the method for accessing the DOM depends on which mode you use. Select either the Web Components tab or the iframe tab below based on your setup. The [Web Component vs Iframe article](/web/ui-customization/web-component-vs-iframe.md) provides more detail about the differences.
{% hint style="warning" %}
**Avoid Direct DOM Manipulation**
While it is technically possible to access the iframe or Web Component DOM and modify UI elements using `querySelector`, this approach is strongly discouraged.
WebViewer's internal DOM structure is not part of the public API and may change between releases. Direct DOM manipulation can easily break when upgrading WebViewer, even between minor versions. We recommend using the provided APIs and configuration options instead, which are designed to be stable, supported, and forward-compatible.
{% endhint %}
{% tabs %}
{% tab title="Web Components" %}
WebViewer's UI will be loaded inside a modular UI.
{% code lineNumbers="true" %}
```js
WebViewer({
// ...
}).then(instance => {
const root = document.querySelector('apryse-webviewer').shadowRoot;
const topHeader = root.querySelector('[data-element="default-top-header"]');
});
```
{% endcode %}
{% endtab %}
{% tab title="Iframe" %}
WebViewer's UI will be loaded inside an iframe, so to access the UI DOM elements you can use the [iframeWindow property](https://sdk.apryse.com/api/web/UI.html#iframeWindow__anchor).
{% code lineNumbers="true" %}
```js
WebViewer({
// ...
}).then(instance => {
const iframeDoc = instance.UI.iframeWindow.document;
const zoomOverlay = iframeDoc.querySelector('[data-element="zoomOverlay"]');
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
## Applying the :host CSS selector with WebViewer WebComponent
When using an external CSS file in WebViewer with a WebComponent and styling a custom modal panel or an existing panel, you should utilize the `:host` CSS pseudo-class selector.
The `:host` CSS pseudo-class targets the shadow host of the shadow DOM where the CSS is applied, enabling you to select the WebViewer WebComponent element.
Here’s an example of how this is used.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer.WebCompnent({
css: 'path/main.css'
}).then(instance => {
// ...
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
And here is the content of our main.css file.
{% tabs %}
{% tab title="CSS" %}
{% code lineNumbers="true" %}
```css
.DocumentContainer {
background: tomato;
}
:host {
--icon-color: #00a5e4 !important;
}
```
{% endcode %}
{% endtab %}
{% endtabs %}
WebViewer with new background color and changed icon color
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.apryse.com/web/ui-customization/customizing-styles.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.