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 (try it in the Playground(opens in a new tab)):

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).