---
title: "JavaScript PDF viewer dark mode | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/theming/dark-theme/"
md_url: "https://www.nutrient.io/guides/web/user-interface/theming/dark-theme.md"
last_updated: "2026-06-09T10:38:40.985Z"
description: "With Nutrient Web SDK it’s possible to change the interface to dark mode programmatically or based on device information."
---

# Enabling dark theme in our JavaScript PDF viewer

With Nutrient Web SDK, it’s possible to change the interface to dark mode programmatically or based on device information.

[Try for Free](https://www.nutrient.io/sdk/web/getting-started.md)

[Launch Demo](https://www.nutrient.io/demo/viewer-dark-theme)

The [`NutrientViewer.Configuration#theme`](https://www.nutrient.io/api/web/interfaces/Configuration.html#theme) property accepts one of six values:

- [`NutrientViewer.Theme.LIGHT`](https://www.nutrient.io/api/web/enums/NutrientViewer.Theme.html) — Light theme (default)

- [`NutrientViewer.Theme.DARK`](https://www.nutrient.io/api/web/enums/NutrientViewer.Theme.html) — Dark theme

- [`NutrientViewer.Theme.AUTO`](https://www.nutrient.io/api/web/enums/NutrientViewer.Theme.html) — Automatically matches system preference

- [`NutrientViewer.Theme.HIGH_CONTRAST_LIGHT`](https://www.nutrient.io/api/web/enums/NutrientViewer.Theme.html) — High contrast light theme for accessibility

- [`NutrientViewer.Theme.HIGH_CONTRAST_DARK`](https://www.nutrient.io/api/web/enums/NutrientViewer.Theme.html) — High contrast dark theme for accessibility

- [Custom theme object](https://www.nutrient.io/guides/web/user-interface/theming/custom-theme.md) — Your own custom theme

The default value is `NutrientViewer.Theme.LIGHT`, which is the light theme.

You can set your preferred theme in the [configuration object](https://www.nutrient.io/api/web/interfaces/Configuration.html#theme) passed to [`NutrientViewer.load`](https://www.nutrient.io/api/web/functions/NutrientViewer.load.html) ([try it in the Playground](https://www.nutrient.io/demo/sandbox?p=eyJ2IjoxLCJzZXR0aW5ncyI6eyJmaWxlTmFtZSI6ImJhc2ljLnBkZiJ9LCJqcyI6Ii8vIExvZyBhdmFpbGFibGUgdGhlbWVzIGJlZm9yZSBsb2FkaW5nXG5jb25zb2xlLmxvZyhcIkF2YWlsYWJsZSB0aGVtZXM6XCIsIE9iamVjdC5rZXlzKE51dHJpZW50Vmlld2VyLlRoZW1lKSk7XG5cbi8vIENvbmZpZ3VyYXRpb24gd2l0aCB0aGVtZVxuY29uc3QgY29uZmlndXJhdGlvbiA9IHtcbiAgLi4uYmFzZU9wdGlvbnMsXG4gIHRoZW1lOiBOdXRyaWVudFZpZXdlci5UaGVtZS5EQVJLLFxufTtcblxuLy8gTG9hZCBOdXRyaWVudCBXZWIgU0RLXG5OdXRyaWVudFZpZXdlci5sb2FkKGNvbmZpZ3VyYXRpb24pLnRoZW4oKGluc3RhbmNlKSA9PiB7XG4gIGNvbnNvbGUubG9nKFwiTnV0cmllbnQgV2ViIFNESyBzdWNjZXNzZnVsbHkgbG9hZGVkISFcIiwgaW5zdGFuY2UpO1xuICBcbiAgLy8gTG9nIHRoZW1lIGluZm9ybWF0aW9uXG4gIGNvbnNvbGUubG9nKFwiXFxuQ29uZmlndXJlZCB0aGVtZTpcIiwgY29uZmlndXJhdGlvbi50aGVtZSk7XG4gIFxuICBjb25zb2xlLmxvZyhcIlxcbkFsbCBhdmFpbGFibGUgdGhlbWVzOlwiKTtcbiAgT2JqZWN0LmVudHJpZXMoTnV0cmllbnRWaWV3ZXIuVGhlbWUpLmZvckVhY2goKFtrZXksIHZhbHVlXSkgPT4ge1xuICAgIGNvbnNvbGUubG9nKGAgICR7a2V5fTogXCIke3ZhbHVlfVwiYCk7XG4gIH0pO1xuICBcbiAgY29uc29sZS5sb2coXCJcXG5SZXNvdXJjZXM6XCIpO1xuICBjb25zb2xlLmxvZyhcIkFQSSBkb2NzOiBodHRwczovL3d3dy5udXRyaWVudC5pby9hcGkvd2ViL1wiKTtcbiAgY29uc29sZS5sb2coXCJHdWlkZXM6IGh0dHBzOi8vd3d3Lm51dHJpZW50LmlvL2d1aWRlcy93ZWIvXCIpO1xuICBcbiAgcmV0dXJuIGluc3RhbmNlOyAvLyBSZXR1cm4gaW5zdGFuY2UgZm9yIHBvdGVudGlhbCBjaGFpbmluZ1xufSk7IiwiY3NzIjoiLyogQWRkIHlvdXIgQ1NTIGhlcmUgKi9cblx0In0%253D)).

## Applying dark theme

Here’s a complete example of applying the dark theme:

```js

import NutrientViewer from "@nutrient-sdk/viewer";

// Get the container element where the viewer will be mounted.
const container = document.getElementById("nutrient-container");

NutrientViewer.load({
  container,
  document: "document.pdf",
  theme: NutrientViewer.Theme.DARK,
}).catch((error) => {
  console.error("Failed to load viewer:", error);
});

```

## Automatic theme based on system preference

`NutrientViewer.Theme.AUTO` will automatically choose the theme based on the user preferences and the `prefers-color-scheme` media query, which isn’t available in every browser. You can check the current browser support for [the `prefers-color-scheme` media query here](https://caniuse.com/?search=prefers-color-scheme).

```js

import NutrientViewer from "@nutrient-sdk/viewer";

const container = document.getElementById("nutrient-container");

NutrientViewer.load({
  container,
  document: "document.pdf",
  theme: NutrientViewer.Theme.AUTO,
}).catch((error) => {
  console.error("Failed to load viewer:", error);
});

```

## High contrast themes

For improved accessibility, you can use the high contrast themes:

```js

import NutrientViewer from "@nutrient-sdk/viewer";

const container = document.getElementById("nutrient-container");

// High contrast dark theme.
NutrientViewer.load({
  container,
  document: "document.pdf",
  theme: NutrientViewer.Theme.HIGH_CONTRAST_DARK,
}).catch((error) => {
  console.error("Failed to load viewer:", error);
});

```

## Changing theme at runtime

You can also change the theme after the viewer has loaded by using the `setViewState` method:

```js

import NutrientViewer from "@nutrient-sdk/viewer";

const container = document.getElementById("nutrient-container");

NutrientViewer.load({
  container,
  document: "document.pdf",
  theme: NutrientViewer.Theme.LIGHT,
}).then((instance) => {
    // Toggle to dark theme later.
    document.getElementById("dark-mode-toggle").addEventListener("click", () => {
      instance.setViewState((viewState) =>
        viewState.set("theme", NutrientViewer.Theme.DARK)
      );
    });
  }).catch((error) => {
    console.error("Failed to load viewer:", error);
  });

```
---

## Related pages

- [Customizing CSS styling in our JavaScript PDF viewer](/guides/web/customizing-the-interface/css-customization.md)
- [Customizing icons in our JavaScript PDF viewer](/guides/web/user-interface/theming/icons.md)
- [Customizing the theme of our JavaScript PDF viewer](/guides/web/user-interface/theming/custom-theme.md)