--- title: "Customizing the JavaScript PDF viewer theme | Nutrient SDK" canonical_url: "https://www.nutrient.io/guides/web/user-interface/theming/custom-theme/" md_url: "https://www.nutrient.io/guides/web/user-interface/theming/custom-theme.md" last_updated: "2026-05-25T06:31:34.603Z" description: "The dark theme guide mentions the different theme presets available in Nutrient Web SDK. Starting with Nutrient Web SDK 1.5." --- # Customizing the theme of our JavaScript PDF viewer The [dark theme][] guide mentions the different theme presets available in Nutrient Web SDK. Starting with Nutrient Web SDK 1.5, you can build your theme and use it in the Web Viewer. In addition to the presets we already provide, you can now create your own theme. ## Minimal theme starter If you’re just getting started with theming, here’s a minimal example that changes only the primary colors. You’ll still need to provide the complete theme object, but this shows the essential parts to customize: ```js import NutrientViewer from "@nutrient-sdk/viewer"; // Start with the default light theme and modify specific values. const minimalCustomTheme = { //... full theme object required (see complete example below) // Key sections to customize for quick branding: // - color.background.primary: Main background colors // - color.background.interactive: Button/link colors // - color.text.primary: Main text color // - color.border: Border colors }; const container = document.getElementById("nutrient-container"); NutrientViewer.load({ container, document: "document.pdf", theme: minimalCustomTheme, }).catch((error) => { console.error("Failed to load viewer:", error); }); ``` You cannot pass a partial theme object. You must provide the complete theme object, including properties you don’t want to change. Copy the full example below and modify only what you need. ## Applying a theme to the entire viewer To apply a theme to the entire viewer, you need to set the [`NutrientViewer.Configuration#theme`][theme property] property to your theme object ([try the CSS override approach in the Playground](https://www.nutrient.io/demo/sandbox?p=eyJ2IjoxLCJzZXR0aW5ncyI6eyJmaWxlTmFtZSI6ImJhc2ljLnBkZiJ9LCJqcyI6ImNvbnNvbGUubG9nKFwiTG9hZGluZyBOdXRyaWVudCB3aXRoIGN1c3RvbSB0aGVtZS4uLlwiKTtcblxuY29uc3QgY3VzdG9tVGhlbWUgPSB7XG4gIGVsZXZhdGlvbjoge1xuICAgIGxvdzogXCIwIDAgNHB4IDAgcmdiYSgwLCAwLCAwLCAwLjQpXCIsXG4gICAgbWVkaXVtOiBcIjAgNHB4IDE2cHggMCByZ2JhKDAsIDAsIDAsIDAuMTUpXCIsXG4gIH0sXG4gIG9wYWNpdHk6IHtcbiAgICBub25lOiBcIjBcIixcbiAgICBsb3c6IFwiMC4xXCIsXG4gICAgbWVkaXVtOiBcIjAuNVwiLFxuICAgIGhpZ2g6IFwiMC45XCIsXG4gIH0sXG4gIHJvdW5kZWQ6IHtcbiAgICB4czogXCIycHhcIixcbiAgICBzbTogXCI0cHhcIixcbiAgICBtZDogXCI4cHhcIixcbiAgICBsZzogXCIxMnB4XCIsXG4gICAgeGw6IFwiMTZweFwiLFxuICAgIFwiMnhsXCI6IFwiMjRweFwiLFxuICAgIGZ1bGw6IFwiOTk5OXB4XCIsXG4gIH0sXG4gIHNwYWNpbmc6IHtcbiAgICB4czogXCIycHhcIixcbiAgICBzbTogXCI0cHhcIixcbiAgICBtZDogXCI4cHhcIixcbiAgICBsZzogXCIxMnB4XCIsXG4gICAgeGw6IFwiMTZweFwiLFxuICAgIFwiMnhsXCI6IFwiMjRweFwiLFxuICAgIFwiM3hsXCI6IFwiMzJweFwiLFxuICAgIFwiNHhsXCI6IFwiNDBweFwiLFxuICAgIFwiNXhsXCI6IFwiNDhweFwiLFxuICAgIFwiNnhsXCI6IFwiNjRweFwiLFxuICAgIFwiN3hsXCI6IFwiODBweFwiLFxuICAgIFwiOHhsXCI6IFwiOTZweFwiLFxuICAgIFwiOXhsXCI6IFwiMTYwcHhcIixcbiAgfSxcbiAgY29sb3I6IHtcbiAgICBzdXBwb3J0OiB7XG4gICAgICBlcnJvcjoge1xuICAgICAgICBzdWJ0bGVyOiBcIiM3MTFiMDBcIixcbiAgICAgICAgc3VidGxlOiBcIiNiNTMwMDdcIixcbiAgICAgICAgbWVkaXVtOiBcIiNmZTdhNjhcIixcbiAgICAgICAgc3Ryb25nOiBcIiNmZmQ0Y2VcIixcbiAgICAgIH0sXG4gICAgICBzdWNjZXNzOiB7XG4gICAgICAgIHN1YnRsZXI6IFwiIzIyM2EwM1wiLFxuICAgICAgICBzdWJ0bGU6IFwiIzNDNjYxMlwiLFxuICAgICAgICBtZWRpdW06IFwiIzgwQ0MzNFwiLFxuICAgICAgICBzdHJvbmc6IFwiI2VjZmVkYVwiLFxuICAgICAgfSxcbiAgICAgIHdhcm5pbmc6IHtcbiAgICAgICAgc3VidGxlcjogXCIjNTYyODAwXCIsXG4gICAgICAgIHN1YnRsZTogXCIjYmQ1YTAwXCIsXG4gICAgICAgIG1lZGl1bTogXCIjZWI3ZjAwXCIsXG4gICAgICAgIHN0cm9uZzogXCIjZmZkNGExXCIsXG4gICAgICB9LFxuICAgICAgaW5mbzoge1xuICAgICAgICBzdWJ0bGVyOiBcIiMxOTBkOTRcIixcbiAgICAgICAgc3VidGxlOiBcIiM0NTM3ZGVcIixcbiAgICAgICAgbWVkaXVtOiBcIiM3NzdjZjBcIixcbiAgICAgICAgc3Ryb25nOiBcIiNkM2RjZmZcIixcbiAgICAgIH0sXG4gICAgfSxcbiAgICBmb2N1c2VkOiB7XG4gICAgICBkZWZhdWx0OiBcIiNGQjZGM0JcIixcbiAgICAgIGluc2V0OiBcIiM1QjFDMEZcIixcbiAgICB9LFxuICAgIGJhY2tncm91bmQ6IHtcbiAgICAgIHByaW1hcnk6IHtcbiAgICAgICAgc3VidGxlOiBcIiM1QjFDMEZcIixcbiAgICAgICAgbWVkaXVtOiBcIiM0MzEyMDdcIixcbiAgICAgICAgc3Ryb25nOiBcIiMxODA1MDFcIixcbiAgICAgIH0sXG4gICAgICBpbnRlcmFjdGl2ZToge1xuICAgICAgICBlbmFibGVkOiBcIiNGQjZGM0JcIixcbiAgICAgICAgaG92ZXJlZDogXCIjRkVCNjA5XCIsXG4gICAgICAgIGFjdGl2ZTogXCIjRkZDOTM4XCIsXG4gICAgICAgIHZpc2l0ZWQ6IFwiI0ZGQzkzOFwiLFxuICAgICAgICBkaXNhYmxlZDogXCJyZ2IoODQuNyUgMjguNiUgMTYuMSUgLyAwLjUpXCIsXG4gICAgICB9LFxuICAgICAgaW52ZXJzZToge1xuICAgICAgICBzdWJ0bGU6IFwiI0U5NTYzNVwiLFxuICAgICAgICBtZWRpdW06IFwiI0ZGQzkzOFwiLFxuICAgICAgICBzdHJvbmc6IFwiI0ZGRTdBOVwiLFxuICAgICAgfSxcbiAgICAgIHNlY29uZGFyeToge1xuICAgICAgICBzdWJ0bGU6IFwiIzc2MkIxQVwiLFxuICAgICAgICBtZWRpdW06IFwiI0E5MzkyMFwiLFxuICAgICAgICBzdHJvbmc6IFwiI0Q4NDkyOVwiLFxuICAgICAgfSxcbiAgICAgIG92ZXJsYXk6IHtcbiAgICAgICAgc3VidGxlOiBcInJnYigxMDAlIDkwLjYlIDY2LjMlIC8gMC4yNSlcIixcbiAgICAgICAgbWVkaXVtOiBcInJnYig5LjQxJSAxLjk2JSAwLjM5JSAvIDAuNSlcIixcbiAgICAgICAgaW50ZXJhY3RpdmU6IFwicmdiKDk4LjQlIDQzLjUlIDIzLjElIC8gMC4yNSlcIixcbiAgICAgIH0sXG4gICAgICBwb3NpdGl2ZToge1xuICAgICAgICBzdWJ0bGU6IFwiI0ZGQzkzOFwiLFxuICAgICAgICBtZWRpdW06IFwiI0ZFREU4OVwiLFxuICAgICAgICBzdHJvbmc6IFwiI0ZGRTdBOVwiLFxuICAgICAgICBpbnRlcmFjdGl2ZToge1xuICAgICAgICAgIGVuYWJsZWQ6IFwiIzVCMUMwRlwiLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9LFxuICAgIHRleHQ6IHtcbiAgICAgIHByaW1hcnk6IFwiI0ZGRTdBOVwiLFxuICAgICAgc2Vjb25kYXJ5OiBcIiNGRUI2MDlcIixcbiAgICAgIGhlbHBlcjogXCIjRkI2RjNCXCIsXG4gICAgICBwbGFjZWhvbGRlcjogXCIjRkI2RjNCXCIsXG4gICAgICBpbnZlcnNlOiBcIiM1QjFDMEZcIixcbiAgICAgIG9uaW50ZXJhY3RpdmU6IFwiIzVCMUMwRlwiLFxuICAgICAgaW50ZXJhY3RpdmU6IHtcbiAgICAgICAgZW5hYmxlZDogXCIjRkI2RjNCXCIsXG4gICAgICAgIGhvdmVyZWQ6IFwiI0ZFQjYwOVwiLFxuICAgICAgICBhY3RpdmU6IFwiI0ZGQzkzOFwiLFxuICAgICAgICB2aXNpdGVkOiBcIiNGRkM5MzhcIixcbiAgICAgICAgZGlzYWJsZWQ6IFwicmdiKDEwMCUgOTAuNiUgNjYuMyUgLyAwLjUpXCIsXG4gICAgICB9LFxuICAgIH0sXG4gICAgaWNvbjoge1xuICAgICAgcHJpbWFyeTogXCIjRkZFN0E5XCIsXG4gICAgICBzZWNvbmRhcnk6IFwiI0ZCNkYzQlwiLFxuICAgICAgaW52ZXJzZTogXCIjNUIxQzBGXCIsXG4gICAgICBvbmludGVyYWN0aXZlOiBcIiM1QjFDMEZcIixcbiAgICAgIGludGVyYWN0aXZlOiB7XG4gICAgICAgIGVuYWJsZWQ6IFwiI0ZCNkYzQlwiLFxuICAgICAgICBob3ZlcmVkOiBcIiNGRUI2MDlcIixcbiAgICAgICAgYWN0aXZlOiBcIiNGRkM5MzhcIixcbiAgICAgICAgdmlzaXRlZDogXCIjRkZDOTM4XCIsXG4gICAgICAgIGRpc2FibGVkOiBcInJnYigxMDAlIDkwLjYlIDY2LjMlIC8gMC41KVwiLFxuICAgICAgfSxcbiAgICB9LFxuICAgIGJvcmRlcjoge1xuICAgICAgc3VidGxlOiBcIiM3NjJCMUFcIixcbiAgICAgIG1lZGl1bTogXCIjQTkzOTIwXCIsXG4gICAgICBzdHJvbmc6IFwiI0Q4NDkyOVwiLFxuICAgICAgaW52ZXJzZTogXCIjRkZFN0E5XCIsXG4gICAgICBpbnRlcmFjdGl2ZToge1xuICAgICAgICBlbmFibGVkOiBcIiNGQjZGM0JcIixcbiAgICAgICAgaG92ZXJlZDogXCIjRkVCNjA5XCIsXG4gICAgICAgIGFjdGl2ZTogXCIjRkZDOTM4XCIsXG4gICAgICAgIHZpc2l0ZWQ6IFwiI0ZGQzkzOFwiLFxuICAgICAgICBkaXNhYmxlZDogXCIjRDg0OTI5XCIsXG4gICAgICB9LFxuICAgICAgcG9zaXRpdmU6IHtcbiAgICAgICAgaW50ZXJhY3RpdmU6IHtcbiAgICAgICAgICBlbmFibGVkOiBcIiM1QjFDMEZcIixcbiAgICAgICAgfSxcbiAgICAgICAgc3VidGxlOiBcIiNGRkM5MzhcIixcbiAgICAgICAgbWVkaXVtOiBcIiNGRUI2MDlcIixcbiAgICAgICAgc3Ryb25nOiBcIiNGQjZGM0JcIixcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbiAgdHlwb2dyYXBoeToge1xuICAgIGhlYWRpbmc6IHtcbiAgICAgIGgxOiB7XG4gICAgICAgIHJlZ3VsYXI6IHsgZm9udDogXCI0MDAgMnJlbS8xLjI1IC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWZcIiwgbGV0dGVyU3BhY2luZzogXCIwXCIgfSxcbiAgICAgICAgbWVkaXVtOiB7IGZvbnQ6IFwiNTAwIDJyZW0vMS4yNSAtYXBwbGUtc3lzdGVtLCBzYW5zLXNlcmlmXCIsIGxldHRlclNwYWNpbmc6IFwiMFwiIH0sXG4gICAgICAgIHNlbWlib2xkOiB7IGZvbnQ6IFwiNjAwIDJyZW0vMS4yNSAtYXBwbGUtc3lzdGVtLCBzYW5zLXNlcmlmXCIsIGxldHRlclNwYWNpbmc6IFwiMFwiIH0sXG4gICAgICB9LFxuICAgICAgaDI6IHtcbiAgICAgICAgcmVndWxhcjogeyBmb250OiBcIjQwMCAxLjc1cmVtLzEuMjUgLWFwcGxlLXN5c3RlbSwgc2Fucy1zZXJpZlwiLCBsZXR0ZXJTcGFjaW5nOiBcIjBcIiB9LFxuICAgICAgICBtZWRpdW06IHsgZm9udDogXCI1MDAgMS43NXJlbS8xLjI1IC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWZcIiwgbGV0dGVyU3BhY2luZzogXCIwXCIgfSxcbiAgICAgICAgc2VtaWJvbGQ6IHsgZm9udDogXCI2MDAgMS43NXJlbS8xLjI1IC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWZcIiwgbGV0dGVyU3BhY2luZzogXCIwXCIgfSxcbiAgICAgIH0sXG4gICAgICBoMzoge1xuICAgICAgICByZWd1bGFyOiB7IGZvbnQ6IFwiNDAwIDEuNXJlbS8xLjI1IC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWZcIiwgbGV0dGVyU3BhY2luZzogXCIwXCIgfSxcbiAgICAgICAgbWVkaXVtOiB7IGZvbnQ6IFwiNTAwIDEuNXJlbS8xLjI1IC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWZcIiwgbGV0dGVyU3BhY2luZzogXCIwXCIgfSxcbiAgICAgICAgc2VtaWJvbGQ6IHsgZm9udDogXCI2MDAgMS41cmVtLzEuMjUgLWFwcGxlLXN5c3RlbSwgc2Fucy1zZXJpZlwiLCBsZXR0ZXJTcGFjaW5nOiBcIjBcIiB9LFxuICAgICAgfSxcbiAgICAgIGg0OiB7XG4gICAgICAgIHJlZ3VsYXI6IHsgZm9udDogXCI0MDAgMS4zNzVyZW0vMS4yNSAtYXBwbGUtc3lzdGVtLCBzYW5zLXNlcmlmXCIsIGxldHRlclNwYWNpbmc6IFwiMFwiIH0sXG4gICAgICAgIG1lZGl1bTogeyBmb250OiBcIjUwMCAxLjM3NXJlbS8xLjI1IC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWZcIiwgbGV0dGVyU3BhY2luZzogXCIwXCIgfSxcbiAgICAgICAgc2VtaWJvbGQ6IHsgZm9udDogXCI2MDAgMS4zNzVyZW0vMS4yNSAtYXBwbGUtc3lzdGVtLCBzYW5zLXNlcmlmXCIsIGxldHRlclNwYWNpbmc6IFwiMFwiIH0sXG4gICAgICB9LFxuICAgICAgaDU6IHtcbiAgICAgICAgcmVndWxhcjogeyBmb250OiBcIjQwMCAxcmVtLzEuNSAtYXBwbGUtc3lzdGVtLCBzYW5zLXNlcmlmXCIsIGxldHRlclNwYWNpbmc6IFwiMC4xcHhcIiB9LFxuICAgICAgICBtZWRpdW06IHsgZm9udDogXCI1MDAgMXJlbS8xLjUgLWFwcGxlLXN5c3RlbSwgc2Fucy1zZXJpZlwiLCBsZXR0ZXJTcGFjaW5nOiBcIjAuMXB4XCIgfSxcbiAgICAgICAgc2VtaWJvbGQ6IHsgZm9udDogXCI2MDAgMXJlbS8xLjUgLWFwcGxlLXN5c3RlbSwgc2Fucy1zZXJpZlwiLCBsZXR0ZXJTcGFjaW5nOiBcIjAuMXB4XCIgfSxcbiAgICAgIH0sXG4gICAgICBoNjoge1xuICAgICAgICByZWd1bGFyOiB7IGZvbnQ6IFwiNDAwIDAuODc1cmVtLzEuNSAtYXBwbGUtc3lzdGVtLCBzYW5zLXNlcmlmXCIsIGxldHRlclNwYWNpbmc6IFwiMC4xcHhcIiB9LFxuICAgICAgICBtZWRpdW06IHsgZm9udDogXCI1MDAgMC44NzVyZW0vMS41IC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWZcIiwgbGV0dGVyU3BhY2luZzogXCIwLjFweFwiIH0sXG4gICAgICAgIHNlbWlib2xkOiB7IGZvbnQ6IFwiNjAwIDAuODc1cmVtLzEuNSAtYXBwbGUtc3lzdGVtLCBzYW5zLXNlcmlmXCIsIGxldHRlclNwYWNpbmc6IFwiMC4xcHhcIiB9LFxuICAgICAgfSxcbiAgICB9LFxuICAgIGxhYmVsOiB7XG4gICAgICBzbToge1xuICAgICAgICByZWd1bGFyOiB7IGZvbnQ6IFwiNDAwIDAuNjg4cmVtLzEuMjUgLWFwcGxlLXN5c3RlbSwgc2Fucy1zZXJpZlwiLCBsZXR0ZXJTcGFjaW5nOiBcIjAuMDVweFwiIH0sXG4gICAgICAgIG1lZGl1bTogeyBmb250OiBcIjUwMCAwLjY4OHJlbS8xLjI1IC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWZcIiwgbGV0dGVyU3BhY2luZzogXCIwLjA1cHhcIiB9LFxuICAgICAgICBzZW1pYm9sZDogeyBmb250OiBcIjYwMCAwLjY4OHJlbS8xLjI1IC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWZcIiwgbGV0dGVyU3BhY2luZzogXCIwLjA1cHhcIiB9LFxuICAgICAgfSxcbiAgICAgIG1kOiB7XG4gICAgICAgIHJlZ3VsYXI6IHsgZm9udDogXCI0MDAgMC43NXJlbS8xLjI1IC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWZcIiwgbGV0dGVyU3BhY2luZzogXCIwLjFweFwiIH0sXG4gICAgICAgIG1lZGl1bTogeyBmb250OiBcIjUwMCAwLjc1cmVtLzEuMjUgLWFwcGxlLXN5c3RlbSwgc2Fucy1zZXJpZlwiLCBsZXR0ZXJTcGFjaW5nOiBcIjAuMXB4XCIgfSxcbiAgICAgICAgc2VtaWJvbGQ6IHsgZm9udDogXCI2MDAgMC43NXJlbS8xLjI1IC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWZcIiwgbGV0dGVyU3BhY2luZzogXCIwLjFweFwiIH0sXG4gICAgICB9LFxuICAgICAgbGc6IHtcbiAgICAgICAgcmVndWxhcjogeyBmb250OiBcIjQwMCAwLjg3NXJlbS8xLjM3NSAtYXBwbGUtc3lzdGVtLCBzYW5zLXNlcmlmXCIsIGxldHRlclNwYWNpbmc6IFwiMC4xcHhcIiB9LFxuICAgICAgICBtZWRpdW06IHsgZm9udDogXCI1MDAgMC44NzVyZW0vMS4zNzUgLWFwcGxlLXN5c3RlbSwgc2Fucy1zZXJpZlwiLCBsZXR0ZXJTcGFjaW5nOiBcIjAuMXB4XCIgfSxcbiAgICAgICAgc2VtaWJvbGQ6IHsgZm9udDogXCI2MDAgMC44NzVyZW0vMS4zNzUgLWFwcGxlLXN5c3RlbSwgc2Fucy1zZXJpZlwiLCBsZXR0ZXJTcGFjaW5nOiBcIjAuMXB4XCIgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBib2R5OiB7XG4gICAgICBzbToge1xuICAgICAgICByZWd1bGFyOiB7IGZvbnQ6IFwiNDAwIDAuNzVyZW0vMS4zNzUgLWFwcGxlLXN5c3RlbSwgc2Fucy1zZXJpZlwiLCBsZXR0ZXJTcGFjaW5nOiBcIjAuMDVweFwiIH0sXG4gICAgICAgIG1lZGl1bTogeyBmb250OiBcIjUwMCAwLjc1cmVtLzEuMzc1IC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWZcIiwgbGV0dGVyU3BhY2luZzogXCIwLjA1cHhcIiB9LFxuICAgICAgICBzZW1pYm9sZDogeyBmb250OiBcIjYwMCAwLjc1cmVtLzEuMzc1IC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWZcIiwgbGV0dGVyU3BhY2luZzogXCIwLjA1cHhcIiB9LFxuICAgICAgfSxcbiAgICAgIG1kOiB7XG4gICAgICAgIHJlZ3VsYXI6IHsgZm9udDogXCI0MDAgMC44NzVyZW0vMS4zNzUgLWFwcGxlLXN5c3RlbSwgc2Fucy1zZXJpZlwiLCBsZXR0ZXJTcGFjaW5nOiBcIjAuMXB4XCIgfSxcbiAgICAgICAgbWVkaXVtOiB7IGZvbnQ6IFwiNTAwIDAuODc1cmVtLzEuMzc1IC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWZcIiwgbGV0dGVyU3BhY2luZzogXCIwLjFweFwiIH0sXG4gICAgICAgIHNlbWlib2xkOiB7IGZvbnQ6IFwiNjAwIDAuODc1cmVtLzEuMzc1IC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWZcIiwgbGV0dGVyU3BhY2luZzogXCIwLjFweFwiIH0sXG4gICAgICB9LFxuICAgICAgbGc6IHtcbiAgICAgICAgcmVndWxhcjogeyBmb250OiBcIjQwMCAxcmVtLzEuNSAtYXBwbGUtc3lzdGVtLCBzYW5zLXNlcmlmXCIsIGxldHRlclNwYWNpbmc6IFwiMC4xcHhcIiB9LFxuICAgICAgICBtZWRpdW06IHsgZm9udDogXCI1MDAgMXJlbS8xLjUgLWFwcGxlLXN5c3RlbSwgc2Fucy1zZXJpZlwiLCBsZXR0ZXJTcGFjaW5nOiBcIjAuMXB4XCIgfSxcbiAgICAgICAgc2VtaWJvbGQ6IHsgZm9udDogXCI2MDAgMXJlbS8xLjUgLWFwcGxlLXN5c3RlbSwgc2Fucy1zZXJpZlwiLCBsZXR0ZXJTcGFjaW5nOiBcIjAuMXB4XCIgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbn07XG5cbk51dHJpZW50Vmlld2VyLmxvYWQoe1xuICAuLi5iYXNlT3B0aW9ucyxcbiAgdGhlbWU6IGN1c3RvbVRoZW1lLFxufSkudGhlbigoaW5zdGFuY2UpID0%252BIHtcbiAgY29uc29sZS5sb2coXCJOdXRyaWVudCBsb2FkZWQgd2l0aCBjdXN0b20gdGhlbWUhXCIpO1xuICBjb25zb2xlLmxvZyhcIkN1c3RvbSBjb2xvcnM6IE9yYW5nZS9ZZWxsb3cgYWNjZW50IHdpdGggZGFyayBicm93biBiYWNrZ3JvdW5kXCIpO1xuICBjb25zb2xlLmxvZyhcIk5vdGljZSB0aGUgdG9vbGJhciBhbmQgVUkgZWxlbWVudHMgdXNlIHRoZSBjdXN0b20gY29sb3Igc2NoZW1lXCIpO1xufSk7XG4iLCJjc3MiOiIuUFNQREZLaXQtVG9vbGJhciB7XG4gIC0tYnVpLWNvbG9yLWJhY2tncm91bmQtcHJpbWFyeS1zdHJvbmc6ICMxYTFhMmU7XG4gIC0tYnVpLWNvbG9yLXRleHQtcHJpbWFyeTogI2VlZTtcbn1cbiJ9)): ```js import NutrientViewer from "@nutrient-sdk/viewer"; const customTheme = { // ═══════════════════════════════════════════════════════════════════════════ // Elevation — Box shadow values for depth/layering effects // Used for dropdowns, modals, tooltips, and floating elements // ═══════════════════════════════════════════════════════════════════════════ elevation: { low: "0 0 4px 0 rgba(0, 0, 0, 0.4)", // Subtle shadow for slight elevation medium: "0 4px 16px 0 rgba(0, 0, 0, 0.15)", // Prominent shadow for modals/dropdowns }, // ═══════════════════════════════════════════════════════════════════════════ // Opacity — Transparency values used throughout the UI // Applied to disabled states, overlays, and hover effects // ═══════════════════════════════════════════════════════════════════════════ opacity: { none: "0", // Fully transparent low: "0.1", // Barely visible (subtle overlays) medium: "0.5", // Semi-transparent (disabled states) high: "0.9", // Nearly opaque (hover overlays) }, // ═══════════════════════════════════════════════════════════════════════════ // Rounded — Border radius values for rounded corners // Applied to buttons, inputs, cards, and other UI elements // ═══════════════════════════════════════════════════════════════════════════ rounded: { xs: "2px", // Minimal rounding (table cells) sm: "4px", // Small rounding (buttons, inputs) md: "8px", // Medium rounding (cards, panels) lg: "12px", // Large rounding (modals) xl: "16px", // Extra large rounding "2xl": "24px", // Very rounded corners full: "9999px", // Fully rounded (pills, avatars) }, // ═══════════════════════════════════════════════════════════════════════════ // Spacing — Margin and padding values // Used for consistent spacing throughout the interface // ═══════════════════════════════════════════════════════════════════════════ spacing: { xs: "2px", // Tiny spacing (icon gaps) sm: "4px", // Small spacing (compact elements) md: "8px", // Medium spacing (standard padding) lg: "12px", // Large spacing (section padding) xl: "16px", // Extra large spacing "2xl": "24px", // Double extra large "3xl": "32px", // Section margins "4xl": "40px", // Large section gaps "5xl": "48px", // Major section spacing "6xl": "64px", // Page-level spacing "7xl": "80px", // Large page margins "8xl": "96px", // Extra large margins "9xl": "160px", // Maximum spacing }, // ═══════════════════════════════════════════════════════════════════════════ // Color — All color definitions for the theme // This is the most important section for visual customization // ═══════════════════════════════════════════════════════════════════════════ color: { // ───────────────────────────────────────────────────────────────────────── // Support colors — Semantic colors for status messages and alerts // Used in validation, notifications, and system feedback // ───────────────────────────────────────────────────────────────────────── support: { error: { subtler: "#711b00", // Darkest error (backgrounds) subtle: "#b53007", // Dark error (borders) medium: "#fe7a68", // Standard error (text, icons) strong: "#ffd4ce", // Light error (highlighted backgrounds) }, success: { subtler: "#223a03", // Darkest success subtle: "#3C6612", // Dark success medium: "#80CC34", // Standard success strong: "#ecfeda", // Light success }, warning: { subtler: "#562800", // Darkest warning subtle: "#bd5a00", // Dark warning medium: "#eb7f00", // Standard warning strong: "#ffd4a1", // Light warning }, info: { subtler: "#190d94", // Darkest info subtle: "#4537de", // Dark info medium: "#777cf0", // Standard info strong: "#d3dcff", // Light info }, }, // ───────────────────────────────────────────────────────────────────────── // Focused — Colors for focus rings and accessibility indicators // Critical for keyboard navigation and accessibility // ───────────────────────────────────────────────────────────────────────── focused: { default: "#FB6F3B", // Main focus ring color inset: "#5B1C0F", // Inset focus indicator }, // ───────────────────────────────────────────────────────────────────────── // Background — All background colors // Controls the visual appearance of surfaces and containers // ───────────────────────────────────────────────────────────────────────── background: { // Primary backgrounds — Main viewer surfaces primary: { subtle: "#5B1C0F", // Lightest primary background medium: "#431207", // Standard primary background strong: "#180501", // Darkest primary background (main canvas) }, // Interactive backgrounds — Buttons, links, clickable elements interactive: { enabled: "#FB6F3B", // Default button background hovered: "#FEB609", // Hovered button background active: "#FFC938", // Active/pressed button background visited: "#FFC938", // Visited link background disabled: "rgb(84.7% 28.6% 16.1% / 0.5)", // Disabled state }, // Inverse backgrounds — For contrast areas inverse: { subtle: "#E95635", medium: "#FFC938", strong: "#FFE7A9", }, // Secondary backgrounds — Sidebars, panels, cards secondary: { subtle: "#762B1A", medium: "#A93920", strong: "#D84929", }, // Overlay backgrounds — Modals, dropdowns, tooltips overlay: { subtle: "rgb(100% 90.6% 66.3% / 0.25)", // Light overlay medium: "rgb(9.41% 1.96% 0.39% / 0.5)", // Medium overlay interactive: "rgb(98.4% 43.5% 23.1% / 0.25)", // Interactive overlay }, // Positive backgrounds — Selection, highlights positive: { subtle: "#FFC938", medium: "#FEDE89", strong: "#FFE7A9", interactive: { enabled: "#5B1C0F", }, }, }, // ───────────────────────────────────────────────────────────────────────── // Text — All text colors // Controls readability and visual hierarchy of content // ───────────────────────────────────────────────────────────────────────── text: { primary: "#FFE7A9", // Main body text secondary: "#FEB609", // Secondary/muted text helper: "#FB6F3B", // Helper text, captions placeholder: "#FB6F3B", // Input placeholder text inverse: "#5B1C0F", // Text on light backgrounds oninteractive: "#5B1C0F", // Text on interactive elements (buttons) interactive: { enabled: "#FB6F3B", // Link text hovered: "#FEB609", // Hovered link text active: "#FFC938", // Active link text visited: "#FFC938", // Visited link text disabled: "rgb(100% 90.6% 66.3% / 0.5)", // Disabled text }, }, // ───────────────────────────────────────────────────────────────────────── // Icon — All icon colors // Usually matches text colors but can be customized separately // ───────────────────────────────────────────────────────────────────────── icon: { primary: "#FFE7A9", // Main icon color secondary: "#FB6F3B", // Secondary icon color inverse: "#5B1C0F", // Icons on light backgrounds oninteractive: "#5B1C0F", // Icons on buttons interactive: { enabled: "#FB6F3B", // Interactive icon hovered: "#FEB609", // Hovered icon active: "#FFC938", // Active icon visited: "#FFC938", // Visited state disabled: "rgb(100% 90.6% 66.3% / 0.5)", // Disabled icon }, }, // ───────────────────────────────────────────────────────────────────────── // Border — All border colors // Defines boundaries between UI elements // ───────────────────────────────────────────────────────────────────────── border: { subtle: "#762B1A", // Subtle borders (dividers) medium: "#A93920", // Standard borders strong: "#D84929", // Prominent borders inverse: "#FFE7A9", // Borders on dark backgrounds interactive: { enabled: "#FB6F3B", // Interactive element borders hovered: "#FEB609", // Hovered borders active: "#FFC938", // Active borders visited: "#FFC938", // Visited state disabled: "#D84929", // Disabled borders }, positive: { interactive: { enabled: "#5B1C0F", }, subtle: "#FFC938", medium: "#FEB609", strong: "#FB6F3B", }, }, }, // ═══════════════════════════════════════════════════════════════════════════ // Typography — Font definitions for all text styles // Controls font family, size, weight, and line height // Format: 'weight size/line-height font-family' // ═══════════════════════════════════════════════════════════════════════════ typography: { // ───────────────────────────────────────────────────────────────────────── // Headings — Title text styles (h1–h6) // ───────────────────────────────────────────────────────────────────────── heading: { h6: { regular: { font: '400 0.875rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, medium: { font: '500 0.875rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, semibold: { font: '600 0.875rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, }, h5: { regular: { font: '400 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, medium: { font: '500 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, semibold: { font: '600 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, }, h4: { regular: { font: '400 1.375rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, medium: { font: '500 1.375rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, semibold: { font: '600 1.375rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, }, h3: { regular: { font: '400 1.5rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, medium: { font: '500 1.5rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, semibold: { font: '600 1.5rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, }, h2: { regular: { font: '400 1.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, medium: { font: '500 1.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, semibold: { font: '600 1.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, }, h1: { regular: { font: '400 2rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, medium: { font: '500 2rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, semibold: { font: '600 2rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, }, }, // ───────────────────────────────────────────────────────────────────────── // Labels — UI labels, form labels, button text // ───────────────────────────────────────────────────────────────────────── label: { sm: { regular: { font: '400 0.688rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.05px", }, medium: { font: '500 0.688rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.05px", }, semibold: { font: '600 0.688rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.05px", }, }, md: { regular: { font: '400 0.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, medium: { font: '500 0.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, semibold: { font: '600 0.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, }, lg: { regular: { font: '400 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, medium: { font: '500 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, semibold: { font: '600 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, }, }, // ───────────────────────────────────────────────────────────────────────── // Body — Body text, paragraphs, descriptions // ───────────────────────────────────────────────────────────────────────── body: { sm: { regular: { font: '400 0.75rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.05px", }, medium: { font: '500 0.75rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.05px", }, semibold: { font: '600 0.75rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.05px", }, }, md: { regular: { font: '400 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, medium: { font: '500 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, semibold: { font: '600 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, }, lg: { regular: { font: '400 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, medium: { font: '500 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, semibold: { font: '600 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, }, }, }, }; // Get the container element where the viewer will be mounted. const container = document.getElementById("nutrient-container"); NutrientViewer.load({ container, document: "document.pdf", theme: customTheme, }).catch((error) => { console.error("Failed to load viewer with custom theme:", error); }); ``` You can find the complete signature of the theme object in the [API documentation](https://www.nutrient.io/baseline-ui/?path=/docs/theming--docs#theme-object-structure). One thing to keep in mind is that you cannot pass a partial theme object. You need to pass the whole theme object, including the properties you don’t want to override. You can find an example of a theme object [here](https://www.nutrient.io/baseline-ui/?path=/docs/theming--docs#example). ## Applying theme to a specific section The JSON object above is applied to the whole viewer in form of CSS variables. This enables you to override the theme for a specific section of the viewer by just overriding the CSS variables for that section. These variables start with the prefix `--bui-`. Every theme object property is mapped to a CSS variable. For example, the `color.background.primary.strong` property is mapped to the `--bui-color-background-primary-strong` CSS variable. For example, if you want to override the error support color for the toolbar, you can do the following: ```css.PSPDFKit-Toolbar { --bui-color-support-error-subtler: #000; --bui-color-support-error-subtle: #000; --bui-color-support-error-medium: #000; --bui-color-support-error-strong: #000; } ``` You can find the complete list of CSS variables in the [API documentation](https://www.nutrient.io/baseline-ui/?path=/docs/theming--docs#using-theme-variables). --- ## Related pages - [Customizing CSS styling in our JavaScript PDF viewer](/guides/web/customizing-the-interface/css-customization.md) - [Enabling dark theme in our JavaScript PDF viewer](/guides/web/user-interface/theming/dark-theme.md) - [Customizing icons in our JavaScript PDF viewer](/guides/web/user-interface/theming/icons.md)