> ## Documentation Index
> Fetch the complete documentation index at: https://webviewer-docs.mupdf.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customization

## UI Customization

UI customization is useful for both branding the MuPDF WebViewer as well as adding or removing features.

### Visual Customization

The following visual customization is possible:

<img src="https://mintcdn.com/artifex/09YQ8poYGeg_xjKK/images/customization.png?fit=max&auto=format&n=09YQ8poYGeg_xjKK&q=85&s=6aded366d7b4b75ce87251fa3e08404a" alt="WebViewer Visual Customization" width="4047" height="2126" data-path="images/customization.png" />

<Note>
  **WCAG**
  Color contrast
  The default light and dark themes are designed to achieve WCAG 2.1 Level AAA conformance for text contrast and at least AA conformance for icons.
  Developers customizing the UI should use tools like the Firefox Accessibility Inspector to maintain proper contrast ratios.
</Note>

#### Set Main and Sub colors

This sets the main and sub colors - these reflect the button & text colors when these items are selected.

See: [`viewer.setColor()`](/api-reference/viewer/index#setcolor).

#### Set Background Color

Sets the background color behind the document page.

See [`viewer.setBackgroundColor()`](/api-reference/viewer/index#setbackgroundcolor).

#### Set Page Border Color

Sets the page border color.

See [`viewer.setPageBorderColor()`](/api-reference/viewer/index#setpagebordercolor).

#### Set Theme

Sets the theme for light mode, dark mode or system synchronization.

See [`viewer.setTheme()`](/api-reference/viewer/index#settheme).

#### Set Logo

Allows to set a logo in the top header area.

See [`viewer.setLogo()`](/api-reference/viewer/index#setlogo).

### Functional Customization

Sometimes you may want to alter the functionality of the **MuPDF WebViewer User Interface** by showing or hiding elements or by editing components.

The available customizations are possible:

#### Display/Hide UI

You can display/hide the UI elements using the [`viewer.setViewVisibility()`](/api-reference/viewer/index#setviewvisibility) function.

For example, if you want to hide the toolbar, you can do the following:

**Example #1**

```javascript theme={null}
webViewer.viewer.setViewVisibility({
  view: webViewer.refs.visibility.view.TOOLBAR,
  visibility: false,
});
```

Or to hide a specific button like the Redaction panel's Apply button in the side view, do:

**Example #2**

```javascript theme={null}
webViewer.viewer.setViewVisibility({
  view: webViewer.refs.visibility.view.SIDE_VIEW_REDACTION_APPLY,
  visibility: false,
});
```

Or to completely hide Annotation options, do:

**Example #3**

```javascript theme={null}
webViewer.viewer.setViewVisibility({
    view: webViewer.refs.visibility.view.TOOLBAR_ANNOTATION,
    visibility: false,
});
```

#### Add Buttons to Toolbar

You can add buttons to the toolbar using the [`viewer.addButton()`](/api-reference/viewer/index#addbutton) function.

For example, if you want to add a button to the toolbar to enter fullscreen, you can do the following:

**Example**

```javascript theme={null}
webViewer.viewer.addButton({
  buttons: [
    {
      position: 'TOOLBAR.LEFT_SECTION.FIRST',
      icon: webViewer.refs.icon.ENTER_FULLSCREEN,
      label: 'Enter fullscreen',
      onclick: () => {
        document.body.requestFullscreen();
      },
    },
  ],
});
```

<img src="https://mintcdn.com/artifex/09YQ8poYGeg_xjKK/images/toolbar-with-fullscreen-icon.png?fit=max&auto=format&n=09YQ8poYGeg_xjKK&q=85&s=5783a1ef154797d0a72bac117b74b851" alt="Toolbar with fullscreen icon" width="586" height="86" data-path="images/toolbar-with-fullscreen-icon.png" />

#### Add Context Menu

You can add items to the context menu (the pop-up menu you see when you right click on a document in MuPDF WebViewer) using the [`viewer.addContextMenu()`](/api-reference/viewer/index#addcontextmenu) function.

For example, if you want to add an item to rotate the page clockwise, you can do the following:

**Example**

```javascript theme={null}
webViewer.viewer.addContextMenu({
  menus: [
    {
      type: 'MENU',
      position: 'FIRST',
      icon: webViewer.refs.icon.ROTATE_CLOCKWISE,
      label: 'Rotate Clockwise',
      onclick: () => {
        webViewer.viewer.rotateClockwise();
      },
    },
  ],
});
```

<img src="https://mintcdn.com/artifex/09YQ8poYGeg_xjKK/images/context-menu-popup.png?fit=max&auto=format&n=09YQ8poYGeg_xjKK&q=85&s=7ed6eb8dee34dabd959dc243b45a7274" alt="Content menu with rotate icon" width="157" height="190" data-path="images/context-menu-popup.png" />

#### Define Document Panel

You can define the document panel using the [`viewer.defineDocumentPanel()`](/api-reference/viewer/index#definedocumentpanel) function.

For example, if you want to define the document panel to show the bookmark panel as **"Table of Contents"** and the annotation panel as **"Markups"** then you can do the following:

**Example**

```javascript theme={null}
webViewer.viewer.defineDocumentPanel({
  items: [
    {
      label: 'Table of Contents',
      icon: webViewer.refs.icon.BOOKMARK,
      onclick: () => {
        webViewer.viewer.togglePanel({
          type: webViewer.refs.panel.open.BOOKMARK,
        });
      },
    },
    {
      label: 'Markups',
      icon: webViewer.refs.icon.PENCIL,
      onclick: () => {
        webViewer.viewer.togglePanel({
          type: webViewer.refs.panel.open.ANNOTATION,
        });
      },
    },
  ],
});
```

<Note>"Bookmarks", "Table of Contents" and "Outline" are all synonomous terms - we can't guess which term you like most! 🙂</Note>

<img src="https://mintcdn.com/artifex/09YQ8poYGeg_xjKK/images/customize-document-panel.png?fit=max&auto=format&n=09YQ8poYGeg_xjKK&q=85&s=52c326d494f842392c12ff2410e2dcae" alt="Customized Document Panel" width="165" height="126" data-path="images/customize-document-panel.png" />

#### Define Text Selection Menu

You can define the text selection menu by using the [`viewer.defineTextSelectionMenu()`](/api-reference/viewer/index#definetextselectionmenu) function.

**Example**

```javascript theme={null}
webViewer.viewer.defineTextSelectionMenu({
  menus: [
    {
      label: 'Ask AI',
      onclick: async () => {
        console.log(`Selected Texts: ${(await webViewer.text.getSelected()).text}`);
      },
      icon: webViewer.refs.icon.SHARE,
    },
  ],
});
```

<img src="https://mintcdn.com/artifex/09YQ8poYGeg_xjKK/images/custom-text-selection-menu.png?fit=max&auto=format&n=09YQ8poYGeg_xjKK&q=85&s=c54fe424c734adfe5aaf5e17a1b7d79a" alt="Customized Text Selection Popup Panel" width="162" height="106" data-path="images/custom-text-selection-menu.png" />

#### Define Annotation Selection Menu

You can define the annotation selection menu by using the [`viewer.defineAnnotSelectMenu()`](/api-reference/viewer/index#defineannotselectmenu) function.

For example, if you want to define the annotation selection menu when selecting a highlight annotation, you can do something like the following:

**Example**

```javascript theme={null}
let html = `<div id='my-container'>
  <p>Testing custom HTML & CSS for Highlight tool</p>
  <button onclick='helloWorld()'>Press me!</button>
</div>`;

let css = `#my-container {
  width:200px;
  height:200px;
  background-color: #FF00ff;
  color:#000;
  font-size:12px;
  margin:10px;
}`;

let js = `function helloWorld() {
  let myObj = document.getElementById('my-container')
  myObj.innerHTML='Hello World!'
}`;

webViewer.viewer.defineAnnotSelectMenu({
  html: html,
  style: css,
  script: js,
  tool: webViewer.refs.annotation.tool.HIGHLIGHT,
})
```

<img src="https://mintcdn.com/artifex/09YQ8poYGeg_xjKK/images/customize-annotation-popup.png?fit=max&auto=format&n=09YQ8poYGeg_xjKK&q=85&s=e3f4c0a9e4275da28815f9eed51b9a3c" alt="Customized Annotation Popup Panel" width="583" height="313" data-path="images/customize-annotation-popup.png" />

<Tip>Ensure to set dimensions and font sizes in your CSS and scope your content correctly. We recommend using your company namespacing for the HTML DOM objects, CSS references as well as JavaScript!</Tip>

#### Define When to Show the Context Menu

Normally when viewing a document the user can right-click on the document to activate the quick shortcut context menu:

<img src="https://mintcdn.com/artifex/09YQ8poYGeg_xjKK/images/context-menu-popup.png?fit=max&auto=format&n=09YQ8poYGeg_xjKK&q=85&s=7ed6eb8dee34dabd959dc243b45a7274" alt="WebViewer Context Menu with Annotation options" width="157" height="190" data-path="images/context-menu-popup.png" />

But what if you'd like to show this menu *as soon as a user selects* text?

In this case you would need to use an event listener which detects if text is indeed selected and then opens the context menu by using the [`viewer.openContextMenu()`](/api-reference/viewer/index#opencontextmenu) function.

**Example**

```javascript theme={null}
webViewer.addEventListener(webViewer.refs.event.type.TEXT_SELECTION_CHANGE, (e) => {
  function getSelectedText() {
    webViewer.text.getSelected().then(successCallbackGetText, failureCallbackGetText)
  }

  function successCallbackGetText(result) {
    if (result) {
      webViewer.viewer.openContextMenu();
    }
  }

  function failureCallbackGetText(error) {
    console.error(`Error: ${error}`);
  }

  getSelectedText();
});
```

#### Define the Right Click Action

If required the behaviour for the right-click option can be overridden by using the [`viewer.defineRightClickAction()`](/api-reference/viewer/index#definerightclickaction) function.

**Example**

```javascript theme={null}
webViewer.viewer.defineRightClickAction({onclick:myFunc})

function myFunc() {
  alert("Your JS here!");
}
```