This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /guides/flutter/user-interface/appearance-styling.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Flutter PDF viewer styling | Nutrient

Customize PDF viewer styling in Flutter

Markdown version of this page, suitable for AI agents and automation

Nutrient Flutter SDK supports per-platform appearance customization:

  • All platforms — Set light or dark appearance with appearanceMode on NutrientViewConfiguration.
  • Android — Pass Extensible Markup Language (XML) theme resources by name through AndroidViewConfiguration.
  • iOS — Set custom colors through the native SDK. Refer to the platform adapters guide.

Refer to the Nutrient view configuration(opens in a new tab) and Android view configuration(opens in a new tab) API references for configuration details.

Set the appearance mode

Set the appearanceMode option on NutrientViewConfiguration to switch the viewer between light and dark appearance on all platforms:

NutrientViewConfiguration(
  appearanceMode: AppearanceMode.night,
)

Customize Android styling

Nutrient Android SDK resolves colors from XML theme attributes at view inflation time. Define a theme in XML and reference it in AndroidViewConfiguration.

Create the theme resource

Add the following XML to android/app/src/main/res/values/nutrient_theme.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="viewer_bg">#FF1E1E2E</color>
    <color name="viewer_toolbar_bg">#FF181825</color>
    <color name="viewer_status_bar">#FF11111B</color>
    <color name="viewer_icons">#FFCDD6F4</color>
    <color name="viewer_icons_active">#FF89B4FA</color>


    <!-- Inherit from the SDK default theme to preserve base styles. -->
    <style name="MyApp.NutrientTheme" parent="PSPDFKit.Theme.Default">
        <item name="colorPrimary">@color/viewer_toolbar_bg</item>
        <item name="colorPrimaryDark">@color/viewer_status_bar</item>
        <item name="colorAccent">@color/viewer_icons_active</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionModeOverlay">true</item>
        <!-- Use the pspdf__ prefix for Nutrient-specific attributes. -->
        <item name="pspdf__backgroundColor">@color/viewer_bg</item>
        <item name="pspdf__actionBarIconsStyle">@style/MyApp.ActionBarIcons</item>
        <item name="pspdf__contextualToolbarStyle">@style/MyApp.ContextualToolbar</item>
    </style>


    <style name="MyApp.ActionBarIcons" parent="PSPDFKit.ActionBarIcons">
        <item name="pspdf__iconsColor">@color/viewer_icons</item>
        <item name="pspdf__iconsColorActivated">@color/viewer_icons_active</item>
    </style>


    <style name="MyApp.ContextualToolbar" parent="PSPDFKit.ContextualToolbar">
        <item name="pspdf__iconsColor">@color/viewer_icons</item>
        <item name="pspdf__iconsColorActivated">@color/viewer_icons_active</item>
    </style>
</resources>

Reference the theme from Flutter

Set defaultThemeResource to the XML style name:

NutrientViewConfiguration(
  androidConfig: AndroidViewConfiguration(
    // The name must match the style name in the XML resource exactly.
    defaultThemeResource: 'MyApp.NutrientTheme',
  ),
)

Add dark appearance support

Provide separate themes for light and dark modes:

NutrientViewConfiguration(
  androidConfig: AndroidViewConfiguration(
    defaultThemeResource: 'MyApp.NutrientTheme.Light',
    // Applied automatically when the device is in dark mode.
    darkThemeResource: 'MyApp.NutrientTheme.Dark',
  ),
)

To customize additional components, such as search, thumbnails, and dialogs, add more pspdf__ attributes. Refer to the Nutrient Android appearance styling guide for the full list of attributes.

Customize iOS styling

On iOS, the appearanceMode setting controls light and dark appearance. To set custom colors, refer to the platform adapters guide to access the native PSPDFKit.SDK.shared.styleManager and appearance APIs directly from your adapter subclass. Refer to the Nutrient iOS appearance styling guide for the native API surface.

The ThemeConfiguration, ToolbarTheme, and AnnotationToolbarTheme classes — set with PdfConfiguration.themeConfiguration — are part of the legacy method-channel API and aren’t available on NutrientViewConfiguration.

Troubleshoot appearance styling

Use these checks to resolve common appearance styling issues:

  • Android theme not applying — Verify that the style name matches exactly. Run flutter clean && flutter build apk to pick up resource changes.
  • Android toolbar icons use the wrong color — Set pspdf__backgroundColor for the viewer and colorPrimary for the toolbar. Don’t set android:colorBackground.
  • System theme overrides colors — Set appearanceMode: AppearanceMode.defaultMode in NutrientViewConfiguration to prevent the system appearance from overriding custom colors.