Theme Colors

Customize PDF Atelier colors to match your brand. Set different colors for light and dark modes—it's simple.

Customize the colors of buttons, text, backgrounds, and UI elements throughout PDF Atelier. You can apply different colors for light and dark modes independently — perfect for matching your app's brand or supporting multiple color themes.

Color Format

Colors are specified as space-separated RGB values (like "126 34 206" for purple). Just think of it as the red, green, and blue numbers separated by spaces.

Format: "red green blue" where each value is 0–255

Examples:

Purple: "126 34 206"
Teal: "45 212 191"
Rose: "244 63 94"
Slate: "51 65 85"

What You Can Customize

PDF Atelier gives you 44 color props — 22 for light mode, 22 for dark mode — covering every visual token in the UI. Each light prop has a matching dark counterpart. Only set what you need; everything else falls back to the built-in defaults.

Primary / Brand — controls buttons, links, active states, focus rings

Light	Dark
`theme-primary`	`theme-primary-dark`
`theme-primary-hover`	`theme-primary-hover-dark`
`theme-primary-subtle`	`theme-primary-subtle-dark`
`theme-primary-press`	`theme-primary-press-dark`
`theme-primary-border`	`theme-primary-border-dark`
`theme-primary-ring`	`theme-primary-ring-dark`

Surfaces / Backgrounds — panels, inputs, buttons, overlays

Light	Dark
`theme-background`	`theme-background-dark`
`theme-background-subtle`	`theme-background-subtle-dark`
`theme-background-input`	`theme-background-input-dark`
`theme-background-btn`	`theme-background-btn-dark`
`theme-scrim`	`theme-scrim-dark`

Text — body copy, muted labels, text on colored backgrounds

Light	Dark
`theme-text`	`theme-text-dark`
`theme-text-muted`	`theme-text-muted-dark`
`theme-text-on-primary`	`theme-text-on-primary-dark`
`theme-text-strong`	`theme-text-strong-dark`

Borders — dividers, input outlines, strong separators

Light	Dark
`theme-border`	`theme-border-dark`
`theme-border-input`	`theme-border-input-dark`
`theme-border-strong`	`theme-border-strong-dark`

Destructive — delete buttons, warnings, error states

Light	Dark
`theme-destructive`	`theme-destructive-dark`
`theme-destructive-hover`	`theme-destructive-hover-dark`
`theme-destructive-ring`	`theme-destructive-ring-dark`

Misc

Light	Dark
`theme-thumb-active`	`theme-thumb-active-dark`

Only want to set light colors? That's fine — dark mode will use sensible defaults. But for best results, customize both.

import { PDFAtelier } from '@innosoft/pdf-atelier-react';

export default function CustomThemeExample() {
  return (
    <PDFAtelier
      src="/document.pdf"
      license="YOUR_LICENSE_KEY"
      // Primary
      themePrimary="126 34 206"
      themePrimaryHover="147 51 234"
      themePrimarySubtle="243 232 255"
      themePrimaryPress="233 213 255"
      themePrimaryBorder="196 181 253"
      themePrimaryRing="168 85 247"
      themePrimaryDark="147 51 234"
      themePrimaryHoverDark="168 85 247"
      themePrimarySubtleDark="76 29 149"
      themePrimaryPressDark="88 28 135"
      themePrimaryBorderDark="126 34 206"
      themePrimaryRingDark="147 51 234"
      // Surfaces
      themeBackground="255 255 255"
      themeBackgroundSubtle="249 250 251"
      themeBackgroundInput="255 255 255"
      themeBackgroundBtn="255 255 255"
      themeScrim="0 0 0"
      themeBackgroundDark="17 24 39"
      themeBackgroundSubtleDark="10 15 23"
      themeBackgroundInputDark="30 41 59"
      themeBackgroundBtnDark="30 41 59"
      themeScrimDark="0 0 0"
      // Text
      themeText="55 65 81"
      themeTextMuted="107 114 128"
      themeTextOnPrimary="255 255 255"
      themeTextStrong="0 0 0"
      themeTextDark="226 232 240"
      themeTextMutedDark="148 163 184"
      themeTextOnPrimaryDark="255 255 255"
      themeTextStrongDark="255 255 255"
      // Borders
      themeBorder="229 231 235"
      themeBorderInput="209 213 219"
      themeBorderStrong="55 65 81"
      themeBorderDark="51 65 85"
      themeBorderInputDark="71 85 99"
      themeBorderStrongDark="148 163 184"
      // Destructive
      themeDestructive="220 38 38"
      themeDestructiveHover="185 28 28"
      themeDestructiveRing="248 113 113"
      themeDestructiveDark="239 68 68"
      themeDestructiveHoverDark="220 38 38"
      themeDestructiveRingDark="254 226 226"
      // Misc
      themeThumbActive="41 121 255"
      themeThumbActiveDark="126 34 206"
      showDarkModeToggle={true}
    />
  );
}

Dynamic Theme Switching:

import { PDFAtelier } from '@innosoft/pdf-atelier-react';
import { useState } from 'react';

const THEMES = {
  purple: {
    primary: '126 34 206',
    primaryDark: '147 51 234'
  },
  teal: {
    primary: '45 212 191',
    primaryDark: '32 201 151'
  },
  rose: {
    primary: '244 63 94',
    primaryDark: '251 113 133'
  }
};

export default function ThemeSwitcher() {
  const [theme, setTheme] = useState('purple');
  const current = THEMES[theme];

  return (
    <div>
      <div className="theme-buttons">
        {Object.keys(THEMES).map(name => (
          <button key={name} onClick={() => setTheme(name)}>
            {name.charAt(0).toUpperCase() + name.slice(1)}
          </button>
        ))}
      </div>
      <PDFAtelier
        src="/document.pdf"
        license="YOUR_LICENSE_KEY"
        themePrimary={current.primary}
        themePrimaryDark={current.primaryDark}
        showDarkModeToggle={true}
      />
    </div>
  );
}

import { Component } from '@angular/core';
import { PdfAtelierWrapper } from '@innosoft/pdf-atelier-angular';

@Component({
  standalone: true,
  selector: 'app-custom-theme',
  imports: [PdfAtelierWrapper],
  template: `
    <pdf-atelier-wrapper
      [src]="pdfSrc"
      [license]="licenseKey"
      [themePrimary]="'126 34 206'"
      [themePrimaryHover]="'147 51 234'"
      [themePrimarySubtle]="'243 232 255'"
      [themePrimaryPress]="'233 213 255'"
      [themePrimaryBorder]="'196 181 253'"
      [themePrimaryRing]="'168 85 247'"
      [themePrimaryDark]="'147 51 234'"
      [themePrimaryHoverDark]="'168 85 247'"
      [themePrimarySubtleDark]="'76 29 149'"
      [themePrimaryPressDark]="'88 28 135'"
      [themePrimaryBorderDark]="'126 34 206'"
      [themePrimaryRingDark]="'147 51 234'"
      [themeBackground]="'255 255 255'"
      [themeBackgroundSubtle]="'249 250 251'"
      [themeBackgroundInput]="'255 255 255'"
      [themeBackgroundBtn]="'255 255 255'"
      [themeScrim]="'0 0 0'"
      [themeBackgroundDark]="'17 24 39'"
      [themeBackgroundSubtleDark]="'10 15 23'"
      [themeBackgroundInputDark]="'30 41 59'"
      [themeBackgroundBtnDark]="'30 41 59'"
      [themeScrimDark]="'0 0 0'"
      [themeText]="'55 65 81'"
      [themeTextMuted]="'107 114 128'"
      [themeTextOnPrimary]="'255 255 255'"
      [themeTextStrong]="'0 0 0'"
      [themeTextDark]="'226 232 240'"
      [themeTextMutedDark]="'148 163 184'"
      [themeTextOnPrimaryDark]="'255 255 255'"
      [themeTextStrongDark]="'255 255 255'"
      [themeBorder]="'229 231 235'"
      [themeBorderInput]="'209 213 219'"
      [themeBorderStrong]="'55 65 81'"
      [themeBorderDark]="'51 65 85'"
      [themeBorderInputDark]="'71 85 99'"
      [themeBorderStrongDark]="'148 163 184'"
      [themeDestructive]="'220 38 38'"
      [themeDestructiveHover]="'185 28 28'"
      [themeDestructiveRing]="'248 113 113'"
      [themeDestructiveDark]="'239 68 68'"
      [themeDestructiveHoverDark]="'220 38 38'"
      [themeDestructiveRingDark]="'254 226 226'"
      [themeThumbActive]="'41 121 255'"
      [themeThumbActiveDark]="'126 34 206'"
      [showDarkModeToggle]="true"
    ></pdf-atelier-wrapper>
  `,
})
export class CustomThemeComponent {
  pdfSrc = '/document.pdf';
  licenseKey = 'YOUR_LICENSE_KEY';
}

Theme Selection Component:

import { Component } from '@angular/core';
import { PdfAtelierWrapper } from '@innosoft/pdf-atelier-angular';
import { CommonModule } from '@angular/common';

interface ThemeConfig {
  name: string;
  primary: string;
  primaryDark: string;
}

@Component({
  selector: 'app-theme-selector',
  standalone: true,
  imports: [PdfAtelierWrapper, CommonModule],
  template: `
    <div class="theme-controls">
      <button *ngFor="let t of themes"
              (click)="selectTheme(t)"
              [class.active]="selectedTheme === t.name">
        {{ t.name }}
      </button>
    </div>
    <pdf-atelier-wrapper
      [src]="pdfSrc"
      [license]="licenseKey"
      [themePrimary]="selectedThemeConfig.primary"
      [themePrimaryDark]="selectedThemeConfig.primaryDark"
      [showDarkModeToggle]="true"
    ></pdf-atelier-wrapper>
  `,
  styles: [`
    .theme-controls button.active {
      font-weight: 700;
    }
  `]
})
export class ThemeSelectorComponent {
  pdfSrc = '/document.pdf';
  licenseKey = 'YOUR_LICENSE_KEY';
  selectedTheme = 'Purple';

  themes: ThemeConfig[] = [
    { name: 'Purple', primary: '126 34 206', primaryDark: '147 51 234' },
    { name: 'Teal', primary: '45 212 191', primaryDark: '32 201 151' },
    { name: 'Rose', primary: '244 63 94', primaryDark: '251 113 133' }
  ];

  get selectedThemeConfig(): ThemeConfig {
    return this.themes.find(t => t.name === this.selectedTheme) || this.themes[0];
  }

  selectTheme(theme: ThemeConfig) {
    this.selectedTheme = theme.name;
  }
}

<script setup lang="ts">
import PdfAtelierWrapper from '@innosoft/pdf-atelier-vue';

const pdfSrc = '/document.pdf';
const licenseKey = 'YOUR_LICENSE_KEY';
</script>

<template>
  <PdfAtelierWrapper
    :src="pdfSrc"
    :license="licenseKey"
    theme-primary="126 34 206"
    theme-primary-hover="147 51 234"
    theme-primary-subtle="243 232 255"
    theme-primary-press="233 213 255"
    theme-primary-border="196 181 253"
    theme-primary-ring="168 85 247"
    theme-primary-dark="147 51 234"
    theme-primary-hover-dark="168 85 247"
    theme-primary-subtle-dark="76 29 149"
    theme-primary-press-dark="88 28 135"
    theme-primary-border-dark="126 34 206"
    theme-primary-ring-dark="147 51 234"
    theme-background="255 255 255"
    theme-background-subtle="249 250 251"
    theme-background-input="255 255 255"
    theme-background-btn="255 255 255"
    theme-scrim="0 0 0"
    theme-background-dark="17 24 39"
    theme-background-subtle-dark="10 15 23"
    theme-background-input-dark="30 41 59"
    theme-background-btn-dark="30 41 59"
    theme-scrim-dark="0 0 0"
    theme-text="55 65 81"
    theme-text-muted="107 114 128"
    theme-text-on-primary="255 255 255"
    theme-text-strong="0 0 0"
    theme-text-dark="226 232 240"
    theme-text-muted-dark="148 163 184"
    theme-text-on-primary-dark="255 255 255"
    theme-text-strong-dark="255 255 255"
    theme-border="229 231 235"
    theme-border-input="209 213 219"
    theme-border-strong="55 65 81"
    theme-border-dark="51 65 85"
    theme-border-input-dark="71 85 99"
    theme-border-strong-dark="148 163 184"
    theme-destructive="220 38 38"
    theme-destructive-hover="185 28 28"
    theme-destructive-ring="248 113 113"
    theme-destructive-dark="239 68 68"
    theme-destructive-hover-dark="220 38 38"
    theme-destructive-ring-dark="254 226 226"
    theme-thumb-active="41 121 255"
    theme-thumb-active-dark="126 34 206"
    :show-dark-mode-toggle="true"
  />
</template>

Theme Switcher with Composition API:

<script setup lang="ts">
import PdfAtelierWrapper from '@innosoft/pdf-atelier-vue';
import { ref, computed } from 'vue';

interface Theme {
  name: string;
  primary: string;
  primaryDark: string;
}

const themes: Theme[] = [
  { name: 'Purple', primary: '126 34 206', primaryDark: '147 51 234' },
  { name: 'Teal', primary: '45 212 191', primaryDark: '32 201 151' },
  { name: 'Rose', primary: '244 63 94', primaryDark: '251 113 133' },
  { name: 'Blue', primary: '59 130 246', primaryDark: '96 165 250' }
];

const selectedThemeName = ref('Purple');
const pdfSrc = '/document.pdf';
const licenseKey = 'YOUR_LICENSE_KEY';

const selectedTheme = computed(() =>
  themes.find(t => t.name === selectedThemeName.value) || themes[0]
);
</script>

<template>
  <div class="theme-container">
    <div class="theme-buttons">
      <button
        v-for="theme in themes"
        :key="theme.name"
        @click="selectedThemeName = theme.name"
        :class="{ active: selectedThemeName === theme.name }"
      >
        {{ theme.name }}
      </button>
    </div>

    <PdfAtelierWrapper
      :src="pdfSrc"
      :license="licenseKey"
      :theme-primary="selectedTheme.primary"
      :theme-primary-dark="selectedTheme.primaryDark"
      :show-dark-mode-toggle="true"
    />
  </div>
</template>

<style scoped>
.theme-buttons button.active {
  font-weight: 700;
}
</style>

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import '@innosoft/pdf-atelier-core';
    </script>
  </head>
  <body>
    <pdf-atelier
      id="pdfViewer"
      src="/document.pdf"
      license="YOUR_LICENSE_KEY"
      theme-primary="126 34 206"
      theme-primary-hover="147 51 234"
      theme-primary-subtle="243 232 255"
      theme-primary-press="233 213 255"
      theme-primary-border="196 181 253"
      theme-primary-ring="168 85 247"
      theme-primary-dark="147 51 234"
      theme-primary-hover-dark="168 85 247"
      theme-primary-subtle-dark="76 29 149"
      theme-primary-press-dark="88 28 135"
      theme-primary-border-dark="126 34 206"
      theme-primary-ring-dark="147 51 234"
      theme-background="255 255 255"
      theme-background-subtle="249 250 251"
      theme-background-input="255 255 255"
      theme-background-btn="255 255 255"
      theme-scrim="0 0 0"
      theme-background-dark="17 24 39"
      theme-background-subtle-dark="10 15 23"
      theme-background-input-dark="30 41 59"
      theme-background-btn-dark="30 41 59"
      theme-scrim-dark="0 0 0"
      theme-text="55 65 81"
      theme-text-muted="107 114 128"
      theme-text-on-primary="255 255 255"
      theme-text-strong="0 0 0"
      theme-text-dark="226 232 240"
      theme-text-muted-dark="148 163 184"
      theme-text-on-primary-dark="255 255 255"
      theme-text-strong-dark="255 255 255"
      theme-border="229 231 235"
      theme-border-input="209 213 219"
      theme-border-strong="55 65 81"
      theme-border-dark="51 65 85"
      theme-border-input-dark="71 85 99"
      theme-border-strong-dark="148 163 184"
      theme-destructive="220 38 38"
      theme-destructive-hover="185 28 28"
      theme-destructive-ring="248 113 113"
      theme-destructive-dark="239 68 68"
      theme-destructive-hover-dark="220 38 38"
      theme-destructive-ring-dark="254 226 226"
      theme-thumb-active="41 121 255"
      theme-thumb-active-dark="126 34 206"
      show-dark-mode-toggle
    ></pdf-atelier>
  </body>
</html>

JavaScript Theme Control:

<div id="themeButtons">
  <button data-theme="purple">Purple</button>
  <button data-theme="teal">Teal</button>
  <button data-theme="rose">Rose</button>
</div>

<pdf-atelier
  id="pdfViewer"
  src="/document.pdf"
  license="YOUR_LICENSE_KEY"
  show-dark-mode-toggle="true"
></pdf-atelier>

<script type="module">
  import '@innosoft/pdf-atelier-core';

  const themes = {
    purple: {
      primary: '126 34 206',
      primaryDark: '147 51 234'
    },
    teal: {
      primary: '45 212 191',
      primaryDark: '32 201 151'
    },
    rose: {
      primary: '244 63 94',
      primaryDark: '251 113 133'
    }
  };

  const viewer = document.getElementById('pdfViewer');
  const buttons = document.querySelectorAll('#themeButtons button');

  buttons.forEach(button => {
    button.addEventListener('click', () => {
      const themeName = button.dataset.theme;
      const theme = themes[themeName];

      viewer.themePrimary = theme.primary;
      viewer.themePrimaryDark = theme.primaryDark;

      // Update button states
      buttons.forEach(b => b.classList.remove('active'));
      button.classList.add('active');
    });
  });

  // Set initial theme
  buttons[0].dispatchEvent(new MouseEvent('click'));
</script>

Use Cases

1. Brand Customization

Apply your brand colors throughout the PDF viewer:

<PDFAtelier
  src="/document.pdf"
  license="YOUR_LICENSE_KEY"
  themePrimary="0 115 170" // Your brand blue
  themePrimaryDark="100 200 255" // Lighter for dark mode
/>

2. Multi-Tenant Applications

Different customers get different color themes:

const customerThemes = {
  'acme-corp': { primary: '220 20 60', primaryDark: '255 105 180' },
  techstart: { primary: '0 150 136', primaryDark: '77 182 172' }
};

const theme = customerThemes[customerId];

<PDFAtelier
  src="/document.pdf"
  license="YOUR_LICENSE_KEY"
  themePrimary={theme.primary}
  themePrimaryDark={theme.primaryDark}
/>;

3. Accessibility and Contrast

Customize colors for accessibility requirements:

// High contrast mode
<PDFAtelier
  src="/document.pdf"
  license="YOUR_LICENSE_KEY"
  themePrimary="0 0 0" // Pure black
  theThemeText="255 255 255" // Pure white
  themeDestructive="255 0 0" // Pure red
/>

4. Color Consistency with App Theme

Match the PDF viewer to your application's existing color scheme:

import { useTheme } from 'your-theme-library';

export default function App() {
  const { colors } = useTheme();

  return (
    <PDFAtelier
      src="/document.pdf"
      license="YOUR_LICENSE_KEY"
      themePrimary={colors.primaryRGB}
      themePrimaryDark={colors.primaryDarkRGB}
      themeBackground={colors.backgroundRGB}
      themeBackgroundDark={colors.backgroundDarkRGB}
    />
  );
}

5. Dynamic Theme Switching

Allow users to choose themes on the fly (see playground apps for full examples):

const themes = new Map([
  ['purple', { primary: '126 34 206', primaryDark: '147 51 234' }],
  ['teal', { primary: '45 212 191', primaryDark: '32 201 151' }],
  ['rose', { primary: '244 63 94', primaryDark: '251 113 133' }]
]);

const [activeTheme, setActiveTheme] = useState('purple');
const currentTheme = themes.get(activeTheme);

return (
  <PDFAtelier themePrimary={currentTheme.primary} themePrimaryDark={currentTheme.primaryDark} />
);

Color Preset Reference

Here are some ready-to-use color combinations:

Indigo (Default)

Light: 79 70 229 | Dark: 99 102 241

Purple

Light: 126 34 206 | Dark: 147 51 234

Teal

Light: 45 212 191 | Dark: 32 201 151

Rose

Light: 244 63 94 | Dark: 251 113 133

Blue

Light: 59 130 246 | Dark: 96 165 250

Green

Light: 34 197 94 | Dark: 74 222 128

Orange

Light: 251 146 60 | Dark: 253 186 116

Slate

Light: 51 65 85 | Dark: 100 116 139

Customizing Everything

Want full control? Here's a complete example setting every color token for a purple/slate theme:

<PDFAtelier
  src="/document.pdf"
  license="YOUR_LICENSE_KEY"
  // ── Primary / brand ────────────────────────────────────────
  themePrimary="126 34 206"              // light: vibrant purple
  themePrimaryHover="147 51 234"
  themePrimarySubtle="243 232 255"
  themePrimaryPress="233 213 255"
  themePrimaryBorder="196 181 253"
  themePrimaryRing="168 85 247"

  themePrimaryDark="147 51 234"          // dark: lighter purple
  themePrimaryHoverDark="168 85 247"
  themePrimarySubtleDark="76 29 149"
  themePrimaryPressDark="88 28 135"
  themePrimaryBorderDark="126 34 206"
  themePrimaryRingDark="147 51 234"

  // ── Surfaces / backgrounds ─────────────────────────────────
  themeBackground="255 255 255"          // light: white
  themeBackgroundSubtle="249 250 251"
  themeBackgroundInput="255 255 255"
  themeBackgroundBtn="255 255 255"
  themeScrim="0 0 0"

  themeBackgroundDark="17 24 39"         // dark: deep slate
  themeBackgroundSubtleDark="10 15 23"
  themeBackgroundInputDark="30 41 59"
  themeBackgroundBtnDark="30 41 59"
  themeScrimDark="0 0 0"

  // ── Text ───────────────────────────────────────────────────
  themeText="55 65 81"                   // light: gray-700
  themeTextMuted="107 114 128"
  themeTextOnPrimary="255 255 255"
  themeTextStrong="0 0 0"

  themeTextDark="226 232 240"            // dark: slate-200
  themeTextMutedDark="148 163 184"
  themeTextOnPrimaryDark="255 255 255"
  themeTextStrongDark="255 255 255"

  // ── Borders ────────────────────────────────────────────────
  themeBorder="229 231 235"              // light: gray-200
  themeBorderInput="209 213 219"
  themeBorderStrong="55 65 81"

  themeBorderDark="51 65 85"             // dark: slate-700
  themeBorderInputDark="71 85 99"
  themeBorderStrongDark="148 163 184"

  // ── Destructive ────────────────────────────────────────────
  themeDestructive="220 38 38"           // light: red-600
  themeDestructiveHover="185 28 28"
  themeDestructiveRing="248 113 113"

  themeDestructiveDark="239 68 68"       // dark: red-500
  themeDestructiveHoverDark="220 38 38"
  themeDestructiveRingDark="254 226 226"

  // ── Misc ───────────────────────────────────────────────────
  themeThumbActive="41 121 255"          // light: blue slider thumb
  themeThumbActiveDark="126 34 206"      // dark: purple slider thumb
/>

Tips

Partial customization is OK — Only set the colors you want to change. The rest use sensible defaults.
Update colors anytime — Change theme props while the component is running and see updates instantly.
Light and dark are independent — Set a purple light theme and a teal dark theme if you want.
Accessibility matters — Make sure text and background colors have enough contrast so users can read everything.
null = default — Pass null to any prop to use the built-in color for that element.

PDF Atelier

Theme Colors

Theme Colors

Color Format

What You Can Customize

Primary / Brand Colors

Surface / Background Colors

Text Colors

Border Colors

Destructive Colors

Misc Colors

Implementation

Use Cases

1. Brand Customization

2. Multi-Tenant Applications

3. Accessibility and Contrast

4. Color Consistency with App Theme

5. Dynamic Theme Switching

Color Preset Reference

Indigo (Default)

Purple

Teal

Rose

Blue

Green

Orange

Slate

Customizing Everything

Tips

On this page