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.

The NutrientViewer.Configuration#theme property accepts one of six values:

• NutrientViewer.Theme.LIGHT
• NutrientViewer.Theme.DARK
• NutrientViewer.Theme.AUTO
• NutrientViewer.Theme.HIGH_CONTRAST_LIGHT
• NutrientViewer.Theme.HIGH_CONTRAST_DARK
• Custom theme object

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

You can set your preferred theme in the configuration object passed to NutrientViewer.load:

NutrientViewer.load({ theme: NutrientViewer.Theme.DARK });

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(opens in a new tab).